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。