WPF- Validation -The validation error message goes behind the other controls because of AdornerDecorator

Question

I have implemented IDataErrorInfo in my ViewModel to return a string if the text box has error.

    public string this[string columnName]
    {
        get { return "Error-- This is a long error message - sd"; }
    }

But this error message goes behind the other control on the UI as shown below.

Below is the xaml:

<Window x:Class="Test.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="600" Width="600">

<Window.Resources>        
    
    <ControlTemplate x:Key="validationTemplateNew">
        <DockPanel LastChildFill="True">
            <TextBlock Name="ErrorText" DockPanel.Dock="Bottom" Foreground="White" Background="Red" 
                                   FontSize="12" Padding="2" FontFamily="Trebuchet MS" 
                                   Margin="5,5,0,0"                                        
                                   TextWrapping="Wrap"                                        
                                   Text="{Binding [0].ErrorContent}" ></TextBlock>
            <AdornedElementPlaceholder Name="ErrorTextBox" />
        </DockPanel>
    </ControlTemplate>
    <Style x:Key="ValidationStyle" TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="BorderBrush" Value="Red" />
                <Setter Property="BitmapEffect">
                    <Setter.Value>
                        <BitmapEffectGroup>
                            <OuterGlowBitmapEffect GlowColor="Red" GlowSize="3" Noise="0.6"></OuterGlowBitmapEffect>
                        </BitmapEffectGroup>
                    </Setter.Value>
                </Setter>                    
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid>
    <ItemsControl Name="ItemCtrl">

        <AdornerDecorator>
            <TextBox 
             FontSize="11" 
             Margin="10" 
             Width="250"      
             VerticalAlignment="Center"                                         
             Text="{Binding Path=StrText, ValidatesOnDataErrors=True, 
                    UpdateSourceTrigger=PropertyChanged}" 
             Validation.ErrorTemplate="{StaticResource validationTemplateNew}"
            Style="{StaticResource ValidationStyle}"
             
             >
            </TextBox>
        </AdornerDecorator>
        <TextBox Width="250" Text="ASDFASFASDFASDFASDFASDFASDF"/>
        <TextBox Width="250" Text="ASDFASFASDFASDFASDFASDFASDF"/>
        <TextBox Width="250" Text="ASDFASFASDFASDFASDFASDFASDF"/>
        <TextBox Width="250" Text="ASDFASFASDFASDFASDFASDFASDF"/>
        <TextBox Width="250" Text="ASDFASFASDFASDFASDFASDFASDF"/>
    </ItemsControl>        
</Grid>

</Window>

Please let me know how to use AdornerDecorator such that the error message overlaps the other controls and doesn't go behind.

My application is such that if I don't use AdornerDecorator, the error message is not displayed at all.

Answer 1

Adding Grid.ZIndex on the AdornerDecorator should be enough

<Grid>
    <ItemsControl Name="ItemCtrl">
        <AdornerDecorator Grid.ZIndex="1">