Error display, controls after moving down

Question

So, I'm trying to show a message when the input is invalid, suppose I want something other than ToolTip , which remains until the error is fixed. I tried to have 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> 

I get

Where the inscription imposes elements on it after it. How can I use it in such a way that it works exactly like another element on the stack?

UPDATE: using VSM

Now I want to take another step and animate the shortcut of errors up and down. I review VSM after @robertos answer. I tried to embed in Blend. A few problems that I encountered. 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> 

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> 

Not ideal as the StackPanel is inside the border. Also my animation attempts look 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 '>

1st. I have to make the shortcut hidden instead of minimizing the animated opacity only. I want the label to appear as its exit from the text box.

Answer 1

The item must be part of the same StackPanel in VisualTree, which is not a valid Validation.ErrorTemplate, as you noticed. One way to do this is to rewind the TextBox and replace the shortcut with the Collapsed error, which will become visible in Validation.HasError. You need to add a link to PresentationFramework.Aero.

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

Xaml

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

Update

Added marginal tag animation. It will “slip” out of the TextBox when Validation.HasError is True and will “roll back” to the TextBox if Validation.HasError is False.

Answer 2

Instead of using ErrorTemplate, you can use the visual state manager and configure an invalid state. By doing this, in addition to being able to integrate your changes into the actual control (which affects the layout), you can also easily change the animated state changes.

If you need further guidance on visual states, feel free to ask.