关于模板的学习笔记

以前做Winform开发的时候，如果要修改现有的控件，只能是通过继承再改写的办法。不仅做起来慢，而且感觉做出来的东西差强人意。很多自己想要实现的东西实现不了。通过WPF的模板，可以很方便的实现很炫的控件效果。

    模板可以直接写在控件里，也可以放到XAML文件的Resource里，还可以放单独的资源字典里。

    WPF的Template分为两大类：

    1、ControlTemplate:控件模板，可以设置控件的外观。

        ItemsControl控件具有一个名为ItemsPanel的属性，它的数据类型为ItemPanelTemplate。ItemPanelTemplate也是一种控件Template。它的作用就是让程序员有机会控制  ItemControl的条目容器。例如想把ListBox的条目横向排列就可以像下面这样写：

<ListBox>
    <ListBox.ItemsPanel>
           <ItemsPanelTemplate>
                 <StackPanel Orientation="Horizontal"/>
           </ItemsPanelTemplate>
     </ListBox.ItemsPanel>
</ListBox>

 

    2 、DataTemplate：数据模板，也就是数据的载体，即数据的表现形式。

         DataTemplate常用的地方有3处：

         （1）ContentControl的ContentTemplate属性。

         （2）ItemsControl的ItemTemplate属性。

         （3）GridVeiwColumn的CellTemplate属性。

    凡是Template，最终还是要作用在控件上，这个控件就是Template的目标控件，DataTemplate的目标控件是：ContentPresenter。

ControlTemplate和DataTemplate的关系图如下：

    由ControlTemplate生成的控件树，树根就是ControlTemplate的目标控件。由DataTemplate生成的控件树，树要是ContentPresenter。因为ContentPresenter控件是ControlTemplate控件树上的一个节点，所以DataTemplate控件树是ControlTemplate控件树的一棵子树。

以下控件是用CheckBox改的，代码是从MSDN上抄的：

代码如下：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"
    x:Class="BigCheckBox.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <CheckBox Content="" Margin="44.84,31.308,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Height="99.384" VerticalAlignment="Top" Width="163.32" >
            <CheckBox.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="-0.189"/>
                    <TranslateTransform/>
                </TransformGroup>
            </CheckBox.RenderTransform>
            <CheckBox.Background>
                <ImageBrush ImageSource="日产蓝鸟.jpg"/>
            </CheckBox.Background>
            <CheckBox.Template>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        CornerRadius="5" Margin="10">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="5" Color="Black" BlurRadius="10"/>
                        </Border.Effect>
                        <Grid>
                            <ContentPresenter 
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                            <Border>
                                <Border.Background>
                                    <VisualBrush Opacity="0.5">
                                        <VisualBrush.Visual>
                                            <Path x:Name="path"
                                                Data="M 0 0 L 10 10 M 10 0 L 0 10"
                                                Stroke="Red" 
                                                StrokeStartLineCap="Round"
                                                StrokeEndLineCap="Round"
                                                StrokeLineJoin="Round" />
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Border.Background>
                            </Border>

                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="path"
                                Property="Data"
                                Value="M0 5 L3 10 10 0"/>
                            <Setter TargetName="path"
                                Property="Stroke"
                                Value="Green"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </CheckBox.Template>
        </CheckBox>
    </Grid>
</Window>