WPF XAML ControlTemplate bind to Validation Errors

Question

I have the following ControlTemplate and Style. The Textbox looks like this.

<TextBox Style="{StaticResource TextBoxRoundedCornerStyle}">

I would like the 's tooltip to list all the validation errors for the textbox control. Could someone please help and tell me what I am doing wrong here? I probably have the bindings wrong, but I am not able to figure it out.

Both the following control template and the style is located in a separate resource file. The reason why the validation template is empty in the style is when animating the border I otherwise got two red borders and the update from my validator seems only to work correct when I make the animation in the controltemplate instead.

    <ControlTemplate x:Key="TextBoxBaseControlTemplateMainScreen" TargetType="{x:Type TextBoxBase}">
    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource MainScreen.TextBox.MouseOver.Background}" SnapsToDevicePixels="True" CornerRadius="3">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
            <Grid x:Name="theGrid" Margin="1,0,2,0" Visibility="Collapsed">
                <Viewbox Stretch="Uniform" Width="12" Height="12"                
                            HorizontalAlignment="Left" 
                            VerticalAlignment="Center"                           >
                    <icons:Failure>
                        <icons:Failure.ToolTip>
                            <ItemsControl>
                                <ItemsControl.ItemsSource>
                                    <Binding RelativeSource="{RelativeSource Self}" Path="(Validation.Errors)"/>
                                </ItemsControl.ItemsSource>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding}" Foreground="Red" FontSize="12"/>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </icons:Failure.ToolTip>
                    </icons:Failure>
                </Viewbox>
            </Grid>
            <AdornedElementPlaceholder Margin="0" x:Name="adorner" />
        </StackPanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ValidationStates">
                <VisualState x:Name="Valid">                        
                </VisualState>
                <VisualState x:Name="InvalidFocused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="theGrid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="theGrid" RepeatBehavior="3x">
                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.28" Value="0.2"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="InvalidUnfocused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="theGrid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="theGrid" RepeatBehavior="3x">
                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.2"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" TargetName="border" Value="0.56"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MainScreen.TextBox.MouseOver.BorderBrush}"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="True">
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MainScreen.TextBox.MouseOver.BorderBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

And a Style that is used by the textbox.

        <Style x:Key="TextBoxRoundedCornerStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Template" Value="{StaticResource TextBoxBaseControlTemplateMainScreen}"/>
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <ControlTemplate.Triggers>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

I solved it using the following code. Only problem now is that sometimes the Validation.Errors is a single string and sometimes a list of strings. I am not sure how to handle both cases in a good way. I will post a separate question about that.

<ControlTemplate x:Key="TextBoxBaseControlTemplateMainScreen" TargetType="{x:Type TextBoxBase}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource MainScreen.TextBox.MouseOver.Background}" SnapsToDevicePixels="True" CornerRadius="3">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                <Grid x:Name="theGrid" Margin="1,0,2,0" Visibility="Collapsed">
                    <Grid.ToolTip>
                        <ItemsControl     
                                      x:Name="ErrorDisplay"                                      
                                      ItemsSource="{TemplateBinding Validation.Errors}"   
                                      DisplayMemberPath="ErrorContent[0]"
                                      Foreground="Red" 
                                      FontSize="12">
                        </ItemsControl>
                    </Grid.ToolTip>
                    <Viewbox Stretch="Uniform" Width="12" Height="12"                
                                HorizontalAlignment="Left" 
                                VerticalAlignment="Center"                           >
                        <icons:Failure/>                        
                    </Viewbox>
                </Grid>
                <AdornedElementPlaceholder Margin="0" x:Name="adorner" />
            </StackPanel>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ValidationStates">
                    <VisualState x:Name="Valid">                        
                    </VisualState>
                    <VisualState x:Name="InvalidFocused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="theGrid">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="theGrid" RepeatBehavior="3x">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.28" Value="0.2"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="InvalidUnfocused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="border">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="theGrid">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="theGrid" RepeatBehavior="3x">
                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.2"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MainScreen.TextBox.MouseOver.BorderBrush}"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="True">
                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MainScreen.TextBox.MouseOver.BorderBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>


    <Style x:Key="TextBoxRoundedCornerStyle" TargetType="{x:Type TextBox}">
        <Setter Property="Template" Value="{StaticResource TextBoxBaseControlTemplateMainScreen}"/>
        <Setter Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <ControlTemplate.Triggers>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>