如何将错误气泡消息绑定到 WPF 中的 TextBox？答案

【问题标题】：How could I bind an error bubble message to a TextBox in WPF?如何将错误气泡消息绑定到 WPF 中的 TextBox？
【发布时间】：2020-06-14 19:44:37
【问题描述】：

我正在尝试为文本框制作一个不错的错误消息。文本框：

            <DockPanel DockPanel.Dock="Top">
              <Label Content="Name: "/>
              <TextBox DockPanel.Dock="Top" Text="{Binding Name, ValidatesOnExceptions=True, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource textBoxInError}">
              </TextBox>
            </DockPanel>

我从工具提示开始。文本框的错误样式：

    <!-- Style for the error tooltip for fields -->
    <Style x:Key="textBoxInError" TargetType="TextBox">
      <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
          <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
        </Trigger>
      </Style.Triggers>
    </Style>

这还不够，需要更好的消息。使用此解决方案，在您悬停该字段之前，错误是不可见的：

所以我发现我可以创建另一个节点来接收来自文本框的错误消息：

                <DockPanel DockPanel.Dock="Top">
                  <Label Content="Name: "/>
                  <TextBox DockPanel.Dock="Top" Name="editNodeName" Text="{Binding Name, ValidatesOnExceptions=True, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource textBoxInError}">
                  </TextBox>
                  <TextBlock Text="{Binding (Validation.Errors)[0].ErrorContent, ElementName=editNodeName}" TextWrapping="Wrap"/>
                </DockPanel>

看起来像这样 - 非常丑陋，它以某种方式压缩了文本框：

这是我想要的样机，这不需要鼠标悬停可见：

它不必完全一样，但它不应该压缩复选框或以其他方式侵入表单，并且在没有错误时它不应该是可见的。

我可以在字段旁边浮动错误消息文本吗？也许以某种方式使用绑定将位置绑定到字段的位置？

【问题讨论】：

stackoverflow.com/q/5390895/1506454
@ASh 我不想显示实际的工具提示，但我可以设置一些元素。我也不太明白这个问题的公认答案是什么意思。
WPF Tooltip 不是简单的文本，它是可以设置样式的元素。
Wpf ToolTip Style
它仍然是一个需要鼠标悬停的工具提示。我希望在检测到错误值后立即显示该消息。我在我的问题中澄清了这一点。

标签： c# wpf data-binding

【解决方案1】：

您可以定义一个Validation.ErrorTemplate，其中包含一个保持打开状态的Popup。像这样的：

<Style x:Key="textBoxInError" TargetType="TextBox">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <DockPanel>
                    <Popup IsOpen="True" StaysOpen="True" PlacementTarget="{Binding ElementName=border}" Placement="Right">
                        <Border Background="Yellow" BorderBrush="Black" BorderThickness="1">
                            <TextBlock Text="{Binding [0].ErrorContent}" />
                        </Border>
                    </Popup>
                    <Border x:Name="border" BorderBrush="Red" BorderThickness="1">
                        <AdornedElementPlaceholder />
                    </Border>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
        </Trigger>
    </Style.Triggers>
</Style>

您可能还想查看this answer。

【讨论】：

【解决方案2】：

作为 mm8 的答案的替代方案，您可以将以下内容用作 ControlTemplate 而不是弹出窗口，作为灵感：

<Style x:Key="textBoxInError" TargetType="TextBox">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
    <ControlTemplate>
      <StackPanel Orientation="Vertical">
        <Border CornerRadius="10,10,10,10" Margin="20">
          <Border.Effect>
            <DropShadowEffect Color="#FF474747" />
          </Border.Effect>
          <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="#FFFF99" Offset="0" />
              <GradientStop Color="#FFFF99" Offset="1" />
            </LinearGradientBrush>
          </Border.Background>
          <Grid Name="grid1">
            <TextBlock Text="Your message here" Padding="10" HorizontalAlignment="Center" Name="lblWarningHeader" VerticalAlignment="Top" FontSize="16"/>
          </Grid>
        </Border>
      </StackPanel>
    </ControlTemplate>
</Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
        </Trigger>
    </Style.Triggers>
</Style>

【讨论】：