关闭

UWP入门(五)--控件模板

413人阅读 评论(0) 收藏 举报
分类:

通过在 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 中元素外观的 SetterStoryboard。 当控件进入 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>

这里写图片描述

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

[UWP]了解模板化控件(4):TemplatePart

1. TemplatePart TemplatePart(部件)是指ControlTemplate中的命名元素。控件逻辑预期这些部分存在于ControlTemplate中,并且使用protect...
  • meimeizhuzhuhua
  • meimeizhuzhuhua
  • 2017-04-23 19:32
  • 124

【UWP通用应用开发】应用布局、基本导航

简单示例看页面布局和导航首先按照上一篇博客中的顺序来新建一个项目。新建好之后就点开MainPage.xaml开始敲代码了。 <RowDefinition He...
  • NoMasp
  • NoMasp
  • 2015-12-10 17:41
  • 4370

UWP入门(一) -- 先写几个简单控件简单熟悉下(别看这个)

1. MainPage.xmal
  • u011033906
  • u011033906
  • 2017-03-20 15:23
  • 1513

UWP入门(八)--几个简单的控件

每天看几个,要不聊几天我就可以看完啦,加油!看效果1. CheckBox <StackPanel Grid.Column="1" M...
  • u011033906
  • u011033906
  • 2017-03-22 18:40
  • 1484

【UWP通用应用开发】控件、应用栏

控件的属性、事件与样式资源如何添加控件添加控件的方式有多种,大家更喜欢下面哪一种呢?1)使用诸如Blend for Visual Studio或Microsoft Visual Studio XAML...
  • NoMasp
  • NoMasp
  • 2015-12-11 14:28
  • 6034

win10 uwp 验证输入 自定义用户控件

TextBox是给用户输入,我们有时要用户只输入数字,而用户输入汉字,我们就有提示用户,那么这东西用到次数很多,我们需要做成一个控件。 我们可以用别人的库,我找到一个大神写的库,很好用 我们使用这...
  • lindexi_gd
  • lindexi_gd
  • 2017-03-25 10:13
  • 2547

win10 uwp 拖动控件

我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法。其中第一个是最差的,最后的才是我希望大神你去用。
  • lindexi_gd
  • lindexi_gd
  • 2017-04-19 20:02
  • 1163

win10 uwp 右击浮出窗在点击位置

本文主要让MenuFlyout出现在我们右击位置。我们一般使用的MenuFlyout写在前台,写在Button里面,但是可能我们的MenuFlyout显示的位置和我们想要的不一样。通过使用后台写Sho...
  • lindexi_gd
  • lindexi_gd
  • 2016-10-09 09:28
  • 1894

UWP入门(四)--设置控件样式

官方定义:可以使用 XAML 框架通过多种方式自定义应用的外观。 通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观。可分享至不同elements的资源中 创建可重用的sty...
  • u011033906
  • u011033906
  • 2017-03-21 15:57
  • 1437

【UWP通用应用开发】集合控件与数据绑定

为ListView和GridView添加数据ListView采用垂直堆叠得方式显示数据,而GridView则采用水平堆叠得方式。长相的话嘛,它们都差不多。 <ListView ...
  • NoMasp
  • NoMasp
  • 2015-12-13 11:24
  • 4274
    个人资料
    • 访问:62355次
    • 积分:1978
    • 等级:
    • 排名:千里之外
    • 原创:131篇
    • 转载:18篇
    • 译文:0篇
    • 评论:12条
    最新评论
    自己动手写DB框架
    对数据库这方面很弱,索性深入研究一下