经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
[UWP]为什么ContentControl的ControlTemplate里放两个ContentPresenter会出问题(绕口)
来源:cnblogs  作者:dino.c  时间:2019/2/26 9:42:02  对本文有异议

1. 简单的HeaderedContentControl

上周五收到反馈,在一个ContentControl的ControlTemplate中放两个ContentPresenter会出错。出错的例子是我以前博客中HeaderedContentControl的代码,这个控件是UWP最简单的控件之一,它最简化的实现代码如下:

  1. public class HeaderedContentControl : ContentControl
  2. {
  3. public HeaderedContentControl()
  4. {
  5. this.DefaultStyleKey = typeof(HeaderedContentControl);
  6. }
  7. public object Header
  8. {
  9. get => (object)GetValue(HeaderProperty);
  10. set => SetValue(HeaderProperty, value);
  11. }
  12. public static readonly DependencyProperty HeaderProperty =
  13. DependencyProperty.Register(nameof(Header), typeof(object), typeof(HeaderedContentControl), new PropertyMetadata(default(object), OnHeaderChanged));
  14. private static void OnHeaderChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
  15. {
  16. var oldValue = (object)args.OldValue;
  17. var newValue = (object)args.NewValue;
  18. if (oldValue == newValue)
  19. return;
  20. var target = obj as HeaderedContentControl;
  21. target?.OnHeaderChanged(oldValue, newValue);
  22. }
  23. protected virtual void OnHeaderChanged(object oldValue, object newValue)
  24. {
  25. }
  26. }

ControlTemplate如下:

  1. <ControlTemplate TargetType="local:HeaderedContentControl">
  2. <Border Background="{TemplateBinding Background}"
  3. BorderBrush="{TemplateBinding BorderBrush}"
  4. BorderThickness="{TemplateBinding BorderThickness}">
  5. <StackPanel>
  6. <ContentPresenter Content="{TemplateBinding Header}"
  7. x:Name="HeaderPresenter" />
  8. <ContentPresenter />
  9. </StackPanel>
  10. </Border>
  11. </ControlTemplate>

2. 两种错误

这个控件运行起来应该没有错误,但如果不按套路地给Header赋值,就会出现重复的内容:

  1. <local:HeaderedContentControl Content="this is content" />

更奇怪的是,如果这样用还会报错:Value does not fall within the expected range.

  1. <local:HeaderedContentControl Header="">
  2. <TextBlock Text="this is content" />
  3. </local:HeaderedContentControl>

更奇怪的是相同的代码在WPF完全没有问题。看到这两个奇怪的错误,我马上根据多年的经验知道了错误原因。

3. 问题产生的原因及解决方案

第一种错误,看起来是ContentControl将Content赋值给ControlTemplate的所有ContentPresenter了。而第二种错误印证了我这个猜测,因为Value does not fall within the expected range.这个错误(中文是值不再预期范围中)在我的印象中只会出现在同一个UIElement被重复添加到VisualTree中的情况。

虽然没看过ContentControl的源码,但我了解到如果ContentPresenter在ContentControl的ControlTemplate中,当ContentPresenter的Content为Null时会默认将自己的Content的绑定到ContentControl的Content。基于这个猜测我想到几个解决方案。

3.1 使用ContentControl

使用ContentControl代替Header的ContentPresenter是最简单直接的解决方案。我常常用ContentControl代替ContentPresenter,这没什么不好的。(因为在WPF中ContentPresenter比ContentControl少了一大堆文本相关的属性,所以在WPF常常这么做。)

经过测试这个方案能完美解决所有问题,唯一不足是Header用ContentControl,Content用ContentPresenter,破坏了对称的美感总感觉不太舒服。

3.2 直接使用WindowsCommunityToolkit的HeaderedContentControl

WindowsCommunityToolkit中也提供了HeaderedContentControl,以前我也写过一篇文章吐槽过这个控件。吐槽归吐槽,我对微软还是很信任的,直接使用这个HeaderedContentControl应该不会有什么问题。

事实证明微软提供的HeaderedContentControl可以解决第一个问题,解决不了第二个问题。摸摸我的1020,我对微软的好感度又下降了。(顺便一提黄色1020真是超漂亮)

3.3 改造WindowsCommunityToolkit的HeaderedContentControl

既然WindowsCommunityToolkit的HeaderedContentControl可以解决第一个问题,看起来它应该也意识到这里会产生问题并修复了,那么看看它是怎么解决的。

  1. <StackPanel>
  2. <ContentPresenter Content="{TemplateBinding Header}"
  3. x:DeferLoadStrategy="Lazy"
  4. x:Name="HeaderPresenter" />
  5. <ContentPresenter />
  6. </StackPanel>
  1. private const string PartHeaderPresenter = "HeaderPresenter";
  2. protected virtual void OnHeaderChanged(object oldValue, object newValue)
  3. {
  4. SetHeaderVisibility();
  5. }
  6. protected override void OnApplyTemplate()
  7. {
  8. base.OnApplyTemplate();
  9. SetHeaderVisibility();
  10. }
  11. private void SetHeaderVisibility()
  12. {
  13. if (GetTemplateChild(PartHeaderPresenter) is FrameworkElement headerPresenter)
  14. {
  15. headerPresenter.Visibility = Header != null
  16. ? Visibility.Visible
  17. : Visibility.Collapsed;
  18. }
  19. }

也就是说HeaderedContentControl的Header等于null时索性就不显示headerPresenter,所以第一个问题得到了解决。但我们再看一次产生第二个问题的XAML:

  1. <local:HeaderedContentControl Header="">
  2. <TextBlock Text="this is content" />
  3. </local:HeaderedContentControl>

可以看到Header不是为null,而是一个空字符串,也就是说ContentPresenter把空字符串也和null同样处理。将SetHeaderVisibility改为这样就可以解决这个问题:

  1. private void SetHeaderVisibility()
  2. {
  3. if (GetTemplateChild(PartHeaderPresenter) is FrameworkElement headerPresenter)
  4. {
  5. var isEmpty = false;
  6. if (Header is string headerText)
  7. isEmpty = string.IsNullOrEmpty(headerText);
  8. headerPresenter.Visibility = (Header != null && isEmpty == false)
  9. ? Visibility.Visible
  10. : Visibility.Collapsed;
  11. }
  12. }

4. 结语

为求简单我还是推荐第一种解决方案,即改用ContentControl的方案,毕竟用到ContentPresenter的地方那么多,总不能每次都写一大堆代码SetXXXVisibility。

顺便一提同样的代码在WPF完全没有问题,我总是按着WPF的经验写UWP的代码,偶尔还是会翻车。

话说回来,既然HeaderPresenter总是会被赋值的,那么x:DeferLoadStrategy="Lazy"这句根本就完全没起到作用的吧?

5. 参考

WindowsCommunityToolkit_Microsoft.Toolkit.Uwp.UI.Controls

原文链接:http://www.cnblogs.com/dino623/p/ContentPresenterInControlTemplate.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号