Question

What is the Control Template in WPF?

Answer 1

he ControlTemplate contains the tree of elements that define the desired look. After you define a ControlTemplate you can attach it to any Control or Page by setting it's TemplateProperty.

1. <Grid>  
2.     <Grid.Resources>  
3.         <ControlTemplate x:Key="buttonTemplate">  
4.             <Grid>  
5.                 <Ellipse Width="160" Height="160" x:Name="outerCircle">  
6.                     <Ellipse.Fill>  
7.                         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">  
8.                             <GradientStop Offset="0" Color="Green"></GradientStop>  
9.                             <GradientStop Offset="1" Color="Purple"></GradientStop>  
10.                         </LinearGradientBrush>  
11.                     </Ellipse.Fill>  
12.                 </Ellipse>  
13.                 <Ellipse Width="120" Height="120">  
14.                     <Ellipse.Fill>  
15.                         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">  
16.                             <GradientStop Offset="0" Color="Gray"> </GradientStop>  
17.                             <GradientStop Offset="1" Color="Blue"> </GradientStop>  
18.                         </LinearGradientBrush>  
19.                     </Ellipse.Fill>  
20.                 </Ellipse>  
21.             </Grid>  
22.             <ControlTemplate.Triggers>  
23.                 <Trigger Property="Button.IsMouseOver" Value="True">  
24.                     <Setter TargetName="outerCircle" Property="Fill" Value="Black"> </Setter>  
25.                 </Trigger>  
26.                 <Trigger Property="Button.IsPressed" Value="True">  
27.                     <Setter Property="RenderTransform">  
28.                         <Setter.Value>  
29.                             <ScaleTransform ScaleX=".8" ScaleY=".8"> </ScaleTransform>  
30.                         </Setter.Value>  
31.                     </Setter>  
32.                     <Setter Property="RenderTransformOrigin" Value=".6,.6"> </Setter>  
33.                 </Trigger>  
34.             </ControlTemplate.Triggers>  
35.         </ControlTemplate>  
36.     </Grid.Resources>  
37.     <Button Template="{StaticResource buttonTemplate}">Click Me</Button>  
38. </Grid>  

 

 

After MouseOver: