Why does the XAML designer report that my custom elements have not been built?

Consider a scenario where you've been working on developing business logic for your Windows Store app and you switch to the Visual Studio designer to check a UI element. You may notice the below message in the designer view of some XAML pages:

The Design view cannot display correctly because some custom elements have not yet been built.

 

 
 

You may also notice that even after rebuilding your project, the Visual Studio designer still displays the same message. Let's take a closer look to analyze what is happening behind the scenes.

While developing a Windows Store app, you may create a lot of logical sub-sections of the code by creating multiple namespaces. There may be some namespaces that contain public (ref) classes or private (ref) classes and some may have a mix of both. However, there is a gotcha here!

Let's demonstrate this problem by using the sample code below.

Consider a case where your app contains two namespaces, N1 and N2. Your App.xaml.h file looks like:

 

namespace N1
{
    public ref class C1 sealed
    {
        //members
    }
}

namespace N2
{
    public ref class C2 sealed
    {
        //members
    }
}

The code looks perfectly normal and doesn't produce any build errors in Visual Studio, however the designer still shows the same error message.

You go through all the designer files like LayoutAware.cpp, StandardStyles.xaml, App.xaml, however there is nothing wrong with those files. All the mark-up appears to be correct, however when you rebuild the project, you still see the same message in the designer.

 

To understand how to resolve this issue, you must ensure that you follow the below guideline when developing a Windows Store app.

 

All public classes must reside in the same root namespace which has the same name as the component metadata file

 

But how does that translate to the error that you’re seeing? Here’s how:

1) App.xaml.h is directly related to App.xaml – which loads the resources for your app – like linking your XAML pages (like MainPage.xaml) to “StandardStyles.xaml” resource dictionary.

2) The Visual Studio designer uses the Metadata information to render the controls.

3) Metadata for Windows Store Apps resides in WinMD files.

 

If you put all the pieces together, it starts to make sense that there’s some inconsistent data in the WinMD file which is preventing the designer from showing up correctly.

1) There is one WinMD file generated per C++ project and all public classes must fall under one namespace.

2) Our code doesn’t follow the guideline and hence there is a behavior issue with Visual Studio designer.

 

There are a couple of possible solutions:

1) Mark the class C2 as private - which makes all the public (ref) classes reside in only one namespace - N1

2) Move the namespace in a different header file which does not participate in XAML rendering - thus avoiding the inconsistent metadata to affect/ participate in the design.

 

To summarize the entire scenario, if you see a message in the Visual Studio designer saying - The Design view cannot display correctly because some custom elements have not yet been built - chances are that your app may have public classes spread across multiple namespaces and thus contributing to the UI rendering issue in the Visual Studio designer. You can resolve the error by putting the public (ref) classes under one namespace or use them in a way they don't contribute to UI rendering.

Happy coding and we look forward to seeing your app in the Windows Store!

 

-Sagar B. Joshi

Comments

• Anonymous
  April 21, 2013
  The comment has been removed
• Anonymous
  February 10, 2014
  I have the same problem with demo "Using SQLite in a Windows Store App"  code.msdn.microsoft.com/.../Discussions