Control Templates in Silverlight

Silverlight enables to customize controls in several ways. We can customize a control by modifying the default template. So it will modify the visual appearance of an existing control or a new one.

Control templates are used to specify the visual structure (the appearance) and visual behavior of a control and keep his logic. When you create and use a control template, you replace the appearance of the existing control without changing its functionality. This is possible because there is a defined contract for the control which maintains separate the visual and the logic. The control consists of:

• Visual properties are exposed on the control. These properties could be used in the template with the Template Binding.

• Control Parts which is expected to maintain the visual structure of the control.

• Logic is associated with the part in the template.

For more details about contract considerations, check here.

The control customization using control templates allows you to:

• Change the visual structure of a control

• Change the appearance of a control to its state

• Specify the behavior between the state's transition of a control

Customizing a Control

This section describes the most common ways to customize a control by using Control Templates.

Locally inline definition

The Control Template can be defined by using the control.template property

<Button IsHitTestVisible="True" IsTabStop="False" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" >
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid Background="Transparent"/>
        </ControlTemplate>
    </Button.Template>
</Button>

Control template defined in resources

The Control Template can be defined by a resource reference directly as a template.

<UserControl.Resources>

	<SolidColorBrush x:Key="BreadcrumbOver" Color="#FFFFAD00" />

	<ControlTemplate x:Key="BreadcrumbButton"
					 TargetType="Button">
		<StackPanel x:Name="root" Orientation="Horizontal" Margin="0,0,5,0">
			<Grid Background="{TemplateBinding Background}">
				<Grid Margin="0,0,0,0"
					  x:Name="MouseOverOverlay"
					  Opacity="0"
					  Background="{StaticResource BreadcrumbOver}" />
				<ContentPresenter HorizontalAlignment="Center"
								  Margin="20,0,10,0"
								  VerticalAlignment="Center"
								  Content="{TemplateBinding Content}"
								  Width="20" 
								  />
			</Grid>
			<Canvas Width="20"
					Height="50" >
				<Path Height="50" 
					  HorizontalAlignment="Stretch"
					  VerticalAlignment="Stretch"
					  Width="20"
					  Canvas.Top="0"
					  Stretch="Fill"
					  Data="M0.1875,30.875 L20.062012,55 L0.18701173,81"
					  Fill="{TemplateBinding Background}" UseLayoutRounding="False" />
				<Path Height="50"
					  Width="20"
					  Stretch="Fill"
					  Data="M0.1875,30.875 L20.062012,55 L0.18701173,81"
					  x:Name="PathOverlay"
					  Fill="{StaticResource BreadcrumbOver}"
					  Opacity="0" UseLayoutRounding="False" />
			</Canvas>
			<Grid Visibility="Collapsed">
				<TextBlock TextWrapping="Wrap" Text="&gt;" VerticalAlignment="Center" d:LayoutOverrides="Width" 

FontSize="13.333" Margin="0,0,0,2" HorizontalAlignment="Center"/>
			</Grid>
		</StackPanel>
	</ControlTemplate>

And the use of the previously defined template will be:

<Button x:Name="btnWizard" HorizontalAlignment="Left"  VerticalAlignment="Center" 
            FontSize="20" Template="{StaticResource BreadcrumbButton}" Click="btnWizard_Click" />

Control Template definition in resource style

The Control Template can be defined as part of a style in any kind of resource.

<UserControl.Resources>
    <Style x:Name="ComboToggleButton" TargetType="ToggleButton">
      <Setter Property="Foreground" Value="#FF333333"/>
      <Setter Property="IsTabStop" Value="False"/>
      <Setter Property="Background" Value="#FF1F3B53"/>
      <Setter Property="Padding" Value="0"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ToggleButton">
            <Grid>
              <Rectangle Fill="Transparent"/>
              <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
</UserControl.Resources>

Silverlight templated control

Silverlight allows you to define your own with a custom style, or extend from another. This will generate a style for the control in the Themes/Generic.xaml, and generate a class for the created control.

public class MyCustomToggleButton : ToggleButton
{
    public MyCustomToggleButton()
    {
        this.DefaultStyleKey = typeof(ToggleButton);
    }
}