Question

I’m sure this is a real beginner question; I’m just having trouble figuring out how to search for it.

I have a simple UserControl (MyNewControl) that only has three controls, one of which is the following label:

<sdk:Label x:Name="Title" />

In another control, then, I want to use MyNewControl, like this:

<local:MyNewControl Grid.Column="1" x:Name="MyNewGuy" />

What do I need to do so that this second control can, for example, set a gradient background for my Title label?

Answer 1

First you define the desired dependency property in your UserControl:

public partial class MyUserControl : UserControl
{
    public Brush LabelBackground
    {
        get { return (Brush)GetValue(LabelBackgroundProperty); }
        set { SetValue(LabelBackgroundProperty, value); }
    }
    public static readonly DependencyProperty LabelBackgroundProperty =
        DependencyProperty.Register("LabelBackground", typeof(Brush), typeof(MyUserControl), new PropertyMetadata(null));

    public MyUserControl()
    {
        InitializeComponent();
    }
}

To assign the value of your property to the child label, you can bind using the ElementName property of the binding:

<UserControl x:Class="SilverlightApplication1.MyUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
         d:DesignHeight="300"
         d:DesignWidth="400"
         mc:Ignorable="d"
         x:Name="UserControl"
         >

<Grid x:Name="LayoutRoot">
    <sdk:Label x:Name="Title"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" Content="Title" Background="{Binding LabelBackground, ElementName=UserControl}" />
</Grid>
</UserControl>

As you are using Silverlight 5, you can also set a RelativeSource to your binding, instead of internally naming your UserControl:

<sdk:Label Background="{Binding LabelBackground, RelativeSource={RelativeSource AncestorType=UserControl}}" />

Then, when using your UserControl, you just set (or bind) the LabelBackground to the desired value:

<local:MyUserControl LabelBackground="Red"/>

Just to note, you can also create a CustomControl instead of a UserControl, add the dependency property to it the same way and use a TemplateBinding when defining its template.