1. 簡單的HeaderedContentControl 上周五收到反饋，在一個ContentControl的ControlTemplate中放兩個ContentPresenter會出錯。出錯的例子是我以前博客中HeaderedContentControl的代碼，這個控制項是UWP最簡單的控制項之一，它 ...
1. 簡單的HeaderedContentControl
上周五收到反饋，在一個ContentControl的ControlTemplate中放兩個ContentPresenter會出錯。出錯的例子是我以前博客中HeaderedContentControl的代碼，這個控制項是UWP最簡單的控制項之一，它最簡化的實現代碼如下：
public class HeaderedContentControl : ContentControl
{
public HeaderedContentControl()
{
this.DefaultStyleKey = typeof(HeaderedContentControl);
}
public object Header
{
get => (object)GetValue(HeaderProperty);
set => SetValue(HeaderProperty, value);
}
public static readonly DependencyProperty HeaderProperty =
DependencyProperty.Register(nameof(Header), typeof(object), typeof(HeaderedContentControl), new PropertyMetadata(default(object), OnHeaderChanged));
private static void OnHeaderChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
var oldValue = (object)args.OldValue;
var newValue = (object)args.NewValue;
if (oldValue == newValue)
return;
var target = obj as HeaderedContentControl;
target?.OnHeaderChanged(oldValue, newValue);
}
protected virtual void OnHeaderChanged(object oldValue, object newValue)
{
}
}ControlTemplate如下：
<ControlTemplate TargetType="local:HeaderedContentControl">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel>
<ContentPresenter Content="{TemplateBinding Header}"
x:Name="HeaderPresenter" />
<ContentPresenter />
</StackPanel>
</Border>
</ControlTemplate>2. 兩種錯誤
這個控制項運行起來應該沒有錯誤，但如果不按套路地給Header賦值，就會出現重覆的內容：
<local:HeaderedContentControl Content="this is content" />
更奇怪的是，如果這樣用還會報錯：Value does not fall within the expected range.
<local:HeaderedContentControl Header="">
<TextBlock Text="this is content" />
</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可以解決第一個問題，看起來它應該也意識到這裡會產生問題並修複了，那麼看看它是怎麼解決的。
<StackPanel>
<ContentPresenter Content="{TemplateBinding Header}"
x:DeferLoadStrategy="Lazy"
x:Name="HeaderPresenter" />
<ContentPresenter />
</StackPanel>private const string PartHeaderPresenter = "HeaderPresenter";
protected virtual void OnHeaderChanged(object oldValue, object newValue)
{
SetHeaderVisibility();
}
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
SetHeaderVisibility();
}
private void SetHeaderVisibility()
{
if (GetTemplateChild(PartHeaderPresenter) is FrameworkElement headerPresenter)
{
headerPresenter.Visibility = Header != null
? Visibility.Visible
: Visibility.Collapsed;
}
}也就是說HeaderedContentControl的Header等於null時索性就不顯示headerPresenter，所以第一個問題得到瞭解決。但我們再看一次產生第二個問題的XAML:
<local:HeaderedContentControl Header="">
<TextBlock Text="this is content" />
</local:HeaderedContentControl>可以看到Header不是為null，而是一個空字元串，也就是說ContentPresenter把空字元串也和null同樣處理。將SetHeaderVisibility改為這樣就可以解決這個問題：
private void SetHeaderVisibility()
{
if (GetTemplateChild(PartHeaderPresenter) is FrameworkElement headerPresenter)
{
var isEmpty = false;
if (Header is string headerText)
isEmpty = string.IsNullOrEmpty(headerText);
headerPresenter.Visibility = (Header != null && isEmpty == false)
? Visibility.Visible
: Visibility.Collapsed;
}
}4. 結語
為求簡單我還是推薦第一種解決方案，即改用ContentControl的方案，畢竟用到ContentPresenter的地方那麼多，總不能每次都寫一大堆代碼SetXXXVisibility。
順便一提同樣的代碼在WPF完全沒有問題，我總是按著WPF的經驗寫UWP的代碼，偶爾還是會翻車。
話說回來，既然HeaderPresenter總是會被賦值的，那麼x:DeferLoadStrategy="Lazy"這句根本就完全沒起到作用的吧？
5. 參考
WindowsCommunityToolkit_Microsoft.Toolkit.Uwp.UI.Controls
