WPF error template border dont show all text

Question

I have some error checkings in my WPF application. Error message is shown next to the textbox but when is the textbox at the right side of application, it doesnt show all error text.

The result:

This is mine error template style:

<ControlTemplate x:Key="errorTemplateStyle">
    <StackPanel Orientation="Horizontal">
        <Border BorderThickness="1" BorderBrush="#FFdc000c" CornerRadius="0.7"
            VerticalAlignment="Top">
            <Grid>
                <Polygon x:Name="toolTipCorner"
                     Grid.ZIndex="2"
                     Margin="-1"
                     Points="6,6 6,0 0,0" 
                     Fill="#FFdc000c" 
                     HorizontalAlignment="Right" 
                     VerticalAlignment="Top"
                     IsHitTestVisible="True"/>
                <Polyline Grid.ZIndex="3"
                      Points="7,7 0,0" Margin="-1" HorizontalAlignment="Right" 
                      StrokeThickness="1.5"
                      StrokeEndLineCap="Round"
                      StrokeStartLineCap="Round"
                      Stroke="White"
                      VerticalAlignment="Top"
                      IsHitTestVisible="True"/>
                <AdornedElementPlaceholder x:Name="adorner"/>
            </Grid>
        </Border>
        <Border x:Name="errorBorder" Background="#FFdc000c" Margin="1,0,0,0"
            Opacity="0" CornerRadius="1.5"
            IsHitTestVisible="False"
            MinHeight="24" MaxWidth="267">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="2.25" 
                              Color="Black" 
                              Opacity="0.4"
                              Direction="315"
                              BlurRadius="4"/>
            </Border.Effect>
            <TextBlock Text="{Binding ElementName=adorner,
                                  Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
                   Foreground="White" Margin="8,3,8,3" TextWrapping="Wrap"/>
        </Border>
    </StackPanel>
    <ControlTemplate.Triggers>
        <DataTrigger Value="True">
            <DataTrigger.Binding>
                <MultiBinding Converter="{StaticResource BooleanOrConverter}">
                    <Binding ElementName="adorner" Path="AdornedElement.IsKeyboardFocused" />
                    <Binding ElementName="toolTipCorner" Path="IsMouseOver"/>
                </MultiBinding>
            </DataTrigger.Binding>
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="fadeInStoryboard">
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.15"
                                     Storyboard.TargetName="errorBorder"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"/>
                        <ThicknessAnimation Duration="00:00:00.15"
                                        Storyboard.TargetName="errorBorder"
                                        Storyboard.TargetProperty="Margin"
                                        FillBehavior="HoldEnd"
                                        From="1,0,0,0"
                                        To="5,0,0,0">
                            <ThicknessAnimation.EasingFunction>
                                <BackEase EasingMode="EaseOut" Amplitude="2"/>
                            </ThicknessAnimation.EasingFunction>
                        </ThicknessAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="fadeInStoryboard"/>
                <BeginStoryboard x:Name="fadeOutStoryBoard">
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00"
                                     Storyboard.TargetName="errorBorder"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Can you help me how to show all error message?

Thanks Jakub

Answer 1

The solution is use popup for errorBorder.

Working style is:

<ControlTemplate x:Key="errorTemplateStyle">
    <StackPanel Orientation="Horizontal">
        <Border BorderThickness="1" BorderBrush="#FFdc000c" CornerRadius="0.7"
            VerticalAlignment="Top">
            <Grid>
                <Polygon x:Name="toolTipCorner"
                     Grid.ZIndex="2"
                     Margin="-1"
                     Points="6,6 6,0 0,0" 
                     Fill="#FFdc000c" 
                     HorizontalAlignment="Right" 
                     VerticalAlignment="Top"
                     IsHitTestVisible="True"/>
                <Polyline Grid.ZIndex="3"
                      Points="7,7 0,0" Margin="-1" HorizontalAlignment="Right" 
                      StrokeThickness="1.5"
                      StrokeEndLineCap="Round"
                      StrokeStartLineCap="Round"
                      Stroke="White"
                      VerticalAlignment="Top"
                      IsHitTestVisible="True"/>
                <AdornedElementPlaceholder x:Name="adorner"/>
            </Grid>
        </Border>
        <Popup x:Name="errorBorder" MinHeight="24" MinWidth="24" MaxWidth="267" Placement="Right" Margin="1,0,0,0" >
            <Border Background="#FFdc000c"
            Opacity="1" CornerRadius="1.5"
            IsHitTestVisible="False"
            MinHeight="24" MaxWidth="267">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="2.25" 
                              Color="Black" 
                              Opacity="0.4"
                              Direction="315"
                              BlurRadius="4"/>
                </Border.Effect>
                <TextBlock Text="{Binding ElementName=adorner,
                                  Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
                   Foreground="White" Margin="8,3,8,3" TextWrapping="Wrap"/>
            </Border>
        </Popup>
    </StackPanel>
    <ControlTemplate.Triggers>
        <DataTrigger Value="True">
            <DataTrigger.Binding>
                <MultiBinding Converter="{StaticResource BooleanOrConverter}">
                    <Binding ElementName="adorner" Path="AdornedElement.IsKeyboardFocused" />
                    <Binding ElementName="toolTipCorner" Path="IsMouseOver"/>
                </MultiBinding>
            </DataTrigger.Binding>
            <Setter TargetName="errorBorder" Property="IsOpen" Value="True" />
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="fadeInStoryboard">
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.15"
                                     Storyboard.TargetName="errorBorder"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"/>
                        <ThicknessAnimation Duration="00:00:00.15"
                                        Storyboard.TargetName="errorBorder"
                                        Storyboard.TargetProperty="Margin"
                                        FillBehavior="HoldEnd"
                                        From="1,0,0,0"
                                        To="5,0,0,0">
                            <ThicknessAnimation.EasingFunction>
                                <BackEase EasingMode="EaseOut" Amplitude="2"/>
                            </ThicknessAnimation.EasingFunction>
                        </ThicknessAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="fadeInStoryboard"/>
                <BeginStoryboard x:Name="fadeOutStoryBoard">
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00"
                                     Storyboard.TargetName="errorBorder"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>