WPF中控件模板和数据模板的区别

Question

WPF 中的ControlTemplate和DataTemplate有什么区别？

Answer 1

通常，控件是为了它自己而呈现的，并不反映基础数据。 例如，一个Button不会绑定到一个业务对象——它在那里纯粹是为了可以点击它。 但是，通常会出现ContentControl或ListBox ，以便它们可以为用户呈现数据。

因此， DataTemplate用于为底层数据提供可视化结构，而ControlTemplate与底层数据无关，只是为控件本身提供可视化布局。

ControlTemplate通常只包含TemplateBinding表达式，绑定回控件本身的属性，而DataTemplate将包含标准 Binding 表达式，绑定到其DataContext （业务/域对象或视图模型）的属性。

Answer 2

基本上， ControlTemplate描述了如何显示控件，而DataTemplate描述了如何显示数据。

例如：

Label是一个控件，将包含一个ControlTemplate ，它表示Label应该使用一些内容（ DataTemplate或另一个控件）周围的Border来显示。

Customer类是 Data，将使用DataTemplate显示，它可以说将Customer类型显示为StackPanel其中包含两个TextBlocks一个显示名称，另一个显示电话号码。 注意到所有类都使用DataTemplates显示可能会有所帮助，您通常只使用默认模板，它是一个TextBlock ，其Text属性设置为对象的ToString方法的结果。

Answer 3

Troels Larsen在MSDN 论坛上有很好的解释

<Window x:Class="WpfApplication7.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <DataTemplate x:Key="ButtonContentTemplate"> <StackPanel Orientation="Horizontal"> <Grid Height="8" Width="8"> <Path HorizontalAlignment="Stretch" Margin="0,0,1.8,1.8" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" Data="M0.5,5.7 L0.5,0.5 L5.7,0.5"/> <Path HorizontalAlignment="Stretch" Margin="2,3,0,0" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" Data="M3.2,7.5 L7.5,7.5 L7.5,3.5"/> <Path HorizontalAlignment="Stretch" Margin="1.2,1.4,0.7,0.7" VerticalAlignment="Stretch" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M2.5,2.5 L7.5,7.5"/> <Path HorizontalAlignment="Stretch" Margin="1.7,2.0,1,1" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" Data="M3,7.5 L7.5,7.5 L7.5,3.5"/> <Path HorizontalAlignment="Stretch" Margin="1,1,1,1" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" Data="M1.5,6.5 L1.5,1 L6.5,1.5"/> </Grid> <ContentPresenter Content="{Binding}"/> </StackPanel> </DataTemplate> <ControlTemplate TargetType="Button" x:Key="ButtonControlTemplate"> <Grid> <Ellipse Fill="{TemplateBinding Background}"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Window.Resources> <StackPanel> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="1"/> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="2"/> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="3"/> </StackPanel> </Window>

（模板公然从http://msdn.microsoft.com/en-us/library/system.windows.controls.controltemplate.aspx和http://msdn.microsoft.com/en-us/library/system.windows .controls.contentcontrol.contenttemplate%28VS.95%29.aspx ）

无论如何，ControlTemplate 决定按钮本身的外观，而 ContentTemplate 决定按钮的内容的外观。 因此，您可以将内容绑定到其中一个数据类，并让它以您想要的方式呈现。

Answer 4

ControlTemplate ：代表控件样式。

DataTemplate ：表示数据样式（您希望如何显示您的数据）。

所有控件都使用您可以通过模板属性覆盖的默认控件模板。

例如
Button模板是一个控件模板。 Button内容模板是一个数据模板

<Button   VerticalAlignment="Top" >
    <Button.Template>
        <ControlTemplate >
            <Grid>
                <Rectangle Fill="Blue" RadiusX="20" RadiusY="20"/>
                <Ellipse Fill="Red" />
                <ContentPresenter Content="{Binding}">
                    <ContentPresenter.ContentTemplate>
                        <DataTemplate>
                        <StackPanel Orientation="Horizontal" Height="50">
                            <TextBlock Text="Name" Margin="5"/>
                                <TextBox Text="{Binding UserName, Mode=TwoWay}" Margin="5" Width="100"/>
                            <Button Content="Show Name" Click="OnClickShowName" />
                        </StackPanel>
                    </DataTemplate>
                    </ContentPresenter.ContentTemplate>
                </ContentPresenter>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

public String UserName
{
    get { return userName; }
    set
    {
        userName = value;
        this.NotifyPropertyChanged("UserName");
    }
}

Answer 5

ControlTemplate - 改变元素的外观。 例如Button可以包含图像和文本

DataTemplate - 使用元素表示底层数据。

Answer 6

ControlTemplate定义视觉外观， DataTemplate替换数据项的视觉外观。

示例：我想显示一个从矩形到圆形的按钮 => 控件模板。

如果您有复杂的控件对象，它只调用并显示ToString() ，使用DataTemplate您可以获得各种成员并显示和更改数据对象的值。

Answer 7

以上所有答案都很好，但有一个关键的区别被遗漏了。 这有助于更好地决定何时使用什么。 它是ItemTemplate属性：

• DataTemplate 用于为您提供 ItemTemplate 属性的元素，以根据您提供的选择器根据绑定数据使用您之前定义的DataTemplate替换其项目的内容。

• 但是，如果您的控件没有为您提供这种奢侈，那么您仍然可以使用ContentView来显示来自预定义ControlTemplate内容。 有趣的是，您可以在运行时更改ContentView的ControlTemplate属性。 需要注意的另一件事是，与具有ItemTemplate属性的控件不同，您不能为此 (ContentView) 控件设置TemplateSelector 。 但是，您仍然可以创建触发器来在运行时更改ControlTemplate 。