自定义HeaderTemplate中Header文本绑定失败问题求助

自定义HeaderTemplate时，使用<TextBlock Text="{Binding}" />无法显示设置的Header文本"Name"，TextBlock要么不显示要么无内容。

原代码 #

XAML代码 #

<TextBox x:Name="NameTextBox" Header="Name" PlaceholderText="Enter Name" PlaceholderForeground="Gray"  IsColorFontEnabled="True" Text="{x:Bind ViewModel.Supplier.Name, Mode=TwoWay}">
    <TextBox.HeaderTemplate >
        <DataTemplate x:DataType="models:Supplier">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding}" Foreground="Red" HorizontalAlignment="Left" />
            <SymbolIcon Symbol="ReportHacked" Foreground="Red" Visibility="{x:Bind HasErrors, Mode=OneWay}" HorizontalAlignment="Right" Margin="0 4">
                <ToolTipService.ToolTip>
                    <TextBlock Text="{x:Bind Errors, Mode=OneWay}" Foreground="Red" />
                </ToolTipService.ToolTip>
            </SymbolIcon>
            </StackPanel>
        </DataTemplate>
    </TextBox.HeaderTemplate>
</TextBox>

ViewModel代码 #

public partial class SupplierViewModel: ObservableValidator
{
    RecipeDBContext context;

    private Supplier _supplier = new Supplier();
    public Supplier Supplier => _supplier;

    [ObservableProperty]
    private ObservableCollection<Supplier> _suppliers;
}

Model代码 #

public partial class Supplier: ObservableValidator
{
    public int Id { get; set; }
    
    [ObservableProperty]
    [NotifyDataErrorInfo]
    [Required(ErrorMessage = "Name is Required")]
    [MinLength(2, ErrorMessage = "Name should be longer than one character")]
    private string _name = string.Empty;            
}

解决方法 #

1. 修正HeaderTemplate的数据上下文 #

TextBox.HeaderTemplate默认的DataContext是你设置的Header="Name"字符串，但你给DataTemplate指定了x:DataType="models:Supplier"，这会强制将数据上下文视为Supplier类型，字符串无法转换为该类型，导致{Binding}无有效数据。

解决：移除x:DataType="models:Supplier"，让{Binding}直接绑定到Header的字符串值：

<TextBox.HeaderTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding}" Foreground="Red" HorizontalAlignment="Left" />
            <!-- 其他控件 -->
        </StackPanel>
    </DataTemplate>
</TextBox.HeaderTemplate>

2. 修正错误图标的绑定路径 #

移除x:DataType后，HeaderTemplate的DataContext是Header字符串，无法直接绑定Supplier的HasErrors和Errors，需要通过RelativeSource找到父级TextBox，绑定到它的DataContext中的Supplier对象：

<SymbolIcon Symbol="ReportHacked" Foreground="Red" 
            Visibility="{Binding DataContext.Supplier.HasErrors, RelativeSource={RelativeSource AncestorType=TextBox}, Mode=OneWay}" 
            HorizontalAlignment="Right" Margin="0 4">
    <ToolTipService.ToolTip>
        <!-- 绑定到Name属性的第一个错误信息 -->
        <TextBlock Text="{Binding DataContext.Supplier.Errors[Name][0], RelativeSource={RelativeSource AncestorType=TextBox}, Mode=OneWay}" Foreground="Red" />
    </ToolTipService.ToolTip>
</SymbolIcon>

3. 完整修正后的XAML #

<TextBox x:Name="NameTextBox" Header="Name" PlaceholderText="Enter Name" PlaceholderForeground="Gray"  IsColorFontEnabled="True" Text="{x:Bind ViewModel.Supplier.Name, Mode=TwoWay}">
    <TextBox.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding}" Foreground="Red" HorizontalAlignment="Left" />
                <SymbolIcon Symbol="ReportHacked" Foreground="Red" 
                            Visibility="{Binding DataContext.Supplier.HasErrors, RelativeSource={RelativeSource AncestorType=TextBox}, Mode=OneWay}" 
                            HorizontalAlignment="Right" Margin="0 4">
                    <ToolTipService.ToolTip>
                        <TextBlock Text="{Binding DataContext.Supplier.Errors[Name][0], RelativeSource={RelativeSource AncestorType=TextBox}, Mode=OneWay}" Foreground="Red" />
                    </ToolTipService.ToolTip>
                </SymbolIcon>
            </StackPanel>
        </DataTemplate>
    </TextBox.HeaderTemplate>
</TextBox>

内容的提问来源于stack exchange，提问作者Nuvolari