WPF教程（十一）模板入门一

最新推荐文章于 2024-06-05 09:41:49 发布

yangwenxue1989

最新推荐文章于 2024-06-05 09:41:49 发布

阅读量1.1k

点赞数 1

分类专栏： WPF 文章标签： DataTemplate ControlTemplate ItemsPanelTemplate

WPF 专栏收录该内容

14 篇文章 35 订阅

订阅专栏

在前面一篇我们粗略说了Style，如果要自定义一个个性十足的控件，仅仅依靠样式和行为是不行的，他们只能通过控件的既有属性来简单改变外观，还需要有ControlTemplate来彻底定制，这是改变Control的呈现，也可以通过DataTemplate来改变Data的呈现，对于ItemsControl，还可以通过ItemsPanelTemplate来改变Items容器的呈现。

从上段文字可以总结出，模板大概分为3种：(1)ControlTemplate；(2)DataTemplate；(3)ItemsControl，第一种我们经常能用到，比较常见，现在我们来一一介绍：

（一）ControlTemplate

控件模板可以将自定义模板应用到某一特定类型的所有控件，主要有两个重要属性：VisualTree内容属性和Triggers触发器。所谓VisualTree(视觉树),就是呈现我们所画的控件。Triggers可以对我们的视觉树上的元素进行一些变化，一般用于单内容控件。

<Window.Resources>
    <ControlTemplate TargetType="{x:Type Button}" x:Key="ButtonControlTemplate">
        <Grid>
            <Ellipse Width="100" Height="100" >
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Cyan" />
                        <GradientStop Offset="1" Color="LightCyan" />
                    </LinearGradientBrush>
                </Ellipse.Fill>                    
            </Ellipse>
            <Ellipse Width="80" Height="80">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Yellow" />
                        <GradientStop Offset="1" Color="Transparent" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Button Content="Hi,WPF" Template="{StaticResource ButtonControlTemplate}" Click="Button_Click"/>
</Grid>

上面代码自定义了一个Button控件模板，为什么能替代默认模板？我们就要"解剖"Button来了解其内部结构，VS2013自带的Expression Blend 5就具有这样的解剖功能，让我们来看看模板源码：

<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

可以看出，其模板是由一个Border里面放了一个ContentPresenter构成的，然后是触发器定义的默认行为，相对比较简单，现在已经被我们新定义的替代了，因为新模板里没写Trigger，所以没有像默认的那种触发效果。这个Button内部比较简单，就一个ControlTemplate，像ScrollBar等控件，内部是相当复杂的。

（二）DataTemplate

数据模板，在WPF中，决定数据外观的是DataTemplate，即DataTemplate是数据内容的表现形式，一条数据显示成什么样子，是简单的文本还是直观的图形，就是由DataTemplate决定的。

内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。下面通过设计继承ItemsControl类控件ListBox及ComboBox控件的DataTemplate，把单调的数据显示成直观的柱状图。

<Window.Resources>
    <DataTemplate x:Key="MyItem">
        <StackPanel Orientation="Horizontal">
            <Grid>
                <Rectangle Stroke="Yellow" Fill="Orange" Width="{Binding Price}"></Rectangle>
                <TextBlock Text="{Binding Year}"></TextBlock>
            </Grid>
            <TextBlock Text="{Binding Price}"></TextBlock>
        </StackPanel>
    </DataTemplate>
</Window.Resources>
<Grid>
    <ListBox x:Name="listBox1" ItemTemplate="{StaticResource MyItem}"/>
    <ComboBox x:Name="comboBox1" ItemTemplate="{StaticResource MyItem}"/> 
</Grid>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        List<Unit> units = new List<Unit>();
        Unit unit1 = new Unit() { Year = "2001", Price = 100 };
        Unit unit2 = new Unit() { Year = "2002", Price = 120 };
        Unit unit3 = new Unit() { Year = "2003", Price = 140 };
        Unit unit4 = new Unit() { Year = "2004", Price = 160 };
        Unit unit5 = new Unit() { Year = "2005", Price = 180 };
        units.Add(unit1);
        units.Add(unit2);
        units.Add(unit3);
        units.Add(unit4);
        units.Add(unit5);
        listBox1.ItemsSource = units;
        comboBox1.ItemsSource = units;
    }
}
class Unit
{
    public string Year { get; set; }
    public int Price { get; set; }
}

也可以把某个类型作用在DataTemplate上，方法是设置DataTemplate的DataType属性。上面的例子也可以通过这种方式实现：

//Attention
xmlns:local="clr-namespace:DataTemplate"
xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
<Window.Resources>
    <DataTemplate DataType="{x:Type local:MyUnit}">
        <StackPanel Orientation="Horizontal">
            <Grid>
                <Rectangle Stroke="Yellow" Fill="Orange" Width="{Binding Price}"></Rectangle>
                <TextBlock Text="{Binding Year}"></TextBlock>
            </Grid>
            <TextBlock Text="{Binding Price}"></TextBlock>
        </StackPanel>
    </DataTemplate>
    <c:ArrayList x:Key="ds">
        <local:MyUnit Year = "2001" Price="100"/>
        <local:MyUnit Year = "2002" Price="120"/>
        <local:MyUnit Year = "2003" Price="140"/>
        <local:MyUnit Year = "2004" Price="160"/>
        <local:MyUnit Year = "2005" Price="180"/>
    </c:ArrayList>
</Window.Resources>
<Grid>  
    <StackPanel>
        <ListBox x:Name="listBox1" ItemsSource="{StaticResource ds}"></ListBox>
        <ComboBox x:Name="comboBox1" ItemsSource="{StaticResource ds}"></ComboBox>
    </StackPanel>
</Grid>

public class MyUnit
{
    public string Year { get; set; }
    public int Price { get; set; }
}

上面例子示范的是然继承自ItemsControl类的控件的DataTemplate，下面就写个ContentTemplate支持的数据模板：

<Window.Resources>
    <DataTemplate x:Key="roundbutton">
        <Border CornerRadius="8" Width="120" Background="Yellow" Opacity="0.8">
            <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center"/>
        </Border>
    </DataTemplate>
</Window.Resources>
<Grid>
    <StackPanel x:Name="stackpanel">
        <Button Width="200" Height="150" Margin="20" ContentTemplate="{StaticResource roundbutton}" Content="OK"/>
    </StackPanel>
</Grid>

（三）ItemsPanelTemplate

ItemsPanelTemplate在MSDN的解释是：ItemsPanelTemplate 指定用于项的布局的面板。 GroupStyle 具有一个类型为 ItemsPanelTemplate 的 Panel属性。 ItemsControl 类型具有一个类型为ItemsPanelTemplate 的 ItemsPanel 属性。ItemsPanelTemplate用于指定项的布局。下面，我们先看个ItemsControl类型的例子，请注意比较。

<Grid>
    <ListBox HorizontalAlignment="Left" Height="70" Margin="47,0,0,0" VerticalAlignment="Top" Width="39">
        <system:String>abc</system:String>
        <system:String>def</system:String>
        <system:String>hij</system:String>
    </ListBox>
    <ListBox HorizontalAlignment="Left" Height="40" Margin="47,100,0,0" VerticalAlignment="Top" Width="100">
        <ListBox.Style>
            <Style TargetType="ListBox">
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.Style>
        <system:String>abc</system:String>
        <system:String>def</system:String>
        <system:String>hij</system:String>
    </ListBox>
</Grid>

总结

模板分为三大类：DataTemplate 数据外衣、ControlTemplate 控件外衣及ItemsPanelTemplate 项布局，这极大丰富了我们对各种样式的需求。上文粗略地按我的方式分3种，当然仁者见仁，很多博客也有不同的划分方法。考虑到篇幅，后续几章节，我会再细细介绍模板所需用到的其它知识点。

yangwenxue1989

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WPF教程（十一）模板入门一

在前面一篇我们粗略说了Style，如果要自定义一个个性十足的控件，仅仅依靠样式和行为是不行的，他们只能通过控件的既有属性来简单改变外观，还需要有ControlTemplate来彻底定制，这是改变Control的呈现，也可以通过DataTemplate来改变Data的呈现，对于ItemsControl，还可以通过ItemsPanelTemplate来改变Items容器的呈现。从上段文字可以总结出...
复制链接

扫一扫