Control appearance is specified by its
Template property, where a
ControlTemplate defines the tree of visual elements that are shown for a type of control.
For example, a simple CheckBox template could be:
<CheckBox Content="Some check" HorizontalAlignment="Center" VerticalAlignment="Center">
<CheckBox.Template>
<ControlTemplate TargetType="CheckBox">
<Border Background="Transparent">
<BulletDecorator>
<BulletDecorator.Bullet>
<Border x:Name="bd" BorderBrush="Black" BorderThickness="1"
Padding="1" Width="16" Height="16" VerticalAlignment="Center">
<Path x:Name="chk" Data="M0,0 L10,10 M0,10 L10,0"
Stroke="Red" StrokeThickness="2" Stretch="Fill"/>
</Border>
</BulletDecorator.Bullet>
<ContentPresenter VerticalAlignment="Center" Margin="8,0,0,0"/>
</BulletDecorator>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background" Value="WhiteSmoke"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="chk" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
As you can see the color of each visual part is defined by the template elements. But you can bind some properties to the templated control, so changes in Control properties will modify the appearance of the template:
<CheckBox Content="Some check" HorizontalAlignment="Center" VerticalAlignment="Center"
BorderBrush="Green">
<CheckBox.Template>
...
<Path x:Name="chk" Data="M0,0 L10,10 M0,10 L10,0"
Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Stretch="Fill"/>
...
</CheckBox.Template>
</CheckBox>
The last CheckBox will have the a green check mark instead.
