WPF-Binding問題-模闆樣式使用Binding TemplatedParent與TemplateBinding差別

一、問題場景

在定義控件模闆中，經常使用到

Binding

和

TemplateBinding

，有時候，在使用

TemplateBinding

進行屬性綁定時，會存在無效狀況，這兩類寫法，又存在什麼差別，案例

xaml

代碼如下：

<ControlTemplate x:Key="ChatItemTmp" TargetType="{x:Type ListBoxItem}">
    <Border x:Name="Bg" Padding="20,10" Background="{TemplateBinding Background}">
        <DockPanel>
            <Ellipse Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True">
                <Ellipse.Fill>
                    <!--此處必須使用Binding RelativeSource TemplatedParent-->
                    <ImageBrush ImageSource="{Binding Path=(custom:MainWindow.HeaderPic),RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                </Ellipse.Fill>
            </Ellipse>
            <StackPanel Margin="10,10,0,0">
                <!--使用Binding RelativeSource TemplatedParent-->
                <TextBlock Text="{Binding Path=(custom:MainWindow.HeaderName),RelativeSource={RelativeSource Mode=TemplatedParent}}" FontSize="14" Foreground="#eeeeef"></TextBlock>
                <!--使用TemplateBinding-->
                <TextBlock Text="{TemplateBinding custom:MainWindow.HeaderName}" FontSize="14" Foreground="#eeeeef"></TextBlock>
                
                <TextBlock Text="{TemplateBinding custom:MainWindow.LastChat}" FontSize="10" Margin="0,5" Foreground="#929394"></TextBlock>
            </StackPanel>
        </DockPanel>
    </Border>
</ControlTemplate>

<Style x:Key="ChatListItem" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template" Value="{StaticResource ChatItemTmp}"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="custom:MainWindow.HeaderName" Value="{Binding Name}"/>
    <Setter Property="custom:MainWindow.HeaderPic" Value="{Binding PicUrl}"/>
    <Setter Property="custom:MainWindow.LastChat" Value="{Binding LastContent}"/>
</Style>
           

運作效果如下：

二、排查分析

從案例中，經過測試發現，在

ImageBrush

中，屬性

ImageSource

使用

TemplateBinding

進行模闆父級屬性值綁定時，無法将字元串轉換為其他類型。嘗試如下：

将節點替換

Ellipse

替換為

Image

：

<!--<Ellipse Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True">
    <Ellipse.Fill>
        <!--此處必須使用Binding RelativeSource TemplatedParent-->
        <!--<ImageBrush ImageSource="{Binding Path=(custom:MainWindow.HeaderPic),RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
    </Ellipse.Fill>
</Ellipse>-->
<Image Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True"
                           Source="{Binding Path=(custom:MainWindow.HeaderPic),RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
           

運作效果如下：

将

{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}

替換為

TemplateBinding

，代碼如下：

<!--<Image Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True"
                           Source="{Binding Path=(custom:MainWindow.HeaderPic),RelativeSource={RelativeSource Mode=TemplatedParent}}"/>-->
<Image Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True"
                           Source="{TemplateBinding custom:MainWindow.HeaderPic}"/>
           

運作效果如下：

由于

TemplateBinding

無法進行字元轉類型，是以可以考慮通過自定義實作單值轉換器（

IValueConverter

），将對應資料類型進行轉換為特定類型結果。

自定義一個轉換器類

StringToImageConverter

，建構内容如下：

public class StringToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!string.IsNullOrEmpty(value?.ToString()))
        {
            return new BitmapImage(new Uri(value.ToString(),UriKind.Absolute));
        }

        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}
           

xaml

中，建立一個靜态資源，操作如下：

圖檔資源采用

Pack Uri

絕對路徑方式查找資源：

pack://application:,,,/WPFDay2;Component/grile.png
           

頂部引入轉換器所屬命名空間：

xmlns:lib="clr-namespace:WPFDayLib;assembly=WPFDayLib"
           

添加資源：

<lib:StringToImageConverter x:Key="StringToImageConverter"/>
           

使用轉換器：

<Image Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True"
                           Source="{TemplateBinding custom:MainWindow.HeaderPic,Converter={StaticResource StringToImageConverter}}"/>
           

運作效果如下：

還是想的太簡單，将轉換器添加到原始

xaml

中，運作後仍然無法顯示圖檔，同時發現，斷點不會進入單值轉換器，問題一度陷入死胡同。

<Ellipse Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True">
    <Ellipse.Fill>
        <!--此處必須使用Binding RelativeSource TemplatedParent-->
        <!--<ImageBrush ImageSource="{Binding Path=(custom:MainWindow.HeaderPic),RelativeSource={RelativeSource Mode=TemplatedParent}}"/>-->
        <ImageBrush ImageSource="{TemplateBinding custom:MainWindow.HeaderPic,Converter={StaticResource StringToImageConverter}}"/>
    </Ellipse.Fill>
</Ellipse>
           

繼續查找官方資料，從https://docs.microsoft.com/zh-cn/dotnet/desktop/wpf/advanced/relativesource-markupextension?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-5.0 中，檢視到如下内容：

{RelativeSource TemplatedParent}

綁定用法是一種關鍵技術，它解決了控件的

UI

和控件邏輯分離的更大概念。 這可以實作從模闆定義内綁定到模闆化父級（在其中應用模闆的運作時對象執行個體）。 在這種情況下 ，TemplateBinding 标記 擴充實際上是以下綁定表達式的簡寫形式

{Binding RelativeSource={RelativeSource TemplatedParent}}

，

{RelativeSource TemplatedParent}

或

TemplateBinding

用法僅在定義模闆的

XAML

中有效。

尋求萬能的群友幫助，檢視到對應源碼，本質上

TemplateBinding

需要轉換為

Binding

對象，并不是包含所有

Binding

支援的方式，

TemplateBinding

都能夠保留，包括将字元轉化為特定類型。

<Image Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True"
       Source="{Binding Path=(custom:MainWindow.HeaderPic),RelativeSource={RelativeSource Mode=TemplatedParent}}"/>

<Image Width="44" Height="44" DockPanel.Dock="Left" ClipToBounds="True" SnapsToDevicePixels="True"
       Source="{TemplateBinding custom:MainWindow.HeaderPic,Converter={StaticResource StringToImageConverter}}"/>
           

三、解決方案

在模闆定義内綁定到模闆化父級，

TemplateBinding

轉換為

Binding

時，僅僅保留了其

Binding

對應的基本功能，對于負責類型的轉換，不在

TemplateBinding

支援的範圍内，故而，一旦涉及到模闆中，字元類型轉其他類型時，建議使用

Binding TempalteParent

進行處理，避免直接使用

閹割版

>

TemplateBinding

。