模板之间的区别

Question

这些模板在 WPF 中有何不同？

• ControlTemplate（控件模板）：用于自定义控件的外观和行为。
• DataTemplate（数据模板）：用于定义数据如何呈现为 UI 元素。
• HierarchicalDataTemplate（分层数据模板）：用于呈现具有层次结构的数据，如树状结构或菜单。
• ItemTemplate（项模板）：用于定义列表或集合中每个项的外观。

- user1688603

Answer 1

控件模板

控件模板指定了控件的视觉结构和行为。您可以通过提供新的ControlTemplate来自定义控件的外观。创建ControlTemplate时，您可以替换现有控件的外观而不改变其功能。例如，您可以使应用程序中的按钮变为圆形而不是默认的正方形形状，但该按钮仍将触发Click事件。

ControlTemplate的示例：

创建一个按钮

<Button Style="{StaticResource newTemplate}" 
        Background="Navy" 
        Foreground="White" 
        FontSize="14"
        Content="Button1"/>

<Style TargetType="Button" x:Key="newTemplate"> 
      <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="RootElement">
                <!--Create the SolidColorBrush for the Background 
                as an object elemment and give it a name so 
                it can be referred to elsewhere in the control template.-->
                    <Border.Background>
                        <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
                    </Border.Background>
                    <!--Create a border that has a different color by adding smaller grid.
                    The background of this grid is specificied by the button's Background
                    property.-->
                    <Grid Margin="4" Background="{TemplateBinding Background}">
                    <!--Use a ContentPresenter to display the Content of
                    the Button.-->
                        <ContentPresenter
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="4,5,4,4" />
                    </Grid>
                </Border>
            </ControlTemplate>      
        </Setter.Value>
    </Setter>
</Style>

关于 ControlTemplate 的更多信息。

数据模板

数据模板与控件模板类似，它们为您提供了一个非常灵活和强大的解决方案，用于替换列表框、组合框或列表视图等控件中数据项的可视外观。WPF 控件具有内置功能，支持自定义数据呈现。

数据模板的一个示例：

<!-- Without DataTemplate -->
<ListBox ItemsSource="{Binding}" /> 

<!-- With DataTemplate -->
<ListBox ItemsSource="{Binding}" BorderBrush="Transparent" 
         Grid.IsSharedSizeScope="True"
         HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Key" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Name}" FontWeight="Bold"  />
                <TextBox Grid.Column="1" Text="{Binding Value }" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

更多关于数据模板和触发器

项模板

使用ItemTemplate指定数据对象的可视化方式。如果你的ItemsControl绑定到一个集合对象，并且没有使用DataTemplate提供特定的显示指令，每个项的UI将是底层集合中每个对象的字符串表示。

项模板的例子如下：

<ListBox Margin="10" Name="lvDataBinding">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <WrapPanel>
                <TextBlock Text="Name: " />
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text=", " />
                <TextBlock Text="Age: " />
                <TextBlock Text="{Binding Age}" FontWeight="Bold" />
                <TextBlock Text=" (" />
                <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                <TextBlock Text=")" />
            </WrapPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

当你在ItemsControl上设置ItemTemplate时，UI会按照以下方式生成（以ListBox为例）：

1. 在内容生成期间，ItemsPanel会请求ItemContainerGenerator为每个数据项创建一个容器。对于ListBox，容器是一个ListBoxItem。生成器回调ItemsControl来准备容器。

2. 准备过程的一部分涉及将ListBox的ItemTemplate复制为ListBoxItem的ContentTemplate。

3. 与所有ContentControl类型类似，ListBoxItem的ControlTemplate包含一个ContentPresenter。当应用模板时，它会创建一个ContentPresenter，其ContentTemplate绑定到ListBoxItem的ContentTemplate。

4. 最后，ContentPresenter将该ContentTemplate应用于自身，从而创建UI。

如果定义了多个DataTemplate，并且想要提供逻辑来以编程方式选择和应用DataTemplate，则使用ItemTemplateSelector属性。

ItemsControl提供了极大的灵活性，可以提供许多样式和模板属性以进行视觉定制。使用ItemContainerStyle属性或ItemContainerStyleSelector属性设置样式以影响包含数据项的元素的外观。例如，对于ListBox，生成的容器是ListBoxItem控件；对于ComboBox，它们是ComboBoxItem控件。要影响项目的布局，请使用ItemsPanel属性。如果在控件上使用分组，则可以使用GroupStyle或GroupStyleSelector属性。

有关更多信息，请参见数据模板概述。

- Mohit S

Answer 2

1. ControlTemplaes 定义了控件的“外观”和“行为”。默认情况下，按钮是矩形的，ListBox 的背景是白色的。这些都由 Control 的 ControlTemple 定义。

2. DataTemplae 帮助控件布局其所持有的数据。如果将用户列表添加到 ListBox 中，并希望在 UserPassword 之前显示 UserName，则可以在 DataTemples 中定义此内容。DataTemples 赋值给 ListBox 的 ItemTemplate (4) 属性。

3. HierarchalDataTemplte 与 DataTemples 相同，但处理分层数据源。通常与 TreeView 控件一起使用。

- Faisal