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

1. TemplatePart vs. VisualState

在前面两篇文章中分别使用了TemplatePart及VisualState的方式实现了相同的功能，其中明显VisualState的方式更灵活一些。如果遇到这种情况通常我更倾向使用VisualState。不过在实际应用中这两种实现方式并不是互斥的，很多模板化控件都同时使用这两种方式，

使用VisualState有如下好处：

  • 代码和UI分离。
  • 可以更灵活地扩展控件。
  • 可以使用Blend轻松实现动画。

并不是说VisualState好处这么多就一定要用VisualState实现所有功能，下面这些情况我会选择使用TemplatePart：

  • 需要快速实现一个控件。
  • 某个行为时固定的，不需要扩展。
  • 需要在代码中操作UI，譬如Slider或ComboBox。
  • 为了强调某个部件是控件必须的。
  • 为了隐藏实现细节，限制派生类或ControlTemplate修改重要的逻辑。

其中，使用TemplatePart产生的扩展性问题是我谨慎使用这种方案的最大因素。

2. TemplatePart vs. TemplateBinding

除了VisualState，TemplatePart的功能也常常会被TemplateBinding代替。前面的例子展示了使用VisualState在UI上的优势，这次用另一个控件DateTimeSelector来讨论使用TemplatePart在扩展性上的其它问题。

2.1 使用TemplatePart

DateTimeSelector组合了CalendarDatePicker和TimePicker，用于选择日期和时间（SelectedDateTime）。它的XAML如下：

<Style TargetType="local:DateTimeSelector">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DateTimeSelector">
                <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <CalendarDatePicker x:Name="DateElement"
                                        Margin="0,0,0,5" />
                    <TimePicker x:Name="TimeElement" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

代码如下：

[TemplatePart(Name = DateElementPartName, Type = typeof(CalendarDatePicker))]
[TemplatePart(Name = TimeElementPartName, Type = typeof(TimePicker))]
public class DateTimeSelector : Control
{
    public const string DateElementPartName = "DateElement";
    public const string TimeElementPartName = "TimeElement";

    /// <summary>
    /// 标识 SelectedDateTime 依赖属性。
    /// </summary>
    public static readonly DependencyProperty SelectedDateTimeProperty =
        DependencyProperty.Register("SelectedDateTime", typeof(DateTime), typeof(DateTimeSelector), new PropertyMetadata(DateTime.Now, OnSelectedDateTimeChanged));

    private static void OnSelectedDateTimeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        DateTimeSelector target = obj as DateTimeSelector;
        DateTime oldValue = (DateTime)args.OldValue;
        DateTime newValue = (DateTime)args.NewValue;
        if (oldValue != newValue)
            target.OnSelectedDateTimeChanged(oldValue, newValue);
    }

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

    /// <summary>
    /// 获取或设置SelectedDateTime的值
    /// </summary>
    public DateTime SelectedDateTime
    {
        get { return (DateTime)GetValue(SelectedDateTimeProperty); }
        set { SetValue(SelectedDateTimeProperty, value); }
    }

    private CalendarDatePicker _dateElement;
    private TimePicker _timeElement;
    private bool _isUpdatingDateTime;

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        if (_dateElement != null)
            _dateElement.DateChanged -= OnDateElementDateChanged;

        _dateElement = GetTemplateChild(DateElementPartName) as CalendarDatePicker;
        if (_dateElement != null)
            _dateElement.DateChanged += OnDateElementDateChanged;

        if (_timeElement != null)
            _timeElement.TimeChanged -= OnTimeElementTimeChanged;

        _timeElement = GetTemplateChild(TimeElementPartName) as TimePicker;
        if (_timeElement != null)
            _timeElement.TimeChanged += OnTimeElementTimeChanged;

        UpdateElement();
    }

    protected virtual void OnSelectedDateTimeChanged(DateTime oldValue, DateTime newValue)
    {
        UpdateElement();
    }

    private void OnDateElementDateChanged(CalendarDatePicker sender, CalendarDatePickerDateChangedEventArgs args)
    {
        UpdateSelectDateTime();
    }

    private void OnTimeElementTimeChanged(object sender, TimePickerValueChangedEventArgs e)
    {
        UpdateSelectDateTime();
    }

    private void UpdateElement()
    {
        _isUpdatingDateTime = true;
        try
        {
            if (_dateElement != null)
                _dateElement.Date = SelectedDateTime.Date;

            if (_timeElement != null)
                _timeElement.Time = SelectedDateTime.TimeOfDay;
        }
        finally
        {
            _isUpdatingDateTime = false;
        }
    }

    private void UpdateSelectDateTime()
    {
        if (_isUpdatingDateTime)
            return;

        DateTime dateTime = DateTime.Now;
        if (_dateElement != null && _dateElement.Date.HasValue)
            dateTime = _dateElement.Date.Value.Date;

        if (_timeElement != null)
            dateTime = dateTime.Add(_timeElement.Time);

        SelectedDateTime = dateTime;
    }
}

可以看出，DateTimeSelector通过监视CalendarDatePicker的DateChanged和TimePicker的TimeChanged来改变SelectedDateTime的值。

DateTimeSelector的代码很简单，控件也工作得很好，但如果某天需要将CalendarDatePicker 替换为DatePicker或某个第三方的日期选择控件，DateTimeSelector就无能为力了，既不能通过修改ControlTemplate，也不能通过继承来达到目的。

2.2. 使用TemplateBinding

通常在构建这类控件时应先考虑它的数据和行为，而不关心它的UI。DateTimeSelector最核心的功能是通过选择Date和Time得出组合起来的DateTime，那么就可以先写出如下的类：

public class DateTimeSelector2 : Control
{
    /// <summary>
    /// 标识 Date 依赖属性。
    /// </summary>
    public static readonly DependencyProperty DateProperty =
        DependencyProperty.Register("Date", typeof(DateTime), typeof(DateTimeSelector2), new PropertyMetadata(DateTime.Now, OnDateChanged));

    private static void OnDateChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        DateTimeSelector2 target = obj as DateTimeSelector2;
        DateTime oldValue = (DateTime)args.OldValue;
        DateTime newValue = (DateTime)args.NewValue;
        if (oldValue != newValue)
            target.OnDateChanged(oldValue, newValue);
    }

    /// <summary>
    /// 标识 Time 依赖属性。
    /// </summary>
    public static readonly DependencyProperty TimeProperty =
        DependencyProperty.Register("Time", typeof(TimeSpan), typeof(DateTimeSelector2), new PropertyMetadata(TimeSpan.Zero, OnTimeChanged));

    private static void OnTimeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        DateTimeSelector2 target = obj as DateTimeSelector2;
        TimeSpan oldValue = (TimeSpan)args.OldValue;
        TimeSpan newValue = (TimeSpan)args.NewValue;
        if (oldValue != newValue)
            target.OnTimeChanged(oldValue, newValue);
    }

    /// <summary>
    /// 标识 DateTime 依赖属性。
    /// </summary>
    public static readonly DependencyProperty DateTimeProperty =
        DependencyProperty.Register("DateTime", typeof(DateTime), typeof(DateTimeSelector2), new PropertyMetadata(DateTime.Now, OnDateTimeChanged));

    private static void OnDateTimeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        DateTimeSelector2 target = obj as DateTimeSelector2;
        DateTime oldValue = (DateTime)args.OldValue;
        DateTime newValue = (DateTime)args.NewValue;
        if (oldValue != newValue)
            target.OnDateTimeChanged(oldValue, newValue);
    }

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

    /// <summary>
    /// 获取或设置Date的值
    /// </summary>
    public DateTime Date
    {
        get { return (DateTime)GetValue(DateProperty); }
        set { SetValue(DateProperty, value); }
    }

    /// <summary>
    /// 获取或设置Time的值
    /// </summary>
    public TimeSpan Time
    {
        get { return (TimeSpan)GetValue(TimeProperty); }
        set { SetValue(TimeProperty, value); }
    }

    /// <summary>
    /// 获取或设置DateTime的值
    /// </summary>
    public DateTime DateTime
    {
        get { return (DateTime)GetValue(DateTimeProperty); }
        set { SetValue(DateTimeProperty, value); }
    }

    private bool _isUpdatingDateTime;

    protected virtual void OnDateChanged(DateTime oldValue, DateTime newValue)
    {
        UpdateDateTime();
    }

    protected virtual void OnTimeChanged(TimeSpan oldValue, TimeSpan newValue)
    {
        UpdateDateTime();
    }

    protected virtual void OnDateTimeChanged(DateTime oldValue, DateTime newValue)
    {
        _isUpdatingDateTime = true;
        try
        {
                Date = newValue.Date;
                Time = newValue.TimeOfDay;
        }
        finally
        {
            _isUpdatingDateTime = false;
        }
    }

    private void UpdateDateTime()
    {
        if (_isUpdatingDateTime)
            return;

            DateTime = Date.Date.Add(Time);
    }
}

控件的代码并不清楚ControlTemplate中包含什么控件，它只关心自己的数据。

XAML中通过绑定使用这些数据。

<Style TargetType="local:DateTimeSelector2">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DateTimeSelector2">
                <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <CalendarDatePicker Margin="0,0,0,5"
                                        Date="{Binding Date,RelativeSource={RelativeSource Mode=TemplatedParent},Mode=TwoWay,Converter={StaticResource DateTimeOffsetConverter}}" />
                    <TimePicker Time="{Binding Time,RelativeSource={RelativeSource Mode=TemplatedParent},Mode=TwoWay}" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="DateTimeSelector2CustomStyle"
       TargetType="local:DateTimeSelector2">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:DateTimeSelector2">
                <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <DatePicker Margin="0,0,0,5"
                                Date="{Binding Date,RelativeSource={RelativeSource Mode=TemplatedParent},Mode=TwoWay,Converter={StaticResource DateTimeOffsetConverter}}" />
                    <TimePicker Time="{Binding Time,RelativeSource={RelativeSource Mode=TemplatedParent},Mode=TwoWay}" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这里给出了两个Style，分别使用了CalendarDatePicker 和DatePicker ，通过TwoWay Binding访问DateTimeSelector2中的Date属性。如果你的TemplatedControl需要有良好的扩展能力，可以尝试使用这种方式。

时间： 2024-10-12 23:14:17

[UWP]了解模板化控件(5.1)：TemplatePart vs. VisualState的相关文章

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

1. TemplatePart TemplatePart(部件)是指ControlTemplate中的命名元素.控件逻辑预期这些部分存在于ControlTemplate中,并且使用protected DependencyObject GetTemplateChild(String childName)获取它们后进行操作. 以AutoSuggestBox为例,它的ControlTemplate结构如下,可以看到AutoSuggestBox由四个TemplatePart组成,每个TemplatePa

[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进行定制. 通常很难继承及扩展. 使用场景:

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

1. 前言 WPF有一个灵活的UI框架,用户可以轻松地使用代码控制控件的外观.例设我需要一个控件在鼠标进入的时候背景变成蓝色,我可以用下面这段代码实现: protected override void OnMouseEnter(MouseEventArgs e) { base.OnMouseEnter(e); Background = new SolidColorBrush(Colors.Blue); } 但一般没人会这么做,因为这样做代码和UI过于耦合,难以扩展.正确的做法应该是使用代码告诉C

[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

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

[UWP]为番茄钟应用设计一个平平无奇的状态按钮

1. 为什么需要设计一个状态按钮 OnePomodoro应用里有个按钮用来控制计时器的启动/停止,本来这应该是一个包含"已启动"和"已停止"两种状态的按钮,但我以前在WPF和UWP上做过太多StateButton.ProgressButton之类的东西,已经厌倦了这种控件,所以我在OnePomodoro应用里只是简单地使用两个按钮来实现这个功能: <Button Content="" Visibility="{x:Bind Vi