UWP入门（五）--控件模板

原文:UWP入门（五）--控件模板

通过在 XAML 框架中创建控件模板，你可以自定义控件的可视结构和可视行为（eg：勾选框的三种状态）。控件有多个属性，如 Background、Foreground 以及 FontFamily，可以设置这些属性以指定控件外观的多个方面。但是可以通过设置这些属性所做的更改有限。你可以通过使用 ControlTemplate 类创建模板来指定其他自定义。我们在此处介绍如何创建 ControlTemplate 以自定义 CheckBox 控件的外观。

核心API

ControlTemplate 类
Control.Template 属性

1.自定义控件模板示例

在默认情况下，CheckBox 控件将其内容（字符串或 CheckBox 旁的对象）放在选择框的右侧，并使用复选标记来表示用户已选中 CheckBox。这些特性表示 CheckBox 的可视结构和可视行为。

下面是分别在 Unchecked、Checked 和 Indeterminate 状态下使用默认 ControlTemplate 的 CheckBox。

你可以通过为 CheckBox 创建 ControlTemplate 来更改这些特性。例如，如果你想要让复选框的内容显示在选择框下方，并且你想要用 X 来表示用户已选中复选框。你可以在 CheckBox 的 ControlTemplate 中指定这些特性

若要将自定义模板与控件一起使用，请将 ControlTemplate 分配给控件的 Template 属性。下面是使用称为 CheckBoxTemplate1 的 ControlTemplate 的 CheckBox

//ControlTemplate 分配给控件的 Template 属性

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

下面是在应用模板后，CheckBox 在 Unchecked、Checked 和 Indeterminate 状态下的外观

2.指定控件的可视结构

当你创建 ControlTemplate 时，结合 FrameworkElement 对象来生成一个单一的控件。 ControlTemplate 只能有一个 FrameworkElement 作为其根元素。该根元素通常包含其他 FrameworkElement 对象。这些对象的组合组成控件的可视结构

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">

    <Border BorderBrush="{TemplateBinding BorderBrush}"

            BorderThickness="{TemplateBinding BorderThickness}"

            Background="{TemplateBinding Background}">

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="25"/>

            </Grid.RowDefinitions>

            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"

                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"

                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"

                       UseLayoutRounding="False"/>

            <!-- Create an X to indicate that the CheckBox is selected. -->

            <Path x:Name="CheckGlyph"

                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"

                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"

                  FlowDirection="LeftToRight"

                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>

            <Ellipse x:Name="IndeterminateGlyph"

                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"

                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />

            <ContentPresenter x:Name="ContentPresenter"

                              ContentTemplate="{TemplateBinding ContentTemplate}"

                              Content="{TemplateBinding Content}"

                              Margin="{TemplateBinding Padding}" Grid.Row="1"

                              HorizontalAlignment="Center"

                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

        </Grid>

    </Border>

</ControlTemplate>

3.指定控件的可视行为

可视行为指定控件在确定状态下的外观。 CheckBox 控件具有 3 种复选状态：Checked、Unchecked 和 Indeterminate。 IsChecked 属性的值确定 CheckBox 的状态，其状态确定框中显示的内容。

下表列出了 IsChecked 的可能值、CheckBox 的相应状态，以及 CheckBox 的外观

使用 VisualState 对象可指定控件在某种状态下的外观。 VisualState 包含可更改 ControlTemplate 中元素外观的 Setter 或 Storyboard。当控件进入 VisualState.Name 属性指定的状态时，将应用 Setter 或 Storyboard 中的属性更改。 当控件退出该状态时，这些更改将会删除。你可以将 VisualState 对象添加到 VisualStateGroup 对象。还可以将 VisualStateGroup 对象添加到 VisualStateManager.VisualStateGroups 附加属性，这些对象在 ControlTemplate 的根 FrameworkElement 上设置。

以下 XAML 介绍在 Checked、Unchecked 和 Indeterminate 状态下的 VisualState 对象。该示例在 Border 上设置 VisualStateManager.VisualStateGroups 附加属性，它是 ControlTemplate 的根元素。 Checked VisualState 指定名为 CheckGlyph 的 Path（已在前面的示例中介绍）的 Opacity 为 1。 Indeterminate VisualState 指定名为 IndeterminateGlyph 的 Ellipse 的 Opacity 为 1。 Unchecked VisualState 没有 Setter 或 Storyboard，因此 CheckBox 将返回到其默认外观

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">

    <Border BorderBrush="{TemplateBinding BorderBrush}"

            BorderThickness="{TemplateBinding BorderThickness}"

            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="CheckStates">

                <VisualState x:Name="Checked">

                    <VisualState.Setters>

                        <Setter Target="CheckGlyph.Opacity" Value="1"/>

                    </VisualState.Setters>

                    <!-- This Storyboard is equivalent to the Setter. -->

                    <!--<Storyboard>

                        <DoubleAnimation Duration="0" To="1"

                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>

                    </Storyboard>-->

                </VisualState>

                <VisualState x:Name="Unchecked"/>

                <VisualState x:Name="Indeterminate">

                    <VisualState.Setters>

                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>

                    </VisualState.Setters>

                    <!-- This Storyboard is equivalent to the Setter. -->

                    <!--<Storyboard>

                        <DoubleAnimation Duration="0" To="1"

                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>

                    </Storyboard>-->

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="25"/>

            </Grid.RowDefinitions>

            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"

                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"

                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"

                       UseLayoutRounding="False"/>

            <!-- Create an X to indicate that the CheckBox is selected. -->

            <Path x:Name="CheckGlyph"

                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"

                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"

                  FlowDirection="LeftToRight"

                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>

            <Ellipse x:Name="IndeterminateGlyph"

                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"

                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />

            <ContentPresenter x:Name="ContentPresenter"

                              ContentTemplate="{TemplateBinding ContentTemplate}"

                              Content="{TemplateBinding Content}"

                              Margin="{TemplateBinding Padding}" Grid.Row="1"

                              HorizontalAlignment="Center"

                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

        </Grid>

    </Border>

</ControlTemplate>