Articles → WPF → Creating your first control template in WPF

Creating your first control template in WPF

In this tutorial I will explain about control templates in WPF. Control template is a very powerful concept of WPF. By using control template you can change the UI of a control. To clarify the concept of changing the UI let us consider a real time example of a password textbox in which you want to put an image of a lock in the textbox.

Let us start working on the example.

1. Create a WPF windows application.

2. In the file Windows.xaml add a textbox control.

<TextBox Width="150" Height="25"></TextBox>

3. Now add an attribute Style in the control.

<TextBox Width="150" Height="25" Style="{StaticResource TextBoxStyle}"></TextBox>

4. Add a Style tag in Grid.Resources

<Grid.Resources>
	<Style TargetType="TextBox" x:Key="TextBoxStyle"></Style>
</Grid.Resources>

In the above code there are 2 attributes in the Style tag i.e. TargetType and x:Key. TargetType attribute describes the control for which the style is applicable. In the above code we are writing style for Button so here TargetType is Button. x:Key defines the ID of the style.

5. Add the setter property inside the style tag. For writing control template setter property would be Template so the style tag would be

<Style TargetType="TextBox" x:Key="TextBoxStyle">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate></ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

Now inside the ControlTemplate tag you can write your code to change the look of the control.

6. In the ControlTemplate tag I am adding a border and inside the border there is a Grid and finally inside the grid there is an image and textbox. So the final code would be.

<Style TargetType="{x:Type TextBox}" x:Key="TextBoxStyle">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate>
				<Border CornerRadius="1" BorderThickness="0.5" BorderBrush="Black">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto"></ColumnDefinition>
							<ColumnDefinition Width="*"></ColumnDefinition>
						</Grid.ColumnDefinitions>
						<Image Source="images\Emoticon.gif" HorizontalAlignment="Left" Grid.Column="0"></Image>
						<TextBox BorderThickness="0" Margin="0,0,1,0" HorizontalAlignment="Stretch" BorderBrush="Transparent" Grid.Column="1" VerticalContentAlignment="Center"></TextBox>
					</Grid>
				</Border>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

The code mentioned above is self explanatory. Now after all this run the program by pressing F5 and you will get following output.

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Sunday, April 4, 2010

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250