WPF Validation error text overflow

Question

Hello I am very new to xaml and I really don't know what such a bug is called. I have the following <ControlTemplate> and <Style> to display a validation error next to TextBoxes that I create on the code behind. The issue I'm having is the Text from the Validation Error overflow the Grid and the ScrollViewer doesn't expand for it as it does for other children in the Grid.

<UserControl.Resources>
    <local:ValidationModels x:Key="validationModels" textBox_Text=" " />
    <ControlTemplate x:Key="validationTemplate" >
        <DockPanel Grid.Column="2">
            <TextBlock Foreground="Red" FontSize="15" Text="Error"  DockPanel.Dock="Right"></TextBlock>
            <AdornedElementPlaceholder/>
        </DockPanel>
    </ControlTemplate>

    <Style x:Key="InputControlErrors" TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="true">
                <Setter Property="ToolTip"    
          Value="{Binding RelativeSource={x:Static RelativeSource.Self},Path=(Validation.Errors)[0].ErrorContent}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

then I have the part of my xaml that has <ScrollViewer> <Grid>

      <StackPanel Orientation="Vertical">
        <Label Content="NCR Assignment" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" Margin="16"/>
        <ScrollViewer Height="314" Margin="48,0,52,0" HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Visible" >
            <Grid Name="NCRGrid" RenderTransformOrigin="0.365,0.559">
                <Grid.ColumnDefinitions >
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
            </Grid>
        </ScrollViewer>
        </StackPanel>

I add TextBlock controls to the first column and TextBox controls to the second column of the Grid.

The problem I'm facing is the ScrollViewer expands with the TextBlock text and TextBox field (I can scroll horizontally), but it doesn't expand for the validation error text from the ControlTemplate the only way I see it is by maximizing the window manually .

<ControlTemplate x:Key="validationTemplate" >
    <DockPanel Grid.Column="2">
        <TextBlock Foreground="Red" FontSize="15" Text="Error"  DockPanel.Dock="Right"></TextBlock>
        <AdornedElementPlaceholder/>
    </DockPanel>
</ControlTemplate>

I add both the of the TextBlock and TextBox objects to the Grid in the code behind

Answer 1

it's work for me

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>

******

        <TextBox Grid.Column="2" 
             Name="Maintext"
             helpers:TextBoxValidationHelper.HasError="{Binding HasError}" 
             VerticalContentAlignment="Center" 
             VerticalAlignment="Stretch" 
             Style="{StaticResource textBoxStyle}"                                                               
             Language="ru-RU" >
        <Binding Path="StrValue"
                 ValidatesOnDataErrors="True"
                 ValidatesOnExceptions="True"
                 NotifyOnValidationError="True"
                      UpdateSourceTrigger="PropertyChanged" 
                      NotifyOnSourceUpdated="True"
                 ></Binding>
    </TextBox>

    <TextBlock Grid.Column="4" Text="!" Width="10" Foreground="Red" FontSize="16" FontWeight="Bold" TextAlignment="Center" >

        <TextBlock.Style>
            <Style  TargetType="{x:Type TextBlock}">
                <Setter Property="Visibility" Value="Collapsed"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding HasError}" Value="true">
                        <Setter Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>

and style

<Style x:Key="textBoxStyle" TargetType="{x:Type TextBox}">
        <Style.Resources>
            <Style x:Key="{x:Type ToolTip}" TargetType="{x:Type ToolTip}">
                <Setter Property="Background" Value="Red"/>
                <Setter Property="Foreground" Value="White"/>
            </Style>
        </Style.Resources>
        <Setter Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <DockPanel LastChildFill="True">
                        <Border BorderBrush="Red" BorderThickness="2"  >
                            <AdornedElementPlaceholder x:Name="adornedElement"/>
                        </Border>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="true">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

result image

Answer 2

since it's not possible to do it the way I wanted it to be just like mm8 mentioned in his answer. I tried to work around it and it worked for me this way I added a new column to the Grid and make it small (just to display the error in it)

   <Grid.ColumnDefinitions >
                    <ColumnDefinition Width="322*" />
                    <ColumnDefinition Width="165*" />
                    <ColumnDefinition Width="37*" />
   </Grid.ColumnDefinitions>

and added an empty element to it.

 TextBlock columnSpace = new TextBlock();
 columnSpace.Text = "      "; //empty spaces
 Grid.SetColumn(columnSpace, 2);
 NCRGrid.Children.Add(columnSpace);

The ScrollViewer expands for the 3rd column which will make you able to see the validation error text.

Not the smartest way but it works!!

Answer 3

This is by design. The Validation.ErrorTemplate will be displayed on the adorner layer. Elements in the adorner layer are rendered on top of the rest of the visual elements and they will not be considered when the layout system is measuring and arranging the controls.

From MSDN: https://msdn.microsoft.com/en-us/library/system.windows.documents.adornerlayer(v=vs.110).aspx

Anything placed in the adorner layer is rendered on top of the rest of any styles you have set. In other words, adorners are always visually on top and cannot be overridden using z-order.