CODEWITHSUNDEEP
wpfwpf-controlsbinding
AKoran
AKoran

Reputation: 1856

WPF Display TextBlock with validation error message below control

Is there a way to display the error contents in a TextBlock below the control similar to how the following sets the Tooltip to contain the error text?

        <Style x:Key="textBoxInError" TargetType="Control">
        <Setter Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <DockPanel>
                        <TextBlock DockPanel.Dock="Left" Foreground="Red" FontWeight="Bold">*</TextBlock>
                        <TextBlock Text="WOULD LIKE TO SHOW WHAT TOOLTIP IS SHOWING" DockPanel.Dock="Bottom" Foreground="Red"/>
                        <Border BorderBrush="Red" BorderThickness="2">
                            <AdornedElementPlaceholder/>
                        </Border>
                    </DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <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>

In other words, I rather show the error message in a TextBlock below the control instead of a Tool Tip.

Upvotes: 14

Views: 15446

Answers (2)

Nehluxhes
Nehluxhes

Reputation: 186

I struggled with this exact problem, and all the SO answers I could find to this or to similar questions were either using the "Validation.ErrorTemplate" property which is unfortunately rendered on a separate UI layer which means the parent control won't resize its content like @statikuz mentionned and hide the following controls, or just not generic enough.

I finally ended up with this solution :

<Style x:Key="hiddenTextblockErrorText" TargetType="TextBlock">
    <Setter Property="Visibility" Value="Collapsed"/>
    <Setter Property="Foreground" Value="DarkRed"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag.(Validation.Errors)/ErrorContent}"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag.(Validation.HasError)}" Value="True">
            <Setter Property="Visibility" Value="Visible" />
        </DataTrigger>
    </Style.Triggers>
</Style>

And you use it like this :

<TextBox Name="someField" Height="20">
    <TextBox.Text>
    <Binding Path="SomeProperty" Mode="TwoWay"UpdateSourceTrigger="PropertyChanged">
        <Binding.ValidationRules>
            <local:IsRequired/>
        </Binding.ValidationRules>
    </Binding>
</TextBox.Text>
</TextBox>
<TextBlock Tag="{Binding ElementName=someField}" Style="{StaticResource hiddenTextblockErrorText}"/>

So you basically just bind your field to the Tag property of your error TextBlock, and you can use it from there to get the (Validation.Errors) attached property. Note that you will get an harmless warning "Property Errors is not attachable to element of type Object" but it is working perfectly fine (I wasn't able to find how to do a cast here).

Alternatively you can use a Label and the Target property instead of Tag and you won't get any warning, but you lose the TextWrapping feature unless you also override the template so it's a bit more verbose :

<Style x:Key="hiddenLabelErrorText" TargetType="Label">
        <Setter Property="Visibility" Value="Collapsed"/>
        <Setter Property="Foreground" Value="DarkRed"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Label}">
                    <TextBlock TextWrapping="Wrap" Text="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type Label}}, 
                        Path=Target.(Validation.Errors)/ErrorContent}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Target.(Validation.HasError)}" Value="True">
                <Setter Property="Visibility" Value="Visible" />
            </DataTrigger>
        </Style.Triggers>
</Style>

<Label Target="{Binding ElementName=someField}" Style="{StaticResource hiddenLabelErrorText}"/>

Upvotes: 1

Quartermeister
Quartermeister

Reputation: 59139

The DataContext of the ErrorTemplate is already the value of Validation.Errors, so you can just do: 

<TextBlock Text="{Binding [0].ErrorContent}" DockPanel.Dock="Bottom" Foreground="Red"/>

or

<TextBlock Text="{Binding ErrorContent}" DockPanel.Dock="Bottom" Foreground="Red"/>

Upvotes: 22

Related Questions