Developing CustomControl and properties - xaml

Question

i'm seeking for information - videos, tutorials, books etc. for developing custom controls like http://www.telerik.com/
It means i want to develop my custom control, lets take for example - Expander.
This is my expander code:
<UserControl x:Class="PhoneApp16.Expander"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Rectangle Fill="Wheat"/>
<StackPanel Grid.Row="1"/>
</Grid>
This is how it looks on main form:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<local:Expander HorizontalAlignment="Left" VerticalAlignment="Top" Width="456"/>
</Grid>
But i want to add my own properties like:
IsExpanded=true/false which sets Expanders StackPanel visibility to visible or collapsed
I know about ValueConverters but how to achieve this property in XAML of my expander so it looked like:
<local:Expander IsExpanded="false" HorizontalAlignment="Left" VerticalAlignment="Top" Width="456"/>
Links to books, videos etc. are appreciated - best of all from the beginning ( for dummies );

Answer 1

You have to add DependencyProperties in code benind of your user control. For example imagine that following XAML is your user control:
<UserControl
x:Class="MyProject.Data.Controls.Elements.Editors.Select"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Root">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
CornerRadius="0,0,0,0">
<TextBlock
x:Name="MyBlock"
TextTrimming="CharacterEllipsis"
Text="{Binding ElementName=Root, Path=Label, Mode=OneWay}"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
FontSize="12"
TextAlignment="Right"
FontFamily="Segoe UI Semibold"
Margin="4,0,4,0"/>
</Border>
</Grid>
</UserControl>
Here is its code behind:
public partial class Select : UserControl
{
/// <summary>
///
/// </summary>
public Select()
{
InitializeComponent();
}
/// <summary>
///
/// </summary>
public string Label
{
get { return (string)GetValue(LabelProperty); }
set { SetValue(LabelProperty, value); }
}
/// <summary>
/// Identifies the <see cref="Label"/> dependency property.
/// </summary>
public static readonly DependencyProperty LabelProperty =
DependencyProperty.Register("Label", typeof(string), typeof(Select), new PropertyMetadata(string.Empty));
}
Now you can set Label property of the control in your form. When you set it this value goes to the Text property of the TextBlock named MyBlock.
It is important to create dependency properties otherwise bindings will not work.
Here is good reference book:
WPF Control Development Unleashed: Building Advanced User Experiences
Besides MSDN has several video and training materials:
http://msdn.microsoft.com/en-us/vstudio/aa496123