专栏首页dino.c的专栏[UWP 自定义控件]了解模板化控件(1):基础知识

[UWP 自定义控件]了解模板化控件(1):基础知识

1.概述

UWP允许开发者通过两种方式创建自定义的控件:UserControl和TemplatedControl(模板化控件)。这个主题主要讲述如何创建和理解模板化控件,目标是能理解模板化控件常见的知识点,并且可以创建扩展性良好的模板化控件。

1.1 ControlTemplate

UWP的控件有很多属性,使用这些属性可以为控件定制不同的外观,例如将Button的Border变粗,Background改为红色等,但通过这种改造控件,能做到的仍十分有限。

通过为控件赋予新的ControlTemplate,可以为控件创建全新的外观。在下面的例子中,通过ControlTemplate将Button改成一个圆形按钮。

<Button Content="Orginal" Margin="0,0,20,0"/>
<Button Content="Custom">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse  Stroke="DarkOrange" StrokeThickness="3" Fill="LightPink"/>
                <ContentPresenter Margin="10,20" Foreground="White"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

ControlTemplate的内容是定义控件可视结构的XAML。有时,这段XAML的根元素包含VisualStateManager.VisualStateGroups附加属性,用于定义不同状态下控件的外观变化。将ControlTemplate赋值到Control.Template即可改变控件的外观。ControlTemplate的TargetType需要和使用它的控件匹配。

注意:UserControl不能使用ControlTemplate。

1.2 模板化控件

可以使用ControlTemplate的控件即为模板化控件(TemplatedControl),在UWP中,所有派生自Control的控件(除了UserControl)都是模板化控件,例如Button、ComboBox等,它们中的大部分都有默认的ControlTemplate。

模板化控件包含以下两个部分:

  • 代码: 定义控件属性及行为。
  • DefaultStyle: 定义控件属性默认样式,包括属性值及ControlTemplate。可以不存在DefaultStyle,所以某些场合会把模板化控件称为“无外观控件”。

2. 创建第一个模板化控件

下面介绍如何使用VisualStudio在一个新项目中创建一个模板化控件。

如图所示,在“添加新项对”话框中选中TemplatedControl,名称部分输入“MyFirstControl”,点击“添加”后VisualStudio会自动在项目中添加两个文件:MyFirstControl.cs和Themes/Generic.xaml:

2.1 MyFirstControl.cs

public sealed class MyFirstControl : Control
{
    public MyFirstControl()
    {
        this.DefaultStyleKey = typeof(MyFirstControl);
    }
}

类文件负责定义控件的结构和行为。MyFirstControl.cs的代码如图所示,只包含一个构造函数及一句 this.DefaultStyleKey = typeof(MyFirstControl)。DefaultStyleKey是用于查找控件样式的键,没有这句代码控件就找不到默认UI。

如果控件需要被继承的话,最好把sealed关键字移除。

2.2 Themes/Generic.xaml

<Style TargetType="local:MyFirstControl" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyFirstControl">
                <Border
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

XAML负责定义控件的外观。在第一次创建控件后VisualStudio会自动创建这个文件,并且插入图中的代码。注意其中两个TargetType="local:MyFirstControl",第一个用于匹配MyFirstControl.cs中的DefaultStyleKey,第二个确定ControlTemplete针对的控件类型。两个都不可以移除。Style的内容是一组Setter的集合,除了Template外,还可以添加其它的Setter指定控件的默认外观。

2.3 使用MyFirstControl

<Page
    x:Class="App3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <local:MyFirstControl />
    </Grid>
</Page>

通常情况下MainPage已经引用了local命名控件,所以只需这段xaml即可轻松使用刚刚创建好的控件。

2.4 使用Blend修改DefaultStyle

就算经验丰富的开发者仍免不了使用Blend这个工具来编辑Style和ControlTemplate,幸好Blend上手十分简单。

使用Blend打开项目后,在“资源”面板展开Generic.xaml节点,选中MyFirstControl,点击编辑资源:

在“对象与时间线”面板,选中“Style”节点可在右侧“属性”面板编辑Style中除Template以外的属性:

在“Style”节点,右键打开菜单,选中“编辑模版”->“编辑当前项”开始编辑Template,此时左侧“对象与时间线”面板展示Template中的结构:

此后,可在编辑区域的上方选择编辑Style或者编辑Template:

由于这个主题主要目的是介绍模板化控件,所以不会深入讨论Blend的操作。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [UWP 自定义控件]了解模板化控件(10):原则与技巧

    一个控件是否好用,很大一部分取决于名称。好的命名能让使用者用起来更得心应手,坏的命名只会让代码更混淆。下面总结了UWP控件命名的一般模式:

    dino.c
  • [WPF自定义控件库] 自定义控件的代码如何与ControlTemplate交互

    WPF有一个灵活的UI框架,用户可以轻松地使用代码控制控件的外观。例设我需要一个控件在鼠标进入的时候背景变成蓝色,我可以用下面这段代码实现:

    dino.c
  • [WPF自定义控件库]以Button为例谈谈如何模仿Aero2主题

    除了以外观为卖点的控件库,WPF的控件库都默认使用“素颜”的外观,然后再提供一些主题包。这样做的最大好处是可以和原生控件或其它控件库兼容,而且对于大部分人来说模...

    dino.c
  • 认识基本的mfc控件

      几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

    用户2038589
  • Qt编写控件属性设计器6-动态属性

    之前就提过,Qt的属性机制强大到爆,这次的动态属性功能就是要让他爆,很难想象只要一行代码即可widget->setProperty("value", value...

    feiyangqingyun
  • Qt编写控件属性设计器5-属性中文

    在上一篇文章中就提到过,使用qtpropertybrowser来加载属性,对应加载到的属性是英文的,也就是控件类中Q_PROPERTY描述的变量名称,如何变成中...

    feiyangqingyun
  • 当iOS遇见UI

    iOS应用开发的一项内容就是用户界面的开发。不管应用程序实际包含的逻辑有多复杂和优秀,如果这个应用没有提供友好的图形用户界面,那么也很难吸引最终用户。相反,如果...

    博文视点Broadview
  • Qt编写控件属性设计器2-拖曳控件

    上一篇文章把插件加载好了,并且把插件中的所有控件都显示到了列表框中,这次要做的就是实现拖曳控件的功能,用户选择一个控件拖曳到画布上,松开,在松开位置处自动实例化...

    feiyangqingyun
  • 【程序源代码】Qt编写的一些开源的demo

    今天给大家讲一讲:Qt编写的一些开源的demo。内容相对比较简单 大家按照如下步骤进行操作就可以了。

    程序源代码
  • WPF效果第一百四十一篇之自定义步骤控件二

    ;这不再次捋了捋思路又去实现一个版本;具体需求:①每一步是长度是不固定的②每步都是有进度的,来看看最终效果如下图:

    WPF程序员

扫码关注云+社区

领取腾讯云代金券