WPF control transparent on design time

Question

I created a nice button in ExpressionBlend, it works nice, have some dependency properties for the background color and others.

I create my project in Visual Studio, import the dll, I have my UserControl in the toolbox, I drag it to the page and a trasnparent square appears. I can set all the properties in the editor, I can even run the application and my UserControl is there showing all the colors correct

But it does not work for the designer.. Any clue why can it happens ?

I can add some source but.. is pretty simple stuff..

Note: The UserControl dll is compiled against AnyCPU target platform, and the application is for x64. All based in 4.6.1 .NetFW

Some code:

public partial class InteractiveRisedButton : UserControl
{
    public event EventHandler g_Clicked;


    public string ButtonBackground
    {
        get { return (string)GetValue(ButtonBackgroundProperty); }
        set { SetValue(ButtonBackgroundProperty, value); }
    }
    public string InnerTextContent
    {
        get { return (string)GetValue(InnerTextProperty); }
        set { SetValue(InnerTextProperty, value); }
    }
    public static readonly DependencyProperty ButtonBackgroundProperty =
       DependencyProperty.Register("ButtonBackground", typeof(string), typeof(InteractiveRisedButton));

    public static readonly DependencyProperty InnerTextProperty =
        DependencyProperty.Register("InnerTextContent", typeof(string), typeof(InteractiveRisedButton));

    public InteractiveRisedButton()
    {
        InitializeComponent();
    }
}

xaml:

<UserControl x:Name="InterRisedButton" x:Class="gMaterialWPF.InteractiveRisedButton">
<UserControl.Resources>
    <Style x:Key="InteractiveRisedButtonStyle"   
      ... lots of stuff here
      Background color is binded here like: 
      <Border x:Name="area" Cursor="Hand" Background="{Binding ButtonBackground, ElementName=InterRisedButton}"  BorderThickness="0">
</UserControl.Resources>
<Grid>
    <Button x:Name="button" Content="{Binding InnerTextContent, ElementName=InterRisedButton}" Margin="0" Style="{DynamicResource InteractiveRisedButtonStyle}" Click="button_Click"/>

</Grid>

In the host project I embed it using drag and drop, it ends up in something like:

<page
     xmlns:gMaterialWPF="clr-namespace:gMaterialWPF;assembly=gMaterialWPF"
>

<gMaterialWPF:InteractiveRisedButton Foreground="Red" ButtonBackground="Green" InnerTextContent="HOLA!" Height="100" Margin="0,50,0,20" ClipToBounds="False"/>

 </page>

This is what I see in the editor :

This is what I see in the running application:

Answer 1

This is hard to answer without knowing your code. Check your control has got a public default constructor and if the InitializeComponent() is there in place. Additionally check for your environment. Try it out within a new (test) project.

Partly knowing your code I tried to reproduce and for me it behaved as follows.

• NO button content displayed, when editing the button (which is because still no container is binding text at this stage).
• HOLA! being displayed when editing container windows's xaml and at run time.

Only thing I can say: it is a binding issue. You may use FallbackValue

Content="{Binding InnerTextContent, ElementName=InterRisedButton, FallbackValue='Tambien hola!'}"

to get s.th. when binding fails or still didn't happen at a certain stage.