Why does my UserControl not display in the designer?

Question

I have implemented a user control that lets me build several similar interface screens quickly. Basically it defines two dependency properties MainContent and UserInteractions which are then displayed in the visual template (xaml in a ResourceDictionary) looking like this:

+-------------+
| L |         |
| o |  Main   |
| g | Content |
| o |         |
+---+---------+
| Interaction |
+-------------+

Xaml for a screen then looks like this:

<controls:ScreenControl>
    <controls:ScreenControl.MainContent>
        <TextBlock>Some content goes here</TextBlock>
    </controls:ScreenControl.MainContent>
    <controls:ScreenControl.UserInteractions>
        <Button>Do something</Button>
    </controls:ScreenControl.UserInteractions>
</controls:InstallerScreenControl>

This works fine when I run the application. However, in the designer, nothing is visible. Not the content defined explicitly in the view, and not the stuff from the template. What do I need to add to enable design support? I tried moving the template to Themes/Generic.xaml as was suggested in some places, but that made no difference. This SO question seems related, but gets no useful answer.

EDIT: My ScreenControl looks like this:

public class ScreenControl : UserControl
{
    public object MainContent
    {
        get { return GetValue(MainContentProperty); }
        set { SetValue(MainContentProperty, value); }
    }
    public static readonly DependencyProperty MainContentProperty = DependencyProperty.Register(
        name: "MainContent",
        propertyType: typeof(object), 
        ownerType: typeof(ScreenControl),
        typeMetadata: new PropertyMetadata(default(object)));


    public object UserInteractions
    {
        get { return GetValue(UserInteractionsProperty); }
        set { SetValue(UserInteractionsProperty, value); }
    }
    public static readonly DependencyProperty UserInteractionsProperty = DependencyProperty.Register(
        name: "UserInteractions",
        propertyType: typeof(object),
        ownerType: typeof(ScreenControl),
        typeMetadata: new PropertyMetadata(default(object)));
}

When a screen using the control is viewed in the designer, it only shows this:

Ie, nothing, only a blank box.

When using the control, I'm creating a UserControl, adding the Xaml shown in the beginning of the question, and removing the code-behind file.

Answer 1

You must inherit your custom control from Control and not UserControl for having the template applied.

It's hard to tell with the information you are giving, but you must have a static constructor that applies the template.

public class ScreenControl : Control
{
    static ScreenControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ScreenControl), new FrameworkPropertyMetadata(typeof(ScreenControl)));
    }
}

May not be your issue when reading further, not sure you have some InDesignMode somewhere? Calls in your code that only works when the application is running? IE WebService calls? Just guessing here, but alot of things may cause the designer to break.