Silverlight How to create a usercontrol whose properties are customizable - silverlight

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.

Answer 2

You can do that using dependency property in your custom control . Say you defined LableBG as an dependency property in your custom control and do the binding with an Background of your defined Label control in xaml . And when you use your custom control in another control you can set the LableBG of it from xaml or else from code behind.
Note : the type of your defined dependency property should be of Brush
For eg :
Defining Dependency Property in cs file of your custom control :
/1. Declare the dependency property as static, readonly field in your class.
public static readonly DependencyProperty LableBGProperty = DependencyProperty.Register(
"LableBG", //Property name
typeof(Brush), //Property type
typeof(MySilverlightControl), //Type of the dependency property provider
null );//Callback invoked on property value has changes
<sdk:Label x:Name="Title" Background="{Binding LableBG }" /> (Custom Control)
<local:MyNewControl Grid.Column="1" x:Name="MyNewGuy" LableBG="Red" /> (Another control)