零基础学通Silverlight47：控件模板

控件可以包含一幅图像、一段视频、一个动画，甚至一个文本框。此外还有风格、模板以及触发器等，这些功能进一步加强了控件的扩展能力。开发人员还可以修改已经存在的控件的外观，以增强它的可视化功能，而且还可以保留用户已经熟悉的控件预期行为，还可以根据特定数据输入和检查的需要，为应用程序定制自定义控件。提供的用于扩展和创建控件的基础类，为设计控件的可视化外观提供了巨大的灵活性。

一个新的控件需要先选择一个基类。可以基于许多基类来创建自定义控件，包括Control、UserControl等，当创建一个新控件时，可根据自定义控件的定制和灵活性来选择所要继承的基类，可能还需要考虑以下问题：

（1）自定义控件是否由已存在的控件组成?

（2）自定义控件需要定制哪些可视化外观？

（3）自定义控件需要提供什么行为或功能?

作用UserControl作为基类是创建一个新控件最简单的方法，自定义控件由一引起标准控件组合在一起，来完成一个特定的用户接口功能，自定义控件可以为单个元素应用样式，并使其处理一些特定的事件，或者为控件引发特定的自定义事件。

模板的方式与样式非常类似，也可作为资源，并通过Setter来定义模板的内容。要定义模板，需要设置Setter的Property为Template，并使用<Setter.Value>来定义ControlTemplate来指定模板的目标类型。

模板还能保持控件的众多功能，并且可直接定义鼠标指针移入、移出以及单击的统一的变化效果。每个模板必须有一个根元素，为了方便容纳多个 UI 元素，根据元素通常是 Panel 、 Grid 等

范例象棋棋子按钮

   项目 利用模板生成统一外观的立体棋子按扭。当鼠标单击时，外观都会有变化，如移到上面时增加阴影，单击棋子会改变效果，如图 7-1 。

图 7-1

（ 1 ）打开 Microsoft Expression Blend ，新建项目中，选择“ Silverlight Application ”。

（ 2 ）设置二个圆形，其中一个具有渐变效果作为棋的外形，另一个带来阴影立体效果，加上“车”字，模板的外观如图 7-2 ：

图 7-2

（ 3 ）将它们分成一组。选中二圆和字块后右健菜单中分成一个 Grid 组，如图图 7-3 。

                      图 7-3

对应的主要 XAML 如下：

<Grid x:Name="LayoutRoot" Background="White" Margin="56,37">

           <Grid Margin="126,96,0" HorizontalAlignment="Left" Width="108" Height="108" VerticalAlignment="Top">

                  <Ellipse stroke="Black" Margin="4,6,4,2" strokeThickness="0" Height="100" Width="100" Fill="#FFA 7A 1A 1"/>

                  <Ellipse stroke="Black" strokeThickness="0" Width="100" Height="100" VerticalAlignment="Top" Margin="2,0">

                         <Ellipse.Fill>

           <LinearGradientBrush EndPoint="0.795,0.998" StartPoint="0.227,-0.092">

                                       <GradientStop Color="#FF2CC017" Offset="0.032"/>

                                       <GradientStop Color="#FFC6E 2C 3" Offset="1"/>

                                </LinearGradientBrush>

                         </Ellipse.Fill>

                  </Ellipse>

           <TextBlock Margin="22,14,28,14" Text="马" textwrapping="Wrap" FontSize="66.667" FontWeight="Bold" Foreground="#FF 17181C " FontFamily="Arial"/>

           </Grid>

    </Grid>

</UserControl>

（ 4 ）将所绘制图案转换成模板。选择上面的 Grid 容器，即变成绘制图案的最外层对象，然后从“工具”菜单中选择“生成按扭”命令，见图 7-4 。

图 7-4

 

（ 5 ）出现“构成控件”对话框，选择 Button ，位置定义在资源字典中，可新建一个字典文件中，见图图 7-5 。

                                              图 7-5

生成了一个字典文件，代码如下：

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="ButtonStyle1" targettype="Button">

           <Setter Property="Template">

                  <Setter.Value>

                         <ControlTemplate targettype="Button">

                                <Grid>

                                       <visualstatemanager.VisualStateGroups>

                                              <VisualStateGroup x:Name="Focusstates">

                                                     <VisualState x:Name="Focused"/>

                                                     <VisualState x:Name="Unfocused"/>

                                              </VisualStateGroup>

                                              <VisualStateGroup x:Name="CommonStates">

                                                     <VisualState x:Name=" normal @H_404_790@"/>

                                                     <VisualState x:Name="MouSEOver"/>

                                                     <VisualState x:Name="pressed"/>

                                                     <VisualState x:Name="disabled"/>

                                              </VisualStateGroup>

                                       </visualstatemanager.VisualStateGroups>

                                       <Ellipse stroke="Black" Margin="4,2" strokeThickness="0" Height="100" Width="100" Fill="#FFA 7A 1A 1"/>

                                       <Ellipse stroke="Black" strokeThickness="0" Width="100" Height="100" VerticalAlignment="Top" Margin="2,0">

                                              <Ellipse.Fill>

    <LinearGradientBrush EndPoint="0.795,-0.092">

                         <GradientStop Color="#FF2CC017" Offset="0.032"/>

                                <GradientStop Color="#FFC6E 2C 3" Offset="1"/>

                                                     </LinearGradientBrush>

                                              </Ellipse.Fill>

                                       </Ellipse>

                                       <ContentPresenter Margin="22,14"/>

                                </Grid>

                         </ControlTemplate>

                  </Setter.Value>

           </Setter>

           <Setter Property="FontFamily" Value="Arial"/>

           <Setter Property="FontWeight" Value="Bold"/>

           <Setter Property="FontSize" Value="66.667"/>

           <Setter Property="Foreground" Value="#FF 17181C "/>

    </Style>

</ResourceDictionary>

 

（ 6 ）现已创建了一个模板，而且也创建了一个棋子按钮，并已经将模板应用于此棋子按钮了，打开 MainPage.xaml 文件，可见 XAML 文件内容如下：

    <Grid x:Name="LayoutRoot" Background="White" Margin="56,37">

           <Button Height="108" HorizontalAlignment="Left" Margin="126,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top" Width="108" Content="马"/>

    </Grid>

</UserControl>

（ 7 ）继续编辑模板，使其具备鼠标单击的外观变换效果，双击字典文件，进入到模板编辑状态，也可从所创建的棋子控件，从级联菜单中按照顺序选择“编辑控件”、“编辑模板“、“编辑当前模板“进入，如图 7-6 。

图 7-6

 

（ 8 ）定义鼠标单击的外观变换效果，在左侧“状态”面板的 CommonStates 区域中选择 pressed 状态，接着选择 Ellipse 的标志 ( 棋子最外层 ) ，如图图 7-7 。

图 7-7

（ 9 ）使用渐变工具，修改渐变的方向，转动约 180 度。颜色变为从淡到深的渐变，与原来的相反，如图 7-8 。

 

            

如图 7-8

（ 10 ）继续编辑模板，选择 MouSEOver 状态，背景色设为绿色到红色的渐变， （ 11 ）模板已修改完成，保存，可安 F5 运行试看点击的效果。打开对应资源文件，可看到对应的 XAML 代码：

<VisualState x:Name="MouSEOver">

    <Storyboard>

<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

                  <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFE 85C 26"/>

    </ColorAnimationUsingKeyFrames>

           </Storyboard>

    </VisualState>

<VisualState x:Name="pressed">

<Storyboard>

           <PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)">

                  <EasingPointKeyFrame KeyTime="00:00:00" Value="0.88,0.944"/>

    </PointAnimationUsingKeyFrames>

                         <PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)">

           <EasingPointKeyFrame KeyTime="00:00:00" Value="0.142,-0.038"/>

    </PointAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

（ 12 ）在设计画面中的 MainPage.xaml 中，拖放方式创建更多的 Button 控件，如图 7-10 。

                          图 7-10

      

（ 12 ）要将模板应用于 Button 控件，单击画面右上角的“资源”选项卡，然后找到资源文件中的模板，将模板拖放至应用的 Button 控件上，并且选择 Style 选项。这样一个个方形按钮变成了统一样式的棋子，并调整修改文字、大小等，如图 7-11 。

图 7-11

（ 13 ） F5 运行，鼠标移移到“马”上，并点击“马”后可看到会有明显的变化效果。

更详细内容及源代码下载：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1