WPF中TextBox错误图标Tooltip无文本显示问题求助

我为TextBox定义了默认样式，要求验证错误时，鼠标悬停输入框或错误图标都显示相同样式的Tooltip。目前输入框的Tooltip能正常显示错误文本，但悬停错误图标时Tooltip要么无内容，要么只能显示默认样式的文本，不符合需求。

原样式代码 #

<Style TargetType="TextBox">
    <Setter Property="Margin" Value="0 3"></Setter>
    <Setter Property="Padding" Value="3"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <DockPanel>
                    <Image 
                        DockPanel.Dock="Right"
                        Width="15" Height="15"
                        Margin="-25,0,0,0"
                        Source="/Resources/error.png">
                        <Image.ToolTip>
                            <ToolTip DataContext="{Binding ElementName=myControl, Path=AdornedElement.(Validation.Errors)/ErrorContent}"
                                Foreground="White"
                                Background="Red">
                            </ToolTip>
                        </Image.ToolTip>
                    </Image>
                    <Border BorderBrush="Red" BorderThickness="1" CornerRadius="2">
                        <AdornedElementPlaceholder Name="myControl"/>
                    </Border>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="ToolTip">
                <Setter.Value>
                    <ToolTip DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget}"
                             Foreground="White"
                             Background="Red">
                        <ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}" DisplayMemberPath="ErrorContent" />
                    </ToolTip>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

尝试过的绑定方式 #

1. 直接在Tooltip内绑定Validation.Errors，仍无文本：

<Image 
    DockPanel.Dock="Right"
    Width="15" Height="15"
    Margin="-25,0,0,0"
    Source="/Resources/error.png">
    <Image.ToolTip>
        <ToolTip
            Foreground="White"
            Background="Red">
            <ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}" DisplayMemberPath="ErrorContent" />
        </ToolTip>
    </Image.ToolTip>
</Image>

2. 直接为Image设置ToolTip属性，可显示文本但样式为默认：

<Image 
    DockPanel.Dock="Right"
    ToolTip="{Binding ElementName=myControl, Path=AdornedElement.(Validation.Errors)/ErrorContent}"
    Width="15" Height="15"
    Margin="-25,0,0,0"
    Source="/Resources/error.png">
</Image>

问题根源 #

1. 第一种绑定失败：ErrorTemplate中的Image默认DataContext不是TextBox本身，(Validation.Errors)是TextBox的附加属性，直接绑定找不到数据源。
2. 第二种绑定样式默认：直接给Image的ToolTip属性绑定文本时，WPF会自动生成默认ToolTip控件，不会应用自定义样式。
3. 原代码绑定错误：原代码给ToolTip的DataContext绑定了单个错误内容，但ToolTip内部没有任何控件展示该内容，导致Tooltip为空。

解决方案 #

方案1：直接修正ErrorTemplate中的Tooltip绑定 #

让ToolTip通过ElementName绑定到AdornedElementPlaceholder，获取TextBox的Validation.Errors集合，并用ItemsControl展示内容，和输入框Tooltip保持一致：

<Setter Property="Validation.ErrorTemplate">
    <Setter.Value>
        <ControlTemplate>
            <DockPanel>
                <Image 
                    DockPanel.Dock="Right"
                    Width="15" Height="15"
                    Margin="-25,0,0,0"
                    Source="/Resources/error.png">
                    <Image.ToolTip>
                        <ToolTip Foreground="White" Background="Red">
                            <ItemsControl ItemsSource="{Binding ElementName=myControl, Path=AdornedElement.(Validation.Errors)}" 
                                          DisplayMemberPath="ErrorContent" />
                        </ToolTip>
                    </Image.ToolTip>
                </Image>
                <Border BorderBrush="Red" BorderThickness="1" CornerRadius="2">
                    <AdornedElementPlaceholder Name="myControl"/>
                </Border>
            </DockPanel>
        </ControlTemplate>
    </Setter.Value>
</Setter>

方案2：抽离共用Tooltip样式（推荐） #

把错误Tooltip的样式抽成资源，让输入框和错误图标共用，避免重复代码：

<!-- 定义共用的错误Tooltip样式 -->
<Style x:Key="ErrorToolTipStyle" TargetType="ToolTip">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background" Value="Red"/>
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding}" DisplayMemberPath="ErrorContent"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- TextBox样式 -->
<Style TargetType="TextBox">
    <Setter Property="Margin" Value="0 3"></Setter>
    <Setter Property="Padding" Value="3"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <DockPanel>
                    <Image 
                        DockPanel.Dock="Right"
                        Width="15" Height="15"
                        Margin="-25,0,0,0"
                        Source="/Resources/error.png">
                        <Image.ToolTip>
                            <ToolTip Style="{StaticResource ErrorToolTipStyle}"
                                     DataContext="{Binding ElementName=myControl, Path=AdornedElement.(Validation.Errors)}"/>
                        </Image.ToolTip>
                    </Image>
                    <Border BorderBrush="Red" BorderThickness="1" CornerRadius="2">
                        <AdornedElementPlaceholder Name="myControl"/>
                    </Border>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="ToolTip">
                <Setter.Value>
                    <ToolTip Style="{StaticResource ErrorToolTipStyle}"
                             DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget.(Validation.Errors)}"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

内容的提问来源于stack exchange，提问作者Siew Fai Hoy