# Control Templates in Silverlight

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](https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc278068\(v=vs.95\)).

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

```xml
<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.

```xml
<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:

```xml
<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.

```xml
<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.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/silverlight/guides/how-to-enable-control-templates-in-the-migrated-application/control-templates-in-silverlight.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.