显示错误，控制后向下移动 [英] Displaying Errors, Having Controls After to Move Downwards

问题描述

所以我试图在输入无效时显示一条消息，假设我想要除 ToolTip 以外的其他内容，该内容会一直保留到错误得到纠正.我尝试使用 ErrorTemplate

So I am trying to have a message displayed when the input is invalid, suppose I want something other than a ToolTip, something that stays until the error is corrected. I tried having an ErrorTemplate

<Style TargetType="{x:Type TextBox}">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel>
                    <Border BorderBrush="Red" BorderThickness="1">
                        <AdornedElementPlaceholder x:Name="adornedErrorElement" />
                    </Border>
                    <Label Background="Red" Foreground="White" FontSize="9" Content="{Binding ElementName=adornedErrorElement, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<StackPanel Margin="20">
    <TextBlock Text="Name" />
    <TextBox Text="{Binding Name}" />

    <TextBlock Text="Email" />
    <TextBox Text="{Binding Path=Email, ValidatesOnDataErrors=True}" />

    <Button Content="Submit" />
</StackPanel>

我明白

标签覆盖其后元素的位置.我怎样才能让它像堆栈面板中的另一个元素一样工作?

Where the label overlays elements after it. How can I have it such that it works just like another element in the stackpanel?

现在，我想更进一步，为错误标签设置动画.我正在考虑遵循@robertos 回答的 VSM.我尝试在 Blend 中实现.我遇到的几个问题.我试过了

Now, I want to go 1 step further and animate the error label up and down. I am considering VSM following @robertos answer. I tried implementing in in Blend. A few problems I faced. I tried

<ControlTemplate TargetType="{x:Type TextBox}">
    <StackPanel Orientation="Vertical">
        <Microsoft_Windows_Themes:ListBoxChrome ...>
        <VisualStateManager.VisualStateGroups>
                ...
        </VisualStateManager.VisualStateGroups>
        <ScrollViewer ... />
        </Microsoft_Windows_Themes:ListBoxChrome>
        <Label Content="Error Here" />
    </StackPanel>
</ControlTemplate>

然后我无法访问 Blend 中的 VisualStates.然后我尝试了

Then I lost access to VisualStates in Blend. Then I tried

<Microsoft_Windows_Themes:ListBoxChrome>
    <StackPanel>
        <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="2,0,-2,0"/>
    <TextBlock x:Name="textBlock" Background="Red" Foreground="White" FontWeight="Bold" Text="Hello" Visibility="Collapsed" />
    </StackPanel>
</Microsoft_Windows_Themes:ListBoxChrome>

不理想，因为 StackPanel 位于边界内.我对动画的尝试看起来也很奇怪

Not ideal as the StackPanel is within the border. Also my attempts at animation looks just weird

http://screenr.com/byk

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0' width='560' height='345'>http://screenr.com/Content/assets/screenr_1116090935.swf' >http://screenr.com/Content/assets/screenr_1116090935.swf' flashvars='i=130553' allowFullScreen='true' width='560' height='345' pluginspage='http://www.macromedia.com/go/getflashplayer' >

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0' width='560' height='345'>http://screenr.com/Content/assets/screenr_1116090935.swf' >http://screenr.com/Content/assets/screenr_1116090935.swf' flashvars='i=130553' allowFullScreen='true' width='560' height='345' pluginspage='http://www.macromedia.com/go/getflashplayer' >

第一，我必须隐藏标签而不是折叠动画只是不透明度.我希望标签看起来像从文本框中出来

1st I must make the label hidden instead of collapsed the animate just the opacity. I want the label to appear like its coming out from the textbox

推荐答案

该元素必须是 VisualTree 中同一 StackPanel 的一部分，而您注意到的 Validation.ErrorTemplate 并非如此.执行此操作的一种方法是重新模板化文本框并为折叠错误标签腾出位置，该标签将在 Validation.HasError 上变为可见.您需要添加对 PresentationFramework.Aero 的引用.

The element would have to be a part of the same StackPanel in the VisualTree which is not the case with the Validation.ErrorTemplate as you noticed. One way to do this would be to retemplate the TextBox and make place for a Collapsed error Label which will turn visible on Validation.HasError. You'll need to add a reference to PresentationFramework.Aero.

xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

XML

<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" StartPoint="0,0" MappingMode="Absolute">
    <GradientStop Color="#ABADB3" Offset="0.05"/>
    <GradientStop Color="#E2E3EA" Offset="0.07"/>
    <GradientStop Color="#E3E9EF" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="LabelValidationTextBox" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <StackPanel Orientation="Vertical">
                    <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}">
                        <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Microsoft_Windows_Themes:ListBoxChrome>
                    <Label StackPanel.ZIndex="-1" Name="errorLabel" Height="22" Margin="0,-22,0,0" Background="Red" Foreground="White" FontSize="9" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Validation.Errors)[0].ErrorContent}" />
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="Validation.HasError" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard TargetName="errorLabel" TargetProperty="Margin">
                                    <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Margin">
                                        <SplineThicknessKeyFrame KeyTime="0:0:0.0" Value="0,-22,0,0"/>
                                        <SplineThicknessKeyFrame KeyTime="0:0:0.5" Value="0,0,0,0"/>
                                    </ThicknessAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard TargetName="errorLabel" TargetProperty="Margin">
                                    <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Margin">
                                        <SplineThicknessKeyFrame KeyTime="0:0:0.0" Value="0,0,0,0"/>
                                        <SplineThicknessKeyFrame KeyTime="0:0:0.5" Value="0,-22,0,0"/>
                                    </ThicknessAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

更新

添加了标签的边距动画.当 Validation.HasError 为 True 时它会滑出"TextBox，当 Validation.HasError 为 False 时它会滑回"TextBox.

Added Margin animation of the Label. It will "slide out" of the TextBox when Validation.HasError is True and "slide back in" to the TextBox when Validation.HasError is False.

这篇关于显示错误，控制后向下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！