Setting the XAML Property Value for User Control

Question

I have a user control in WPF that I want the text of one of its labels to be read from XAML where it is used. Consequently..

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 this does not work ... How can I read the properties?

Answer 1

I only did this with Silverlight, but I would not be surprised if it worked the 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 text // </summary> public string TextExposedInXaml { get { return (string)GetValue(TestNameProperty ); } set { SetValue(TestNameProperty , value); // set the value of the control text here...! } } 

Answer 2

I tried the first two answers and that I worked in the code, but not in XAML (it also does not allow me to see changes in the design view when using the control).

To get a property that works like any other native, here is the complete process: (The sample adds a dependency property of type Nullable to display in the control as text or by default if null)

• In the code file:

  1.a Define the dependency property:

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

  1.b Implementing 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 (regardless) to use the dependency property for ease of 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. } } 

• In the XAML file, bind the TextBlock control text to the property (not dependencies) to get the default value for the dependency property if it is not set by the user of the control (if you named your root element of the user control "RootElement"):

This code:

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

Answer 3

If you give the root element of UserControl a name, then you can access 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 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 need to either implement INotifyPropertyChanged or have the TestName dependency property so that the binding is reevaluated after the property is set.

Answer 4

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