Idle talk about wpf ii 5 (ControlTemplate in WPF [3])

In practice, ControlTemplate is a very important function. It helps us quickly implement Cool custom controls. Next, I will analyze the use of ControlTemplate based on the example ControlTemplateExamples in the Windows Vista SDK. The example project is rich and contains almost all the standard controls. Therefore, when implementing custom controls, you can refer to this for appropriate study.

The first is the App. xaml file. Here it sets the Application. StartupUri attribute to Window1.xaml. Then, all the control xaml files under Resource in the project directory are merged into resources within the application scope.

<Application. Resources>
<ResourceDictionary>
<ResourceDictionary. MergedDictionaries>
<ResourceDictionary Source = "Resources \ Shared. xaml"/>
<! -- Omitted here -->
<ResourceDictionary Source = "Resources \ NavigationWindow. xaml"/>
</ResourceDictionary. MergedDictionaries>
</ResourceDictionary>
</Application. Resources>

This usage is of great reference significance. Implementing the Skin framework in WPF also becomes very simple. Values must dynamically use different XAML files. Then there is the Window1.xaml file. It displays almost all the controls. There is nothing to say. Focus on the custom control files in the Resource Directory. There are too many controls. I only select the Button. xaml as an example:

<ResourceDictionary
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml">

<ResourceDictionary. MergedDictionaries>
<ResourceDictionary Source = "Shared. xaml"/>
</ResourceDictionary. MergedDictionaries>

<! -- Focus Visual -->

<Style x: Key = "ButtonFocusVisual">
<Setter Property = "Control. Template">
<Setter. Value>
<ControlTemplate>
<Border>
<Rectangle Margin = "5" StrokeThickness = "3"
Stroke = "#60000000" StrokeDashArray = "4 2"/>
</Border>
</ControlTemplate>
</Setter. Value>
</Setter>
</Style>
<! -- ...... -->
</ResourceDictionary>

Because this XAML file is used as a resource, its root element is ResourceDictionary instead of Window/Application. At the same time, resource files can also be nested with each other, such as the Shared. xaml file contained above. Then a Style is defined. Note that the target type here is Control. Template, which is effective for all Control templates. Therefore, the Style adds an x: Key attribute. This prevents the Style from applying to all current controls. We must explicitly reference this Style. For more information, see my previous Style article.

Another sub-element of <ControlTemplate> can be any VisualTree. For example, Border or Grid. Now, a template named ButtonFocusVisual is defined. You only need to reference it below.

<Style TargetType = "Button">
<! -- ...... -->
<Setter Property = "FocusVisualStyle" Value = "{StaticResource ButtonFocusVisual}"/>
<! -- ...... -->
<Setter Property = "Template">
<Setter. Value>
<ControlTemplate TargetType = "Button">

<Border x: Name = "Border" ....../>

<ControlTemplate. Triggers>
<Trigger Property = "IsKeyboardFocused" Value = "true">
<Setter TargetName = "Border" Property = "BorderBrush" Value = "{StaticResource DefaultedBorderBrush}"/>
</Trigger>
</ControlTemplate. Triggers>

</ControlTemplate>
</Setter. Value>
</Setter>
</Style>

This is the code that really affects the widget's appearance. Because no specific x: Key is specified during Style definition, all buttons are affected. As you can see, on the FocusVisualStyle attribute (the type is Style), We reference the previously defined Style: ButtonFocusVisual as a resource. Next, define the Template and define a name for its child element Border. Then there is the ControlTemplate trigger. When the IsKeyboardFocused attribute meets the condition, we change the BorderBrush of Border (note that this Border is not a type but an object) to another static resource. In combination with the previous Post, it is not difficult to understand.

Finally, we will find an interesting problem: Although ControlTempalte is used in this example, the project name is SimpleStyle. We can also see from this: style and Template can be used together to implement a wide range of custom functions.