将 ErrorTemplate 添加到 WPF 用户控件会禁用 TextBox 输入

Posted 2023-03-30

【中文标题】将 ErrorTemplate 添加到 WPF 用户控件会禁用 TextBox 输入

【英文标题】：Adding an ErrorTemplate to a WPF User Control disables TextBox input

【发布时间】：2020-06-26 12:02:49

【问题描述】：

我有一个非常基本的自定义控件，由标签和文本框组成。我已经使用我的控件一段时间了，没有任何问题。

我现在开始为我的应用程序设置样式，并将我的样式放在一个仅包含一个 ResourceDictionary 的 XAML 文件中。我的 UserControl 有以下内容：

<Style TargetType="local:LabelEdit">
    <Setter Property="Background" Value="StaticResource BackgroundBrush" />
    <Setter Property="Foreground" Value="StaticResource ForegroundBrush" />
    <Setter Property="BorderBrush" Value="StaticResource BorderBrush" />

    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel>
                    <AdornedElementPlaceholder />
                    <Image Source="/AJSoft.Controls;component/Resources/Icons/cross.ico" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="Foreground" Value="StaticResource ErrorForegroundBrush" />
            <Setter Property="Background" Value="StaticResource ErrorBackgroundBrush" />
            <Setter Property="BorderBrush" Value="StaticResource ErrorBorderBrush" />
        </Trigger>
    </Style.Triggers>
</Style>

如果我注释掉 Validation.ErrorTemplate 的 Setter，一切都会正常工作。如果 ErrorTemplate 保持不变，则显示叉号（我还没有整理好放置位置，但以后可能会出现......），但我的 UserControl 的 Textbox 组件不显示插入符号或接受键盘输入。我的 Window 中的其余控件按预期工作。

这里有一些屏幕截图，我故意输入了一些错误的文字来显示它的外观。

即使我将那个巨大的图像更改为带有红色小“！”的文本块，也会发生同样的问题。 - 图片只是暂时的效果。

我在做什么导致问题？我是 WPF 中的验证新手...

编辑：显示的图像（大红叉）只是我所做的一个例子。即使我使用与 UserControl 一起显示的小图像，我仍然可以获得相同的效果。

【问题讨论】：

Image 显示在 top of the adorned element 上。

【参考方案1】：

如果您要查看错误模板通常是如何工作的，您会发现它们适用于单个控件。 您在这里遇到的部分问题是您在一个父用户控件中有一个标签和文本框。 如果您随后在用户控件级别应用错误模板，那么它就在其中的所有内容上。标签、文本框、用户控件中的所有内容。

接下来要考虑的是您的错误模板如何最终显示在所有内容之上。发生这种情况是因为您的错误模板在装饰层中生成 UI。这是最重要的（在窗口中）。 将这些加在一起，您会在用户控件的内容之上获得一个大图像。

有过度简化的风险：

你在你的盒子上放了一个顶部，但你现在无法拿到盒子里的东西。

有几种方法可以“解决”这个问题，但它们都涉及一些设计更改或妥协。 也许输入控件顶部的大 X 不是一个好主意。 你可以让它工作。

你可以让你的图片 IsHitTestVisible="False"。 它会在视觉上妨碍您，但您可能会单击文本框并输入。 只是也许没有看到一切。 可能不太理想。

您可以使用数据触发器而不是错误模板在文本框旁边显示十字。 将图像添加到您的用户控件，以便您拥有标签、文本框、CrossImage。 使用 setter 为其添加样式使其默认折叠可见。 当控件出现错误时，使用该样式的触发器显示 CrossImage。

 <Style.Triggers>
    <Trigger Property="Validation.HasError" Value="true">
        <Setter ... />
    </Trigger>
 </Style.Triggers>

您可能会发现使用用户控件上的标签并将其设置为可见/折叠最简单。将图像的可见性与此绑定。

【讨论】：

好的 - 我没有在问题中说清楚一件事。那个大“X”被放置为 SO 的一个易于查看的示例。即使 是一个小十字架并放置在文本框的一侧，也会出现同样的问题......关于你的帖子的其余部分 - 如果它有效，我会试一试并标记答案！