Setting XAML property value to user control

Question

I have a user control in WPF which i want the text of one of it's labels to be read from the XAML where it is used. Hence..

My User Control:

 <UserControl x:Class="muc">
        <Label Foreground="#FF7800" FontSize="20" FontWeight="Bold">          
             <Label.Content>
                <Binding ElementName="TestName" Path="." />
             </Label.Content>
        </Label>
 </UserControl>

Then using it:

 <mycontorls:muc TestName="This is a test" />

But it doesn't works ... How can i read the properties ?

Answer 1

If you give the root UserControl element a name, then you can refer to it using ElementName:

<UserControl x:Class="muc"
             Name="rootElement">
    <Label Foreground="#FF7800" FontSize="20" FontWeight="Bold">
        <Label.Content>
            <Binding ElementName="rootElement" Path="TestName" />
        </Label.Content>
    </Label>
</UserControl>

You can also use the markup extension syntax to make it a little shorter:

<UserControl x:Class="muc"
             Name="rootElement">
    <Label Foreground="#FF7800" FontSize="20" FontWeight="Bold"
           Content="{Binding TestName, ElementName=rootElement}"/>
</UserControl>

Also remember that your control will be created before its properties are set. You will either need to implement INotifyPropertyChanged or have TestName be a dependency property so that the binding is re-evaluated after the property is set.

Answer 2

{Binding ElementName=x} binds to an element with name x in the element tree, there is nothing here that deals with property TestName. If you want a property on your user control, then you have to define the property in the class corresponding to that user control (in your case it would be muc), and use {Binding RelativeSource={RelativeSource FindAncestor, ...}} to reference it on your user control (see here for details), or give it a name so you can use ElementName.

Answer 3

I've only done this with Silverlight, but i wouldnt be surprised if it works in the exact same way!

// <summary>
// Xaml exposed TextExposedInXaml property.
// </summary>
public static readonly DependencyProperty TestNameProperty = DependencyProperty.Register("TestName", typeof(string), typeof(NameOfMyUserControl), new PropertyMetadata(string.empty));

// <summary>
 // Gets or sets the control's text
// </summary>
public string TextExposedInXaml
{
            get
            {
                return (string)GetValue(TestNameProperty );
            }

            set
            {
                SetValue(TestNameProperty , value);

                // set the value of the control's text here...!
            }
}

Answer 4

I tried the first two answers and what I got worked in code but not on XAML (also doesn't let you see changes in the design view when using the control).

To get a property working like any other native one, here is the full process: (The sample adds a dependency property of type Nullable to show in the control as text or a default if null)

1. In the code file: 1.a Define a dependency property:

   public static readonly DependencyProperty MyNumberProperty = DependencyProperty.Register("MyNumber", typeof(Nullable<int>), typeof(MyUserControl), new PropertyMetadata(null, new PropertyChangedCallback(OnMyNumberChanged)));
   

   1.b Implement the OnMyNumberChanged Callback:

   private static void OnMyNumberChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){
       // When the color changes, set the icon color PlayButton
       MyUserControl muc = (MyUserControl)obj;
       Nullable<int> value = (Nullable<int>)args.NewValue;
       if (value != null)
       {
           muc.MyNumberTextBlock.Text = value.ToString();
       }
       else
       {
           muc.MyNumberTextBlock.Text = "N/A";
       }
   }
   

   1.c implement the MyNumber property (not dependency) to use the dependency property for easy in code use:

   public Nullable<int> MyNumber{
       get
       {
           return (Nullable<int>)GetValue(MyNumberProperty);
       }
       set
       {
           SetValue(MyNumberProperty, value);
           OnTargetPowerChanged(this, new DependencyPropertyChangedEventArgs(TargetPowerProperty, value, value));    // Old value irrelevant.
       }
   }
   

2. In the XAML file bind the TextBlock control's text to the property (not dependency) to get the default value of the dependency property in case it is not set by the user of the control (assuming you called your root element of the user control "RootElement"):

   < TextBlock Name="MyNumberTextBlock" Text="{Binding MyNumber, ElementName=RootElement}"/>