学步园

（参考自 ding.li）

WPF中有三大模板ControlTemplate,DataTemplate，ItemsPanelTemplate。

ControlTemplate和ItemsPanelTemplate是控件模板（用来描述控件本身的样式）

 

ControlTemplate（DataTemplate是数据模板（描述控件内部数据的样式）

ControlTemplate:控件模板主要有两个重要属性：VisualTree内容属性和Triggers触发器。所谓VisualTree(视觉树),就是呈现我们所画的控件。Triggers可以对我们的视觉树上的元素进行一些变化。一般用于单内容控件。、

• 定义模板（在任何UserControl或者Resource下）：

<Style TargetType="Button">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                            <Ellipse Width="100" Height="100">

                                <Ellipse.Fill>

                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                        <GradientStop Offset="0" Color="blue"/>

                                        <GradientStop Offset="1" Color="LightBlue"/>

                                    </LinearGradientBrush>

                                </Ellipse.Fill>

                            </Ellipse>

                            <Ellipse Width="80" Height="80">

                                <Ellipse.Fill>

                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                        <GradientStop Offset="0" Color="White"/>

                                        <GradientStop Offset="1" Color="Transparent"/>

                                    </LinearGradientBrush>

                                </Ellipse.Fill>

                            </Ellipse>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

• 在MainWindows下call 模板

  <Button Content="Hello WPF"/>

  结果为：

   

  ControlTemplate之子 ContentControl和ContentPresenter

  我们在ControlTemplate中画了两个椭圆，应用于所有的Button按钮（因为没有加x:key给模板），但我们Button中有Content属性(内容为 Hello WPF)，却没有显示出来。因为这里用ControlTemplate重写了Button的样式，所以我们也要在ControlTemplate中增加 ContentControl。通过ContentControl中的Content来绑定父容器的Content属性。

 

• 为ContentControl属性赋值

<Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="100" Height="100">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="blue"/>
                                        <GradientStop Offset="1" Color="LightBlue"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Width="80" Height="80">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="White"/>
                                        <GradientStop Offset="1" Color="Transparent"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentControl VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

这下内容出来了

 

我们来看一下，ContentControl继承于Control的，用MSDN的话是：表示包含单项内容的控件、ContentControl 可以包含任何类型的公共语言运行库对象。如下ContentControl类图。

为了提高性能,我们可以用一个ControlPresenter来代替ContentControl，效果还是一样，那他们有什么区别呢？

来看下ControlPresenter这个类，它继承于FreameworkElement，如下图：

 

ControlPresenter 通常叫做内容占位符。所以我们可以看到

<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>来代替<ContentControl VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/> 。这里少了Content绑定父容器，因为ControlPresenter有个隐式的Content="{TemplateBinding Content}"。

从他们的基类可以看出，ContentControl比ContentPresenter大多了。

其实ControlPresenter是一个原始的构建块，而ContentControl是一个带控件模板的成熟控件(里面包含ControlPresenter)。

一般用ControlPresenter。

 

ControlTemplate的VisualTree我们讲过了，下面看下他的trigger如何运用。

 

我们在原来的代码中增加IsMouseOver事件

 

<ControlTemplate.Triggers>

             <Trigger Property="IsMouseOver" Value="true">

                   <Setter TargetName="ellipse1" Property="Fill" Value="Red"/>

             </Trigger>

 </ControlTemplate.Triggers>

 

当我们把鼠标移上去的时候就会变成如下图所示：

 

 

发挥我们的想象力，我们可以根据ControlTemplate做更多的特效。如下

 

<Style TargetType="CheckBox">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="CheckBox">

                        <DockPanel>

                            <ContentPresenter DockPanel.Dock="Left" VerticalAlignment="Center" />

                            <Grid>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="30"/>

                                    <ColumnDefinition Width="30"/>

                                </Grid.ColumnDefinitions>

                                <Rectangle Grid.Column="0" Grid.ColumnSpan="2" Fill="Gray"/>

                                <TextBlock x:Name="txtBox"  Foreground="White" />

                            </Grid>

                        </DockPanel>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsChecked" Value="True">

                                <Setter TargetName="txtBox" Property="Grid.Column" Value="1"/>

                                <Setter TargetName="txtBox" Property="Text" Value="On"/>

                                <Setter TargetName="txtBox" Property="Background" Value="LightBlue"/>

                            </Trigger>

                            <Trigger Property="IsChecked" Value="{x:Null}">

                                <Setter TargetName="txtBox" Property="Grid.Column" Value="0"/>

                            </Trigger>

                            <Trigger Property="IsChecked" Value="false">

                                <Setter TargetName="txtBox" Property="Grid.Column" Value="0"/>

                                <Setter TargetName="txtBox" Property="Text" Value="OFF"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

<Grid>

        <CheckBox Width="100" Height="30" Content="Click Me"/>

 </Grid>

 

 

效果图：点击之前点击之后