[UWP]為什么ContentControl的ControlTemplate里放兩個ContentPresenter會出問題(繞口)

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