WPF Templates, Styles and Triggers
Here I shall try to discuss these topics with fair degree of simplicity so that we all know what Templates, Styles and Triggers are in WPF.
Styles
In WPF, styles are similar to CSS styles: WPF styles also consist of a set of properties that can be applied to a visual element, like the background color of a button. However, styles in WPF can do more than CSS styles can: based on user interaction or on content, they can make the control look or behave differently, using triggers. WPF styles are available from code, which can be used in combination with personalization features of .NET 2.0. Like CSS, they help giving applications a unified look, that is easy maintainable, since properties only have to be changed in one place.
The XAML code for a simple button could look this:
<Button x:Name="SampleButton" Content="Push Me!!" Width="100" Height="30">
</Button>
Lets add some visual effects to it
<Button x:Name="PushMeButton"
Background="BlueViolet"
Foreground="White"
FontSize="20"
Width="50"
Height="30"
Content="Go" >
</Button>
We’ll now transform the markup code into a style. Styles can be added to the resources property of the window, the application. This depends on the scope from which you want to access the style. In this case, the style is added to the resources of a Page in a WPF Browser Application. This results in the style being available on that particular page: the scope of the style is the page on which it resides.
<Page.Resources>
<Style x:Key="PushMeButtonStyle">
<Setter Property="Control.Background" Value="BlueViolet" />
<Setter Property="Control.Foreground" Value="White" />
<Setter Property="Control.FontSize" Value="20" />
<Setter Property="Control.Width" Value="50" />
<Setter Property="Control.Height" Value="30" />
</Style>
</Page.Resources>
The Button Code
<Button x:Name="PushMeButtonWithStyle"
Content="Go"
Style="{StaticResource PushMeButtonStyle}">
</Button>
We have same visual effects with Styles.
Styles are really deep in WPF. Please refer to MSDN for further reading.
Templates and Triggers
Templates in WPF allow you to fully change the UI of anything in WPF. In WPF, Templates inherit from an Abstract base class called "FrameworkTemplate". This is shown as below –
As you can tell from the above figure, there are 4 kinds of Templates available within WPF.
1. ControlTemplate – We can use this, when we want to completely redefine the visual appearance of any control. Say, you don’t want a radiobutton to look like a radiobutton – you want it to look like a smiley instead. Smiling means Checked, and Frowning means Unchecked. You could easily acheive this using ControlTemplate.
2. ItemsPanelTemplate – Is a rather simple kind of template, it lets you control the appearance of the "ItemsPanel" property defined by "ItemsControl" on elements such as ListBox or ComboBox.
3. DataTemplate – is probably the most common kind of template you will use. It lets you change how "Content" is rendered on any control. So if you have an object called "Customer" and you want to define a standard look and feel for "Customer" – you’d use DataTemplate.
3.a. HierarchicalDataTemplate – is a class that is a DataTemplate that is very well suited to hierarchical data.
In this blog, I shall only cover ControlTemplate.
Please
Please:
1) Change to a different blog provider, then;
2) Save the draft
3) Change to HTML view, then back to the view you were on.
Your files will be ready to upload then.
Every predefined control in the Windows Presentation Foundation that has a visual appearance also has a template that entirely defines that appearance. This template is an object of type ControlTemplate that is set to the Template property defined by the Control class.
When you use a Windows Presentation Foundation control in your application, you can replace that default template with one of your own design. You retain the basic functionality of the control-including all the keyboard and mouse handling-but you can give it an entirely different look. This is what is meant when Windows Presentation Foundation controls are described (rather inelegantly) as "lookless." A control has a default look, but this look is not intrinsic to the inner workings of the control.
In a XAML file, a template is an element of type ControlTemplate. In a small Windows Presentation Foundation program, ControlTemplate elements are generally defined in a Resources section in the root element of a XAML file. For larger applications, or when defining templates that are shared among applications, ControlTemplate elements are in their own XAML files with root elements of ResourceDictionary.
In the below sample we shall try to make an ellipse of a button and change it to orange colour using triggers.
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100">
</Ellipse>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="el1" Property="Fill" Value="Yellow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The control template defined above is really simple for the above example. First a unique key “buttonTemplate” is assigned to the control template. Also, the TargetType of the template is set to “Button” which means this template can only be applied to a Button control. Next, we define an Ellipse inside the Grid control. It is a simple Ellipse filled with orange color.
In order to render the content of the Button control, let’s make it appear inside the Ellipse. The ContentPresenter control can be used to display the content of a WPF control.
The trigger is fired on the Button.IsMouseOver event. The Setter is used to change the Fill property of the Ellipse to “Yellow”. Now, when you hover over the Ellipse, it will change from orange to yellow.
Enjoy templates!!!
