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

。