如何避免 WPF 验证中的错误图标与其他元素重叠答案

【问题标题】：How to avoid error icon from WPF validation overlapping other elements如何避免 WPF 验证中的错误图标与其他元素重叠
【发布时间】：2017-06-13 01:43:08
【问题描述】：

我正在开发 WPF 应用程序并希望实现验证。为了显示错误消息等。我正在使用 TextBox 的样式：

    <Style TargetType="{x:Type TextBox}">
        <Setter Property="Height"
                Value="25"/>
        <Setter Property="VerticalAlignment"
                Value="Top"/>
        <Setter Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <DockPanel LastChildFill="true">
                        <Border Background="Red"
                                DockPanel.Dock="right"
                                Margin="5,0,0,0"
                                Width="20"
                                Height="20"
                                CornerRadius="10"
                                ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                            <TextBlock Text="!"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="Center"
                                       FontWeight="Bold"
                                       Foreground="White">
                            </TextBlock>
                        </Border>
                        <AdornedElementPlaceholder Name="customAdorner"
                                                   VerticalAlignment="Center" >
                            <Border BorderBrush="Red"
                                    BorderThickness="1" />
                        </AdornedElementPlaceholder>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <!--Additional style trigger for changing the background color of the textbox-->
        <Style.Triggers>
            <Trigger Property="Validation.HasError"
                     Value="true">
                <Setter Property="Background"
                        Value="LightPink"/>
            </Trigger>
        </Style.Triggers>
    </Style>

当我的一个文本框出现错误时，文本框会出现红色边框，右侧会出现一个带有白色“！”的红点。出现。现在的问题是右边的红点与相邻元素重叠。有没有办法避免这种事情？

您可以从这里下载一个示例： WPF validation example

然后选择项目“Validation_ValidationRule”作为启动项目。

提前致谢！

【问题讨论】：

标签： c# css wpf xaml

【解决方案1】：

我已经改变了你的 Window.Resources

   <Window.Resources>


    <Style x:Key="myErrorTemplate" TargetType="Control">

        <Setter Property="Validation.ErrorTemplate">

            <Setter.Value>

                <ControlTemplate>

                    <DockPanel LastChildFill="True">

                        <Ellipse DockPanel.Dock="Right"

                             ToolTip="{Binding ElementName=myTextbox,

                                 Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"

                             Width="15" Height="15"

                             Margin="-25,0,0,0"

                             StrokeThickness="1" Fill="Red" >

                            <Ellipse.Stroke>

                                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                                    <GradientStop Color="#FFFA0404" Offset="0"/>

                                    <GradientStop Color="#FFC9C7C7" Offset="1"/>

                                </LinearGradientBrush>

                            </Ellipse.Stroke>



                        </Ellipse>

                        <TextBlock DockPanel.Dock="Right"

                            ToolTip="{Binding ElementName=myControl,

                                 Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"

                            Foreground="White"

                            FontSize="11pt"

                            Margin="-15,5,0,0" FontWeight="Bold">!


                        </TextBlock>

                        <Border BorderBrush="Red" BorderThickness="1">

                            <AdornedElementPlaceholder Name="myControl"/>

                        </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>

    <Style TargetType="TextBox" BasedOn="{StaticResource myErrorTemplate}" />

    <Style TargetType="CheckBox" BasedOn="{StaticResource myErrorTemplate}" />

    <Style TargetType="ComboBox" BasedOn="{StaticResource myErrorTemplate}" />

</Window.Resources>

尝试根据您的需要进行调整

【讨论】：

非常感谢帕维尔。我使用 WPF 已有八年了，但仍有一些新的发现。