Translation Templates in WPF

(This article is translated from C-sharpcorner on the template article, the original address: http://www.c-sharpcorner.com/UploadFile/mahesh/templates-in-wpf/. )

The following three templates are available in WPF:

• Control Template
• Items Panel Template
• Data Template

Control Template

the ControlTemplate of the control defines the appearance of the control. 　　 We can change or define the new appearance of the space by simply changing the ControlTemplate of the control. ControlTemplate is more useful when you write your own controls. You can define the default appearance of the control. For example, a WPF button control has a rectangular layout, but with ControlTemplates you can build a custom button with a circular layout and change its color when you mouse over or click on it.

The ControlTemplate element in XAML defines a ControlTemplate when it is designed (design-time). Templates typically use the FrameworkElement resources property to be defined as a resource. The following code snippet provides the syntax for defining a ControlTemplate template for a BUTTON element.

 1  <  grid   >  2   >  3  <  controltemplate  x:key  Span style= "color: #0000ff;" >= "Roundbuttontemplate"  />  4  </ grid.resources   >  5   Grid  >  

Now, let's imagine that we need to create a circular button in Figure 1, where the outer circle of the button has a different color than the inner circle, and when the mouse overrides (mouse over) or the button is pressed, the button's background color changes.

Figure 1

The following code snippet creates a ControlTemplate and adds the grid as the content of the ControlTemplate. Now, whatever you put in the ControlTemplate, your controls will be that way. As you can see, in the code snippet below, we add two radii and colors with a different connotation of the grid ellipse.

1 <grid.resources>  2     <ControlTemplatex:key= "Roundbuttontemplate" >  3         <Grid>                      4       <EllipseWidth= "+"Height= "+"Name= "ButtonBorder"   5 Fill= "Orangered"  />  6             <EllipseWidth= "a"Height= "a"Fill= "Orange"  />  7         </Grid>  8     </ControlTemplate>  9 </grid.resources>  

The following code snippet creates a button element and sets its template to the ControlTemplate created by the code above.

1 <  Template= "{StaticResource roundbuttontemplate}">OK </ Button >  

The final output generates the buttons in Figure 1.

TargetType Property

　　The TargetType property is used to restrict the type of elements that ControlTemplate can apply to. The following code snippet ensures that the roundbuttontemplate can only be applied to the button element.

1 <  x:key= "Roundbuttontemplate"  TargetType= "{x:type button} " >  

ControlTemplate Triggers

　　Now it's better to add some cool features to this control. Let's drive the button when the mouse is covered (mouse over) or pressed. When the mouse overrides the button we change its color, and when pressed we reduce its size.

The trigger property of ControlTemplate is responsible for handling these events. The following code snippet adds the trigger of the IsMouseOver and ispressed events for the button. In a IsMouseOver event, we change the color of the button's inner circle. In a ispressed event, we change the width and height of the inner circle and change the color fill of the outer circle.

1 <controltemplate.triggers>  2     <Trigger Property= "Button.ismouseover"Value= "True">  3         <SetterTargetName= "Innercircle" Property= "Fill"Value= "LightGreen" />  4     </Trigger>  5     <Trigger Property= "button.ispressed"Value= "True">  6         <SetterTargetName= "Innercircle" Property= "Width"Value= "$" />  7         <SetterTargetName= "Innercircle" Property= "Height"Value= "$" />  8         <SetterTargetName= "Outercircle" Property= "Fill"Value= "Gray" />  9      </Trigger>  Ten </controltemplate.triggers> 

As shown in the following code snippet, I changed some code for the ellipse's fill property and filled them with gradient brushe.

1 <EllipseWidth= "+"Height= "+"Name= "Outercircle" >  2     <Ellipse.fill>  3         <LinearGradientBrushStartPoint= "0,0"EndPoint= "0,0.5">  4             <GradientStopOffset= "0"Color= "Orangered"  />  5             <GradientStopOffset= "1"Color= "Orange" />  6         </LinearGradientBrush>  7     </Ellipse.fill>  8 </Ellipse>  9 <EllipseWidth= "a"Height= "a"Name= "Innercircle">  Ten     <Ellipse.fill>   One         <LinearGradientBrushStartPoint= "0,0"EndPoint= "0,1">   A             <GradientStopOffset= "0"Color= "White" />   -             <GradientStopOffset= "1"Color= "Orangered" />   -         </LinearGradientBrush>   the     </Ellipse.fill>   - </Ellipse>  

The New button 2 shows that if you move the mouse over it, you will see the background color of the inner circle turn green, as shown in 3.

Figure 2

If you press the button, you will see that the background color of the outer circle becomes gray, and the width and height of the inner circle are reduced.

Figure 3

Beginner WPF, English proficiency is limited, please criticize correct.

Translation Templates in WPF