Template (ControlTemplate and DataTemplate) in WPF)

Template in WPF is a particularly important concept. For those who are engaged in UI development, being familiar with ControlTemplate and DataTemplate is a required skill, otherwise, you can only create a cainiao Drag Control.

The following describes the concepts and usage of these two types of templates.

1. ControlTemplate is what we often call a control template. It is mainly used to change the appearance of the control. For example, if you want to modify a Button, the shape of the Button is circular, the background color is changed, and the animation effect is customized.

The following is an example of its application. A simple example is to put the tab page of TabControl below, so we can modify the style of TabControl.

[Csharp]
<Style TargetType = "{x: Type TabControl}" x: Key = "ButtomTab">
<Setter Property = "Template">
<Setter. Value>
<ControlTemplate TargetType = "{x: Type TabControl}">
<Grid>
<Grid. RowDefinitions>
<RowDefinition Height = "*"/>
<RowDefinition Height = "Auto"/>
</Grid. RowDefinitions>
<TabPanel Grid. Row = "1" Panel. ZIndex = "1" Margin = "0" IsItemsHost = "True" Background = "Transparent"/>
<Border Grid. Row = "0" Background = "White" BorderThickness = "1 0 1 0" CornerRadius = "0">
<ContentPresenter ContentSource = "SelectedContent"/>
</Border>
</Grid>
</ControlTemplate>
</Setter. Value>
</Setter>
</Style>

From the code, we can see that ControlTemplate contains a Grid, and then you can layout its TabPanel location. We set the attribute of TabPanel to Grid. row = "1" so that the TabPanel is placed in the content
Under ContentPresenter, we can get a tabcontrol control on the tab page below. It's easy enough.

How to set the style, and what is the controltemplate of each control? Let's take a look at this article. With its wpf style, you can use it.

Of course, a very important concept in controltemplate is trigger. I will introduce the use of tirgger in my blog later.

2. DataTemplate is what we call a data template. It is mainly used for data presentation, such as what data is stored in your list control and how to typeset the data, whether it is horizontal or vertical. Most controls in the itemscontrol and treeview classes are used to bind data. They only present data content without affecting the appearance.

A simple example of DataTemplate is as follows:

[Csharp]
<ItemsControl x: Name = "ic_PowerPort" AlternationCount = "2">
<ItemsControl. ItemTemplate>
<DataTemplate>
<Border Margin = "1" x: Name = "back" Height = "50">
<ToggleButton HorizontalAlignment = "Stretch" MouseDoubleClick = "ToggleButton_Click">
<DockPanel>
<TextBlock Text = "{Binding Name}" ToolTip = "{Binding Name}" Margin = "10 0 0 0" verticalignment = "Center" TextTrimming = "WordEllipsis"/>
<Image x: name = "_ img" Width = "18" Height = "18" Margin = "10 0" MouseLeftButtonDown = "DelPowerPort_Click" HorizontalAlignment = "Right" Source = "/Vdc3D. coms. DModelEditor; component/Images/del.png "/>
</DockPanel>
 
</ToggleButton>
</Border>
</ItemsControl. ItemTemplate>
</ItemsControl>
From the code above, we can see that the given ItemsControl control is used to display a list, which is bound to the Name attribute of an object. There is also an Image for deletion, it can be seen that the main function of DataTemplate is to present data when binding data.

In particular, the TreeView Data Binding requires a HierarchicalDataTemplate, which is a cascading Data Binding template.

[Csharp]
<TreeView Name = "_ tree" Margin = "0" BorderThickness = "0" verticalignment = "Stretch" Background = "Transparent" ItemsSource = "{Binding Children}">
<TreeView. ItemTemplate>
<HierarchicalDataTemplate ItemsSource = "{Binding Children}">
<Border CornerRadius = "0" Margin = "1" x: Name = "back" MinWidth = "70"
Background = "Transparent" DataContext = "{Binding}" PreviewMouseMove = "TreeItem_PreviewMouseMove">
<StackPanel Orientation = "Horizontal" Margin = "2">
<Image x: Name = "BGimage" Source = "/Vdc3D. Coms. DModelEditor; component/Images/item.png" Height = "15" Width = "15"/>
<TextBlock Text = "{Binding ShowText}" Margin = "2 0"/>
</StackPanel>
</Border>
</HierarchicalDataTemplate>
</TreeView. ItemTemplate>
</TreeView>

In this way, we can bind data to a treeview. The UI will cascade the Children attribute of the bound data object.
So far, the two types of templates in wpf have been introduced. If you have any questions or are incorrect, you can leave a message.