[UWP 自定义控件]了解模板化控件(6)：使用附加属性-Windows系列-PHP中文网

为了实现统一的外观和提升用户体验，我们对之前的contentview2进行了优化，将其header部分独立出来，创建了一个可复用的控件headerview。这个新控件继承自control，并引入了header和attachelement属性。通过将headerview嵌入到其他控件的controltemplate中，取代原有的headercontentpresenter，我们成功统一了控件的外观。在controltemplate中的使用方式如下：

<headerview attachedelement="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}" header="{TemplateBinding  Header}"></headerview>

登录后复制

通过使用Mode=TemplatedParent的绑定，我们可以获取模板所属的控件。在HeaderView的实现中，我们监视AttachElement属性的变化，并订阅AttachElement的PointerEntered和PointerExited事件，以便在鼠标进入和离开时改变VisualState：

protected virtual void OnAttachedElementChanged(FrameworkElement oldValue, FrameworkElement newValue){
    if (oldValue != null)    {
        oldValue.PointerEntered -= OnPointerEntered;
        oldValue.PointerExited -= OnPointerExited;
    }
    if (newValue != null)    {
        newValue.PointerEntered += OnPointerEntered;
        newValue.PointerExited += OnPointerExited;
    }
}
private void OnPointerEntered(object sender, PointerRoutedEventArgs e){
    _isPointerEntered = true;
    UpdateVisualState();
}
private void OnPointerExited(object sender, PointerRoutedEventArgs e){
    _isPointerEntered = false;
    UpdateVisualState();
}

登录后复制

通过上述步骤，我们实现了基本功能。

为了避免为每个拥有Header属性的控件单独修改ControlTemplate，我们引入了附加属性ExtendHeader到HeaderView中。在附加属性的PropertyChangedCallback函数中，我们检查目标对象是否具有Header属性，如果有，则将Header值设置到一个新的HeaderView对象中，并将目标控件的Header设置为这个HeaderView对象。代码如下：

/// <summary>
/// 从指定元素获取 ExtendHeader 依赖项属性的值。
/// </summary>
/// The element from which the property value is read.
/// <returns>ExtendHeader 依赖项属性的值</returns>
public static object GetExtendHeader(DependencyObject obj){
    return (object)obj.GetValue(ExtendHeaderProperty);
}
/// <summary>
/// 将 ExtendHeader 依赖项属性的值设置为指定元素。
/// </summary>
/// The element on which to set the property value.
/// The property value to set.
public static void SetExtendHeader(DependencyObject obj, object value){
    obj.SetValue(ExtendHeaderProperty, value);
}
/// <summary>
/// 标识 ExtendHeader 依赖项属性。
/// </summary>
public static readonly DependencyProperty ExtendHeaderProperty =
    DependencyProperty.RegisterAttached("ExtendHeader", typeof(object), typeof(HeaderView), new PropertyMetadata(0, OnExtendHeaderChanged));
private static void OnExtendHeaderChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){
    HeaderView target = obj as HeaderView;
    object oldValue = (object)args.OldValue;
    object newValue = (object)args.NewValue;
    if (oldValue == newValue)
        return;
    FrameworkElement element = obj as FrameworkElement;
    if (element == null)
        return;
    var headerProperty = element.GetType().GetProperty("Header");
    if (headerProperty == null)
        return;
    HeaderView view = new HeaderView
    {
        Header = newValue,
        AttachedElement = element
    };
    headerProperty.SetValue(element, view);
}

登录后复制

在XAML中使用这个附加属性非常简单，如下所示：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

173

查看详情

<textbox local:headerview.extendheader="TextBox Header" placeholdertext="Input some text..."></textbox>

登录后复制

同样，这个附加属性也可以在ControlTemplate中使用。例如，对于没有Header属性的ListBox，可以在其ControlTemplate中的HeaderView上绑定到HeaderView.ExtendHeader：

<listbox local:headerview.extendheader="ListBox Header">
    <listbox.template>
        <controltemplate targettype="ListBox">
            <border borderbrush="{TemplateBinding BorderBrush}" borderthickness="{TemplateBinding BorderThickness}" x:name="LayoutRoot">
                <stackpanel>
                    <headerview attachedelement="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}" header="{TemplateBinding  local:HeaderView.ExtendHeader}"></headerview>
                    <scrollviewer automationproperties.accessibilityview="Raw" background="{TemplateBinding Background}" bringintoviewonfocuschange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" horizontalscrollbarvisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" horizontalscrollmode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" isdeferredscrollingenabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" ishorizontalrailenabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" isverticalrailenabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" padding="{TemplateBinding Padding}" tabnavigation="{TemplateBinding TabNavigation}" verticalscrollbarvisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" verticalscrollmode="{TemplateBinding ScrollViewer.VerticalScrollMode}" x:name="ScrollViewer" zoommode="{TemplateBinding ScrollViewer.ZoomMode}">
                        <itemspresenter></itemspresenter>
                    </scrollviewer>
                </stackpanel>
            </border>
        </controltemplate>
    </listbox.template>
    <listboxitem content="ListBoxItem 1"></listboxitem>
    <listboxitem content="ListBoxItem 2"></listboxitem>
    <listboxitem content="ListBoxItem 3"></listboxitem>
</listbox>

登录后复制

[UWP 自定义控件]了解模板化控件(6)：使用附加属性

完整的HeaderView类的实现代码如下：

[TemplateVisualState(Name = NormalState, GroupName = CommonStates)]
[TemplateVisualState(Name = PointerOverState, GroupName = CommonStates)]
[TemplateVisualState(Name = NoHeaderState, GroupName = HeaderStates)]
[TemplateVisualState(Name = HasHeaderState, GroupName = HeaderStates)]
public class HeaderView : Control{
    public const string CommonStates = "CommonStates";
    public const string NormalState = "Normal";
    public const string PointerOverState = "PointerOver";
    public const string HeaderStates = "HeaderStates";
    public const string NoHeaderState = "NoHeader";
    public const string HasHeaderState = "HasHeader";
    /// <summary>
    /// 从指定元素获取 ExtendHeader 依赖项属性的值。
    /// </summary>
    /// The element from which the property value is read.
    /// <returns>ExtendHeader 依赖项属性的值</returns>
    public static object GetExtendHeader(DependencyObject obj){
        return (object)obj.GetValue(ExtendHeaderProperty);
    }
    /// <summary>
    /// 将 ExtendHeader 依赖项属性的值设置为指定元素。
    /// </summary>
    /// The element on which to set the property value.
    /// The property value to set.
    public static void SetExtendHeader(DependencyObject obj, object value){
        obj.SetValue(ExtendHeaderProperty, value);
    }
    /// <summary>
    /// 标识 ExtendHeader 依赖项属性。
    /// </summary>
    public static readonly DependencyProperty ExtendHeaderProperty =
        DependencyProperty.RegisterAttached("ExtendHeader", typeof(object), typeof(HeaderView), new PropertyMetadata(0, OnExtendHeaderChanged));
    private static void OnExtendHeaderChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){
        HeaderView target = obj as HeaderView;
        object oldValue = (object)args.OldValue;
        object newValue = (object)args.NewValue;
        if (oldValue == newValue)
            return;
        FrameworkElement element = obj as FrameworkElement;
        if (element == null)
            return;
        var headerProperty = element.GetType().GetProperty("Header");
        if (headerProperty == null)
            return;
        HeaderView view = new HeaderView
        {
            Header = newValue,
            AttachedElement = element
        };
        headerProperty.SetValue(element, view);
    }
    /// <summary>
    /// 从指定元素获取 Header 依赖项属性的值。
    /// </summary>
    /// The element from which the property value is read.
    /// <returns>Header 依赖项属性的值</returns>
    public static object GetHeader(DependencyObject obj){
        return (object)obj.GetValue(HeaderProperty);
    }
    /// <summary>
    /// 将 Header 依赖项属性的值设置为指定元素。
    /// </summary>
    /// The element on which to set the property value.
    /// The property value to set.
    public static void SetHeader(DependencyObject obj, object value){
        obj.SetValue(HeaderProperty, value);
    }
    /// <summary>
    /// 标识 Header 依赖属性。
    /// </summary>
    public static readonly DependencyProperty HeaderProperty =
        DependencyProperty.Register("Header", typeof(object), typeof(HeaderView), new PropertyMetadata(null, OnHeaderChanged));
    private static void OnHeaderChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){
        object oldValue = (object)args.OldValue;
        object newValue = (object)args.NewValue;
        if (oldValue == newValue)
            return;
        HeaderView target = obj as HeaderView;
        if (target != null)
        {
            target.OnHeaderChanged(oldValue, newValue);
        }
    }
    /// <summary>
    /// 标识 AttachedElement 依赖属性。
    /// </summary>
    public static readonly DependencyProperty AttachedElementProperty =
        DependencyProperty.Register("AttachedElement", typeof(FrameworkElement), typeof(HeaderView), new PropertyMetadata(null, OnAttachedElementChanged));
    private static void OnAttachedElementChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){
        HeaderView target = obj as HeaderView;
        FrameworkElement oldValue = (FrameworkElement)args.OldValue;
        FrameworkElement newValue = (FrameworkElement)args.NewValue;
        if (oldValue != newValue)
            target.OnAttachedElementChanged(oldValue, newValue);
    }
    public HeaderView(){
        this.DefaultStyleKey = typeof(HeaderView);
    }
    /// <summary>
    /// 获取或设置Header的值
    /// </summary>
    public object Header{
        get { return (object)GetValue(HeaderProperty); }
        set { SetValue(HeaderProperty, value); }
    }
    /// <summary>
    /// 获取或设置AttachedElement的值
    /// </summary>
    public FrameworkElement AttachedElement{
        get { return (FrameworkElement)GetValue(AttachedElementProperty); }
        set { SetValue(AttachedElementProperty, value); }
    }
    private bool _isPointerEntered;
    protected virtual void OnAttachedElementChanged(FrameworkElement oldValue, FrameworkElement newValue){
        if (oldValue != null)
        {
            oldValue.PointerEntered -= OnPointerEntered;
            oldValue.PointerExited -= OnPointerExited;
        }
        if (newValue != null)
        {
            newValue.PointerEntered += OnPointerEntered;
            newValue.PointerExited += OnPointerExited;
        }
    }
    protected virtual void OnHeaderChanged(object oldValue, object newValue){
        UpdateVisualState();
    }
    protected override void OnApplyTemplate(){
        base.OnApplyTemplate();
        UpdateVisualState(false);
    }
    private void OnPointerEntered(object sender, PointerRoutedEventArgs e){
        _isPointerEntered = true;
        UpdateVisualState();
    }
    private void OnPointerExited(object sender, PointerRoutedEventArgs e){
        _isPointerEntered = false;
        UpdateVisualState();
    }
    internal virtual void UpdateVisualState(bool useTransitions = true){
        if (_isPointerEntered)
            VisualStateManager.GoToState(this, PointerOverState, useTransitions);
        else
            VisualStateManager.GoToState(this, NormalState, useTransitions);
        if (Header == null)
            VisualStateManager.GoToState(this, NoHeaderState, useTransitions);
        else
            VisualStateManager.GoToState(this, HasHeaderState, useTransitions);
    }
}

登录后复制

以上就是[UWP 自定义控件]了解模板化控件(6)：使用附加属性的详细内容，更多请关注php中文网其它相关文章！