Introduction
Windows Presentation Foundation allows the developer to completely change the look and feel of the controls. This is accomplished by using Control Templates. It means you can render your Button
as an Ellipse
which when hovered will change its color. Actually, that is exactly what we are going to do in this article.
Why Control Templates and Why Not Styles?
In one of the previous articles, we talked about Styles in WPF. You can check out the article: Introduction to Styling in Windows Presentation Foundation.
One question you might ask is why not use styles to change the look of the controls. Styles can change the appearance of your control but they will be dependent on the properties provided by the control itself. It means you will not be able to render your Button
as a Polygon
. Control Templates allow changing the look of the control by providing a template which will be used by the control.
Creating a Round Button
In this article, we are going to create a round button
by using control templates. The first task is to create a simple button
control. Here is the code for that:
<Button Content="Push Me!" >
This will create a very simple button
control on the WPF form. Let’s create a template for this button
. We will place the template in the App.xaml file so that we can use it throughout the application.
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="el1" Fill="Orange" Width="100" Height="100">
</Ellipse>
</Grid>
</ControlTemplate>
The control template defined above is really simple! 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.
Now, let’s apply the template to the Button
control:
<Button Content="Push Me!" Template="{StaticResource buttonTemplate}"
Click="Button_Clicked"></Button>
As soon as you apply the control template, the Button
will change its display and will be rendered as an Ellipse
as shown below:
There is one problem with the above rendering; the content of the Button
control which is “Push Me!
” is not displayed. Let’s make it appear inside the Ellipse
. The ContentPresenter
control can be used to display the content of a WPF control.
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"
Content="{TemplateBinding Button.Content}" />
And here is the result:
We are not done yet! Let’s also add a trigger to the Button
control so that it changes the color of the Ellipse
once the mouse is over it.
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="el1" Property="Fill" Value="Yellow"/>
</Trigger>
</ControlTemplate.Triggers>
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.
Conclusion
WPF Control Template is a very important feature of the WPF Framework. It allows you to change the look and feel of the WPF controls and render them in completely different way from their default format.
I hope you liked the article. Happy coding!
History
- 14th November, 2008: Initial version