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

1. TemplatePart

TemplatePart(部件)是指ControlTemplate中的命名元素。控件逻辑预期这些部分存在于ControlTemplate中,并且使用protected DependencyObject GetTemplateChild(String childName)获取它们后进行操作。

以AutoSuggestBox为例,它的ControlTemplate结构如下,可以看到AutoSuggestBox由四个TemplatePart组成,每个TemplatePart都可以在控件代码中以编程方式访问:

下图显示了AutoSuggestBox的TemplatePart:

2. 使用TemplatePart

上一篇文章构造了一个很基础的控件HeaderedContentControl,这次通过扩展这个类做些试验性质的功能来介绍模板化控件的进阶知识。

新建一个名为ContentView的控件,继承自HeaderedContentControl,它要实现的功能有两个:

  • 控件的Header默认Opacity=0.7,当鼠标移动到控件上时,设置Header的Opacity=1。
  • 当Header为空时,隐藏用于显示Header的HeaderContentPresenter。

虽然可以使用依赖属性及TemplateBinding的方式实现这个需求,不过这次用TemplatePart的方式实现。很显然,要实现这次的需求最直接的做法是获取显示Header的TemplatePart,然后用代码对其进行操作。大致上分为两步:添加TemplatePart名称,在代码中获取这个部件并操作。

2.1 添加TemplatePart名称

在ContentView的ControlTemplate中为ContentPresenter命名为HeaderContentPresenter:

<ContentPresenter x:Name="HeaderContentPresenter"
                  Foreground="{ThemeResource TextControlHeaderForeground}"
                  Margin="0,0,0,8"
                  FontWeight="Normal"
                  Content="{TemplateBinding Header}"
                  ContentTemplate="{TemplateBinding HeaderTemplate}" />

2.2 获取TemplatePart

模板化控件在加载ControlTemplate后会调用OnApplyTemplate,可以在这个函数中调用protected DependencyObject GetTemplateChild(String childName)获取模板中指定名字的部件。从返回值是DependencyObject可以看出,只要是DependencyObject 都能使用ControlTemplate获取。

这段代码演示了如何获得显示Header的ContentPresenter部件:

protected override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    _headerPart = GetTemplateChild(HeaderPartName) as FrameworkElement;
}

注意:不要在Loaded事件中尝试调用GetTemplateChild,因为Loaded在OnApplyTemplate前调用,而且Loaded更容易被多次触发。

由于Template可能多次加载,或者不能正确获取TemplatePart,所以使用TemplatePart前应该先判断是否为空;如果要订阅事件,应该先取消订阅。更完整的GetTemplateChild步骤应该是:

  • 取消订阅TemplatePart事件
  • 将TemplatePart存储到私有字段
  • 订阅TemplatePart事件

可以参考如下代码:

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    if (_button != null)
    {
        _button.Click -= OnButtonClick;
    }

    _button = GetTemplateChild(PartButtonName) as ButtonBase;

    if (_button != null)
    {
        _button.Click += OnButtonClick;
    }
}

2.3 完整的代码

[TemplatePart(Name = HeaderPartName, Type = typeof(FrameworkElement))]
public sealed class ContentView : HeaderedContentControl
{
    public const string HeaderPartName = "HeaderContentPresenter";

    public ContentView()
    {
        this.DefaultStyleKey = typeof(ContentView);
    }

    private FrameworkElement _headerPart;
    private bool _isPointerEntered;

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _headerPart = GetTemplateChild(HeaderPartName) as FrameworkElement;
        UpdateHeaderVisual();
    }

    protected override void OnPointerEntered(PointerRoutedEventArgs e)
    {
        base.OnPointerEntered(e);
        _isPointerEntered = true;
        UpdateHeaderVisual();
    }

    protected override void OnPointerExited(PointerRoutedEventArgs e)
    {
        base.OnPointerExited(e);
        _isPointerEntered = false;
        UpdateHeaderVisual();
    }

    protected override void OnHeaderChanged(object oldValue, object newValue)
    {
        base.OnHeaderChanged(oldValue, newValue);
        UpdateHeaderVisual();
    }

    private void UpdateHeaderVisual()
    {
        if (_headerPart == null)
            return;

        if (_isPointerEntered)
            _headerPart.Opacity = 1;
        else
            _headerPart.Opacity = 0.7;

        if (Header == null)
            _headerPart.Visibility = Visibility.Collapsed;
        else
            _headerPart.Visibility = Visibility.Visible;
    }
}

3. x:DeferLoadStrategy="Lazy"与GetTemplateChild

标记为x:DeferLoadStrategy="Lazy"的元素将延迟加载,即不会出现在VisualTree上,直到它被调用。

假设将ContentView中HeaderContentPresenter标记为x:DeferLoadStrategy="Lazy"并且在代码中注释_headerPart = GetTemplateChild(HeaderPartName) as FrameworkElement这句,运行时将看不到Header的内容,并且VisualTree如下所示:

只有代码中执行了_headerPart = GetTemplateChild(HeaderPartName) as FrameworkElement这句后,VisualTree上才可以看到HeaderContentPresenter,如下所示:

出于性能方面的考虑,很多UWP原生控件都会包含x:DeferLoadStrategy="Lazy"

4. TemplatePartAttribute协定

有时,为了表明控件期待在ControlTemplate存在某个特定部件,防止编辑ControlTemplate的开发人员删除它,控件上会添加添加TemplatePartAttribute协定。上面的ContentView代码中即包含这个协定:

[TemplatePart(Name = HeaderPartName, Type = typeof(FrameworkElement))]

这段代码的意思是期待在ControlTemplate中存在名称为 "HeaderContentPresenter",类型为FrameworkElement的部件。

TemplatePartAttribute在UWP中的作用好像被弱化了,不止在UWP原生控件中见不到TemplatePartAttribute,甚至在Blend中“部件”窗口也消失了。可能UWP更加建议使用VisualState。

注意:你可能会在别的地方看到部件的命名为“PART_”开头,在WPF时代确实是这样,到现在仍有很多人保留了这种习惯。新兴的命名语法更加自然,不需要加上“PART_”开头。不过既然Blend中没有了“部件”窗口,用“PART_”标识部件也是个不错的方法。

5. 原则

使用TemplatePart需要遵循以下原则:

  • 尽可能减少TemplarePartAttribute协定。
  • 在使用TemplatePart之前检查其是否为Null。
  • 如果ControlTemplate没有遵循TemplatePartAttribute协定也不应该抛出异常,有可能ControlTemplate的作者是故意屏蔽某项功能。
时间: 2024-10-28 11:25:04

[UWP]了解模板化控件(4):TemplatePart的相关文章

[UWP]了解模板化控件(5.1):TemplatePart vs. VisualState

1. TemplatePart vs. VisualState 在前面两篇文章中分别使用了TemplatePart及VisualState的方式实现了相同的功能,其中明显VisualState的方式更灵活一些.如果遇到这种情况通常我更倾向使用VisualState.不过在实际应用中这两种实现方式并不是互斥的,很多模板化控件都同时使用这两种方式, 使用VisualState有如下好处: 代码和UI分离. 可以更灵活地扩展控件. 可以使用Blend轻松实现动画. 并不是说VisualState好处这

[UWP]了解模板化控件(5):VisualState

1. 功能需求 使用TemplatePart实现上篇文章的两个需求(Header为空时隐藏HeaderContentPresenter,鼠标没有放在控件上时HeaderContentPresent半透明),虽然功能已经实现,但这样实现的话基本上也就别想扩展了.譬如开发者做不到通过继承或修改ControlTemplate实现如下功能: 半透明时的Opacity不是0.7,而是0.5. 半透明和不透明之前切换时有渐变动画. 当然也并不是不可以用代码实现这些需求,只是会复杂很多.大部分的开发者都是对C

[UWP]了解模板化控件(5.2):UserControl vs. TemplatedControl

1. UserControl vs. TemplatedControl 在UWP中自定义控件常常会遇到这个问题:使用UserControl还是TemplatedControl来自定义控件. 1.1 使用UserControl自定义控件 继承自UserControl. 由复数控件组合而成. 包含XAML及CodeBehind. 优点: 上手简单. 可以在CodeBehind直接访问UI元素. 开发速度很快. 缺点: 不能使用ControlTemplate进行定制. 通常很难继承及扩展. 使用场景:

[UWP]合体姿势不对的HeaderedContentControl

原文:[UWP]合体姿势不对的HeaderedContentControl 1. 前言 HeaderedContentControl是WPF中就存在的控件,这个控件的功能很简单:提供Header和Content两个属性,在UI上创建两个ContentPresenter并分别绑定到Header和Content,让这两个ContentPresenter合体组成HeaderedContentControl. 2. 以前的问题 在WPF中,HeaderedContentControl是Expander.

在 UWP 中实现 Expander 控件

WPF 中的 Expander 控件在 Windows 10 SDK 中并不提供,本文主要说明,如何在 UWP 中创建这样一个控件.其效果如下图: 首先,分析该控件需要的一些特性,它应该至少包括如下三个属性: Content: 最重要的属性,设置该属性,可以使 Expander 控件显示其内容: Header: 控件的 Header: IsExpand: 当前是否展开. 接下来是定义其 UI,在这里使用 Grid,添加两行,一行显示 Header,一行显示 Content,当 IsExpand

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

TextBox是给用户输入,我们有时要用户只输入数字,而用户输入汉字,我们就有提示用户,那么这东西用到次数很多,我们需要做成一个控件. 我们可以用别人的库,我找到一个大神写的库,很好用 我们使用这个库可以定义很多验证,我记录我如何使用他这个库,还有如何去修改这个库.如何自定义控件做一个和大神做的一样的控件. Nuget 我们用这个库是jamescroft写的,他上传到Nuget,我们可以去下载 用Nuget搜索WinUX.UWP.Xaml.Controls 下载完成就好 使用库 我们经常需要验证

在uwp仿制WPF的Window

移植WPF软件到uwp时碰到用作对话框的Window有多种处理选择.我个人认为最省事的是用ContentDialog模拟Window. 比如你想把上面这个WPF窗体弄到uwp里面去 1.修改ContentDialog的默认样式 新建一个模板化控件RoundCornerContentDialog 让它继承ContentDialog. 然后去Windows SDK里面翻默认样式(因为vs2015 update 1无法自动提取ContentDialog的默认样式到Xaml). 我的电脑上默认样式在这个

UWP Composition API - GroupListView(二)

还是先上效果图: 看完了上一篇UWP Composition API - GroupListView(一)的童鞋会问,这不是跟上一篇一样的吗??? 骗点击的?? No,No,其实相对上一个有更简单粗暴的方案,因为上篇是为了研究Composition API,所以含着泪都要做完(有没有被骗的赶脚)..( ╯□╰ ) 那是有没有简单点的方法呢?? 嗯,看到这篇,那答案肯定是Yes. 我再啰嗦下需求: 1.Group中的集合需要支持增量加载ISupportIncrementalLoading 2.支持

UWP:可滚动的PivotHeader

原文:UWP:可滚动的PivotHeader UWP开发里,Pivot真是个令人又爱又恨的控件.为了实现某些可滚动Header的效果,有些大佬甚至去掉了原本的Header,使用一个ListView或者ListBox自己画Header,不过这样会让控件变得很复杂. 既然Pivot是一个模板化控件,那么应该有方法直接让Header可以滚动. 先贴效果图: 先自定义Pivot的Style,从generic.xaml找(位置应该在C:\Program Files (x86)\Windows Kits\1