WPF Style, Triggers and ControlTemplates

Hi folks!

In this post we shall discuss on Styles and a brief description on how to use Triggers and ControlTemplates.

The best feature of WPF is the ability to allow the user to modify the design of a control.

Consider the following situations:

1) Imagine you are developing an application for a specific user whose need is to display a control (example:- button) in a triangular shape.

2) You want each of the control to have a specific background, foreground color and other properties to be in common.

example:-  

<StackPanel>
<TextBox Margin="5" x:Name="textbox1" FontSize="14" FontFamily="Arial" FontWeight="Bold" Width="200" Background="LightGray" Foreground="Green" Text="Without"/>
<TextBox Margin="5" x:Name="textbox2" FontSize="14" FontFamily="Arial" FontWeight="Bold" Width="200" Background="LightGray" Foreground="Green" Text="using"/>
<TextBox Margin="5" x:Name="textbox3" FontSize="14" FontFamily="Arial" FontWeight="Bold" Width="200" Background="LightGray" Foreground="Green" Text="styles"/>
<TextBox Margin="5" x:Name="textbox4" FontSize="14" FontFamily="Arial" FontWeight="Bold" Width="200" Background="LightGray" Foreground="Green" TextWrapping="Wrap" Text="tedious task to describe all propeties"/>
</StackPanel>

TextBoxes without Styles

Imagine you have 50 such TextBox in your application, you need to change all the properties in every TextBox whenever client specification changes.

Styles:  Styles are similar to CSS(Cascading Style Sheets). You define how a control should like and then you can use it over and over again.

* Style typically consists of Key to identify it.

* Style contains TargetType to specify the control we are defining.

* Style uses Setters  to set the properties of the specified control.

A simple Style  for the above TextBox's would be:

<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">

   <Setter Property="Background" Value="LightGray"/>

   <Setter Property="FontSize" Value="14"/>

   <Setter Property="FontFamily" Value="Arial"/>

   <Setter Property="FontWeight" Value="Bold"/>

   <Setter Property="Foreground" Value="Green"/>

</Style>

To apply Style for the TextBox :

<TextBox Style="{StaticResource TextBoxStyle}" Text="Style Applied"/>
You can reuse this Style through out the application, if you place the above style in Resource Dictionary file.
  Style has many more properties like Triggers, Control Templates etc.
An example on how to use Trigger and Control Template.

Style to change the border color of TextBox on focus:

 <TextBox Style="{StaticResource TextBoxStyle}" Text="Style Applied"/>

<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type TextBox}">

                        <Border x:Name="Bd" SnapsToDevicePixels="True" Background="White" BorderBrush="#FF0C9271" BorderThickness="2,1,0.5,0.5"

CornerRadius="15" Width="200" Height="25">

                            <ScrollViewer x:Name="PART_ContentHost"/>

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsFocused" Value="True">

                                <Setter Property="BorderBrush"  Value="Green" TargetName="Bd"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

I shall discuss more on ControlTemplates, Triggers on my next post.