I have a WPF window that uses validation. I created an error template that puts a red border around an element that fails validation and displays the error message below. This works fine, but the error message is rendered on top of any controls beneath the control with the error. The best I can tell, this happens because the error template renders on the Adorner Layer, which is on top of everything else. What I'd like to have happen is for everything else to move down to make room for the error message. Is there a way to do this? All of the examples on the web seem to use a tool tip and use a simple indicator like an asterisk or exclamation point that doesn't use much room.
Here is the template:
<ControlTemplate x:Key="ValidationErrorTemplate">
<StackPanel>
<Border BorderBrush="Red" BorderThickness="2" CornerRadius="2">
<AdornedElementPlaceholder x:Name="placeholder"/>
</Border>
<TextBlock Foreground="Red" FontSize="10" Text="{Binding ElementName=placeholder, Path=AdornedElement.(Validation.Errors)[0].ErrorContent, FallbackValue=Error!}"></TextBlock>
</StackPanel>
</ControlTemplate>
Here are the controls using the template (I typed some of this out, so ignore any syntax errors):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Name="Account" Grid.Row="0" Validation.ErrorTemplate="{StaticResource ValidationErrorTemplate}" Width="200">
<TextBox.Text>
<Binding Path="AccountNumber">
<Binding.ValidationRules>
<validators:RequiredValueValidationRule/>
<validators:NumericValidationRule/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<TextBox Name="Expiration" Grid.Row="1" Validation.ErrorTemplate="{StaticResource ValidationErrorTemplate}" Width="100" Margin="0,2,5,2">
<TextBox.Text>
<Binding Path="ExpirationDate">
<Binding.ValidationRules>
<validators:ExpirationDateValidationRule/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
</Grid>