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

1. 前言

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

protected override void OnMouseEnter(MouseEventArgs e)
{
    base.OnMouseEnter(e);
    Background = new SolidColorBrush(Colors.Blue);
}

但一般没人会这么做，因为这样做代码和UI过于耦合，难以扩展。正确的做法应该是使用代码告诉ControlTemplate去改变外观，或者控制ControlTemplate中可用的元素进入某个状态。

这篇文章介绍自定义控件的代码如何和ControlTemplate交互，涉及的知识包括RelativeSource、Trigger、TemplatePart和VisualState。

2. 简单的Expander

本文使用一个简单的Expander介绍UI和ControlTemplate交互的几种技术，它的代码如下：

public class MyExpander : HeaderedContentControl
{
    public MyExpander()
    {
        DefaultStyleKey = typeof(MyExpander);
    }

    public bool IsExpanded
    {
        get => (bool)GetValue(IsExpandedProperty);
        set => SetValue(IsExpandedProperty, value);
    }

    public static readonly DependencyProperty IsExpandedProperty =
        DependencyProperty.Register(nameof(IsExpanded), typeof(bool), typeof(MyExpander), new PropertyMetadata(default(bool), OnIsExpandedChanged));

    private static void OnIsExpandedChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        var oldValue = (bool)args.OldValue;
        var newValue = (bool)args.NewValue;
        if (oldValue == newValue)
            return;

        var target = obj as MyExpander;
        target?.OnIsExpandedChanged(oldValue, newValue);
    }

    protected virtual void OnIsExpandedChanged(bool oldValue, bool newValue)
    {
        if (newValue)
            OnExpanded();
        else
            OnCollapsed();
    }

    protected virtual void OnCollapsed()
    {
    }

    protected virtual void OnExpanded()
    {
    }
}

<Style TargetType="{x:Type local:MyExpander}">
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyExpander}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel>
                        <ToggleButton x:Name="ExpanderToggleButton"
                                      Content="{TemplateBinding Header}"
                                      IsChecked="{Binding IsExpanded,RelativeSource={RelativeSource Mode=TemplatedParent},Mode=TwoWay}" />
                        <ContentPresenter Grid.Row="1"
                                          x:Name="ContentPresenter"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Visibility="Collapsed" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

MyExpander是一个HeaderedContentControl，它包含一个IsExpanded用于指示当前是展开还是折叠。ControlTemplate中包含ExpanderToggleButton及ContentPresenter两个元素。

3. 使用RelativeSource

之前已经介绍过TemplateBinding，通常ControlTemplate中元素都通过TemplateBinding获取控件的属性值。但需要双向绑定的话，就是RelativeSource出场的时候了。

RelativeSource有几种模式，分别是：

  • FindAncestor，引用数据绑定元素的父链中的上级。 这可用于绑定到特定类型的上级或其子类。
  • PreviousData，允许在当前显示的数据项列表中绑定上一个数据项（不是包含数据项的控件）。
  • Self，引用正在其上设置绑定的元素，并允许你将该元素的一个属性绑定到同一元素的其他属性上。
  • TemplatedParent，引用应用了模板的元素，其中此模板中存在数据绑定元素。。

ControlTemplate中主要使用RelativeSource Mode=TemplatedParent的Binding，它相当于TemplateBinding的双向绑定版本。，主要是为了可以和控件本身进行双向绑定。ExpanderToggleButton.IsChecked使用这种绑定与Expander的IsExpanded关联，当Expander.IsChecked为True时ExpanderToggleButton处于选中的状态。

IsChecked="{Binding IsExpanded,RelativeSource={RelativeSource Mode=TemplatedParent},Mode=TwoWay}"

接下来分别用几种技术实现Expander.IsChecked为True时显示ContentPresenter。

4. 使用Trigger

<ControlTemplate TargetType="{x:Type local:ExpanderUsingTrigger}">
    <Border Background="{TemplateBinding Background}">
        ......
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsExpanded"
                 Value="True">
            <Setter Property="Visibility"
                    TargetName="ContentPresenter"
                    Value="Visible" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

可以为ControlTemplate添加Triggers，内容为Trigger或EventTrigger的集合，Triggers通过响应属性值变更或事件更改控件的外观。

大部分情况下Trigger简单好用，但滥用或错误使用将使ControlTemplate的各个状态之间变得很混乱。例如当可以影响外观的属性超过一定数量，并且这些属性可以组成不同的组合，Trigger将要处理无数种情况。

5. 使用TemplatePart

TemplatePart（部件）是指ControlTemplate中的命名元素（如上面XAML中的“HeaderElement”）。控件逻辑预期这些部分存在于ControlTemplate中，控件在加载ControlTemplate后会调用OnApplyTemplate，可以在这个函数中调用protected DependencyObject GetTemplateChild(String childName)获取模板中指定名字的部件。

[TemplatePart(Name =ContentPresenterName,Type =typeof(UIElement))]
public class ExpanderUsingPart : MyExpander
{
    private const string ContentPresenterName = "ContentPresenter";

    protected UIElement ContentPresenter { get; private set; }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        ContentPresenter = GetTemplateChild(ContentPresenterName) as UIElement;
        UpdateContentPresenter();
    }

    protected override void OnIsExpandedChanged(bool oldValue, bool newValue)
    {
        base.OnIsExpandedChanged(oldValue, newValue);
        UpdateContentPresenter();
    }

    private void UpdateContentPresenter()
    {
        if (ContentPresenter == null)
            return;

        ContentPresenter.Visibility = IsExpanded ? Visibility.Visible : Visibility.Collapsed;
    }
}

上面的代码实现了获取HeaderElement并为它订阅鼠标点击事件。由于Template可能多次加载，或者不能正确获取TemplatePart，所以使用TemplatePart前应该先判断是否为空；如果要订阅事件，应该先取消订阅。

注意：不要在Loaded事件中尝试调用GetTemplateChild，因为Loaded的时候OnApplyTemplate不一定已经被调用，而且Loaded更容易被多次触发。

TemplatePartAttribute协定

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

[TemplatePart(Name =ContentPresenterName,Type =typeof(UIElement))]

这段代码的意思是期待在ControlTemplate中存在名称为 "ContentPresenterName"，类型为UIElement的部件。

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

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

  • 尽可能减少TemplarePartAttribute协定。
  • 在使用TemplatePart之前检查其是否为Null。
  • 如果ControlTemplate没有遵循TemplatePartAttribute协定也不应该抛出异常，缺少部分功能可以接受，但要确保程序不会报错。

6. 使用VisualState

VisualState 指定控件处于特定状态时的外观。控件的代码使用VisualStateManager.GoToState(Control control, string stateName,bool useTransitions)指定控件处于何种VisualState，控件的ControlTemplate中根节点使用VisualStateManager.VisualStateGroups附加属性，并在其中确定各个VisualState的外观。

[TemplateVisualState(Name = StateExpanded, GroupName = GroupExpansion)]
[TemplateVisualState(Name = StateCollapsed, GroupName = GroupExpansion)]
public class ExpanderUsingState : MyExpander
{
    public const string GroupExpansion = "ExpansionStates";

    public const string StateExpanded = "Expanded";

    public const string StateCollapsed = "Collapsed";

    public ExpanderUsingState()
    {
        DefaultStyleKey = typeof(ExpanderUsingState);
    }

    protected override void OnIsExpandedChanged(bool oldValue, bool newValue)
    {
        base.OnIsExpandedChanged(oldValue, newValue);
        UpdateVisualStates(true);
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        UpdateVisualStates(false);
    }

    protected virtual void UpdateVisualStates(bool useTransitions)
    {
        VisualStateManager.GoToState(this, IsExpanded ? StateExpanded : StateCollapsed, useTransitions);
    }

}
<ControlTemplate TargetType="{x:Type local:ExpanderUsingState}">
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ExpansionStates">
                <VisualState x:Name="Expanded">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="ContentPresenter">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Collapsed" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
      ......
    </Border>
</ControlTemplate>

上面的代码演示了如何通过控件的IsExpanded 属性进入不同的VisualState。ExpansionStates是VisualStateGroup，它包含Expanded和Collapsed两个互斥的状态，控件使用VisualStateManager.GoToState(Control control, string stateName,bool useTransitions)更新VisualState。useTransitions这个参数指示是否使用 VisualTransition 进行状态过渡，简单来说即是VisualState之间切换时用不用VisualTransition里面定义的动画。请注意我在OnApplyTemplate()中使用了 UpdateVisualStates(false)，这是因为这时候控件还没在UI上呈现，这时候使用动画毫无意义。

使用VisualState的最佳实践

使用属性控制状态，并创建一个方法帮助状态间的转换。如上面的UpdateVisualStates(bool useTransitions)。当属性值改变或其它有可能影响VisualState的事件发生都可以调用这个方法，由它统一管理控件的VisualState。注意一个控件应该最多只有几种VisualStateGroup，有限的状态才容易管理。

TemplateVisualStateAttribute协定

自定义控件可以使用TemplateVisualStateAttribute协定声明它的VisualState，用于通知控件的使用者有这些VisualState可用。这很好用，尤其是对于复杂的控件来说。上面代码也包含了这个协定：

[TemplateVisualState(Name = StateExpanded, GroupName = GroupExpansion)]
[TemplateVisualState(Name = StateCollapsed, GroupName = GroupExpansion)]

TemplateVisualStateAttribute是可选的，而且就算控件声明了这些VisualState，ControlTemplate也可以不包含它们中的任何一个，并且不会引发异常。

7. Trigger、TemplatePart及VisualState之间的选择

正如Expander所示，Trigger、TemplatePart及VisualState都可以实现类似的功能，像这种三种方式都可以实现同一个功能的情况很常见。

在过去版本的Blend中，编辑ControlTemplate可以看到“状态(States)”、“触发器（Triggers）”、“部件（Parts）”三个面板，现在“部件”面板已经消失了，而“触发器”从Silverlight开始就不再支持，以后也应该不会回归（xaml standard在github上有这方面的讨论(Add Triggers, DataTrigger, EventTrigger,___) [and-or] VisualState · Issue #195 · Microsoft-xaml-standard · GitHub[https://github.com/Microsoft/xaml-standard/issues/195]）。现在看起来是VisualState的胜利，其实在Silverlight和UWP中TemplatePart仍是个十分常用的技术，而在WPF中Trigger也工作得很出色。

如果某个功能三种方案都可以实现，我的选择原则是这样：

  • 需要向控件发出命令的，如响应点击事件，就用TemplatePart；
  • 简单的UI，如隐藏/显示某个元素就用Trigger；
  • 如果要有动画，并且代码量和使用Trigger的话，我会选择用VisualState；

几乎所有WPF的原生控件都提供了VisualState支持，例如Button虽然使用ButtonChrome实现外观，但同时也可以使用VisualState定义外观。有时做自定义控件的时候要考虑为常用的VisualState提供支持。

8. 结语

VisualState是个比较复杂的话题，可以通过我的另一篇文章理解ControlTemplate中的VisualTransition更深入地理解它的用法（虽然是UWP的内容，但对WPF也同样适用）。

即使不自定义控件，学会使用ControlTemplate也是一件好事，下面给出一些有用的参考链接。

9. 参考

创建具有可自定义外观的控件 Microsoft Docs
通过创建 ControlTemplate 自定义现有控件的外观 Microsoft Docs
Control Customization Microsoft Docs
ControlTemplate Class (System_Windows_Controls) Microsoft Docs

原文地址：https://www.cnblogs.com/dino623/p/interact_with_ControlTemplate.html

时间： 2024-09-30 16:54:23

[WPF自定义控件库] 自定义控件的代码如何与ControlTemplate交互的相关文章

[WPF自定义控件库]使用WindowChrome自定义RibbonWindow

原文:[WPF自定义控件库]使用WindowChrome自定义RibbonWindow 1. 为什么要自定义RibbonWindow 自定义Window有可能是设计或功能上的要求,可以是非必要的,而自定义RibbonWindow则不一样: 如果程序使用了自定义样式的Window,为了统一外观需要把RibbonWindow一起修改样式. 为了解决RibbonWindow的BUG. 如上图所示,在Windows 10 上运行打开RibbonWindow,可以看到标题栏的内容(包括分隔符)没有居中对齐

二十五、【开源】EFW框架Winform前端开发之强大的自定义控件库

回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu.com/s/1o6MAKCa       前言:相比以前现在做Net系统Winform版开发有几款不错的控件,如DotNetBar.DevExpress,EFW框架也不能落后加入了DotNetBar控件,有时间也想把DevExpress控件也整合进来,这样让大家又多一个选择:DotNetBar中

WPF 精修篇 自定义控件

原文:WPF 精修篇 自定义控件 自定义控件 因为没有办法对界面可视化编辑 所以用来很少 现在实现的是 自定义控件的 自定义属性 和自定义方法 用VS 创建自定义控件后 会自动创建 Themes 文件夹和 Generic.xaml 还有自定义的类 这边是SeachControl Gneneric <Style TargetType="{x:Type local:SeachControl}"> <Setter Property="Template"&

python 解析html基础 HTMLParser库,方法,及代码实例

HTMLParser, a simple lib as html/xhtml parser 官方解释: This module defines a class HTMLParser which serves as the basis for parsing text files formatted in HTML (HyperText Mark-up Language) and XHTML.Unlike the parser in htmllib, this parser is not base

WPF DataGrid分页功能实现代码 修改原作者不能实现的部分

这两天需要给Datagrid加个分页,查找了一些相关的文章,发现有一个写了一个控件比较好,地址是 http://blog.csdn.net/zdw_wym/article/details/8221894 感谢这位大神12年的帖子,但是照着做了以后,发现除了点击数字和GO按钮好使意外,神马“首页.上一页.下一页.末页”都不好使. 继续找寻相关的资料和查看大神的源码,发现有的地方写的不对,因为textblock没有click事件,而大神写了click事件,所以没有得到触发,介于这个问题,我稍作了修改

C/C++ 开源库及示例代码

C/C++ 开源库及示例代码 Table of Contents 说明 1 综合性的库 2 数据结构 & 算法 2.1 容器 2.1.1 标准容器 2.1.2 Lockfree 的容器 2.1.3 环形缓冲 2.1.4 多维数组 2.1.5 图 2.2 对容器的操作 2.3 字符串处理 2.3.1 字符集 2.3.2 字符串格式化 2.3.3 正则表达式 2.3.4 (其它) 2.4 内存相关 2.4.1 智能指针 2.4.2 内存池 2.5 时间 & 日期 2.6 编码 & 解码

Linux下c函数dlopen实现加载动态库so文件代码举例

dlopen()是一个强大的库函数.该函数将打开一个新库,并把它装入内存.该函数主要用来加载库中的符号,这些符号在编译的时候是不知道的.这种机制使得在系统中添加或者删除一个模块时,都不需要重新编译了.可以在自己的程序中使用 dlopen().dlopen() 在 dlfcn.h 中定义,并在 dl 库中实现.它需要两个参数:一个文件名和一个标志.文件名就是一个动态库so文件,标志指明是否立刻计算库的依赖性.如果设置为 RTLD_NOW 的话,则立刻计算:如果设置的是 RTLD_LAZY,则在需要

捕捉WPF应用程序中XAML代码解析异常

原文:捕捉WPF应用程序中XAML代码解析异常 由于WPF应用程序中XAML代码在很多时候是运行时加载处理的.比如DynamicResource,但是在编译或者运行的过程中,编写的XAML代码很可能有错误,此时XAML代码解析器通常会抛出称为XamlParseException的异常.但是抛出的XamlParseException异常提供的信息非常简单,或者是很不准确.此时我们关于通过对变通的方法来获取更多的异常信息: 我们知道,WPF应用程序中的XAML代码是在InitializeCompon

本地java代码和javascript进行交互(java和js互调)

在android的开发过程中,有很多时候需要用到本地java代码和javascript进行交互.android对交互进行了很好的封装,在开发中我们可以很简单的用java代码调用webview中的js,也可以用webview中的js来调用本地的java代码,这样我们可以实现很多原来做不了的功能,比如点击网页上的电话号码后,手机自动拨打电话,点击网页中的笑话,自动发送短信等. 废话不多说,这次教程的目标如下 android 中的java代码调用webview里面的js脚本 webview中的js脚本