为了实现统一的外观和提升用户体验，我们对之前的contentview2进行了优化，将其header部分独立出来，创建了一个可复用的控件headerview。这个新控件继承自control，并引入了header和attachelement属性。通过将headerview嵌入到其他控件的controltemplate中，取代原有的headercontentpresenter，我们成功统一了控件的外观。在controltemplate中的使用方式如下：
通过使用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对象。代码如下：
////// 从指定元素获取 ExtendHeader 依赖项属性的值。/// /// The element from which the property value is read./// ExtendHeader 依赖项属性的值public static object GetExtendHeader(DependencyObject obj){ return (object)obj.GetValue(ExtendHeaderProperty);}////// 将 ExtendHeader 依赖项属性的值设置为指定元素。/// /// 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);}////// 标识 ExtendHeader 依赖项属性。/// 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驱动的智能化图表创作平台
305 查看详情 
同样，这个附加属性也可以在ControlTemplate中使用。例如，对于没有Header属性的ListBox，可以在其ControlTemplate中的HeaderView上绑定到HeaderView.ExtendHeader：
![[UWP 自定义控件]了解模板化控件(6)：使用附加属性](https://www.chuangxiangniao.com/wp-content/uploads/2025/11/175919622491546.jpg)
完整的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"; /// /// 从指定元素获取 ExtendHeader 依赖项属性的值。 /// /// The element from which the property value is read. /// ExtendHeader 依赖项属性的值 public static object GetExtendHeader(DependencyObject obj){ return (object)obj.GetValue(ExtendHeaderProperty); } /// /// 将 ExtendHeader 依赖项属性的值设置为指定元素。 /// /// 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); } /// /// 标识 ExtendHeader 依赖项属性。 /// 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); } /// /// 从指定元素获取 Header 依赖项属性的值。 /// /// The element from which the property value is read. /// Header 依赖项属性的值 public static object GetHeader(DependencyObject obj){ return (object)obj.GetValue(HeaderProperty); } /// /// 将 Header 依赖项属性的值设置为指定元素。 /// /// 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); } /// /// 标识 Header 依赖属性。 /// 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); } } /// /// 标识 AttachedElement 依赖属性。 /// 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); } /// /// 获取或设置Header的值 /// public object Header{ get { return (object)GetValue(HeaderProperty); } set { SetValue(HeaderProperty, value); } } /// /// 获取或设置AttachedElement的值 /// 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)：使用附加属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/744649.html
微信扫一扫 
支付宝扫一扫 
