Question

I’m trying to validate items inside a treeview. The main idea is that a user selects an object from the tree and that loads its details which can be edited. That’s all working fine as I’ve got INotifyPropertyChanged hooked up but… my model has validation logic hooked up (IDataErrorInfo) and I’d like to show it in the treeview as well (highlight the item(s) which have validation errors).

I’ve tried some things already but I just can’t figure out where to put the Validation in the binding to make it work like I would like it to.

My Validation ControlTemplate:

<ControlTemplate x:Key="validationTemplate">
            <StackPanel Orientation="Horizontal">
                <AdornedElementPlaceholder x:Name="MyAdorner" />
                <Image
                                            MaxHeight="{Binding ElementName=MyAdorner, Path=ActualHeight}" 
                                            MaxWidth="20"
                                            Source="{Binding Source={StaticResource ValidationIcon}, Converter={StaticResource UriConverter}}" 
                                            Margin="1" RenderOptions.BitmapScalingMode="HighQuality"
                                            VerticalAlignment="Center" HorizontalAlignment="Center" />
            </StackPanel>
        </ControlTemplate>

The treeView:

<TreeView ItemsSource="{Binding Path=ProductCategories}"
              Name="treeView" SelectedItemChanged="treeView_SelectedItemChanged">           
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate DataType="{x:Type data:ProductCategory}"
                                      ItemsSource="{Binding Path=ProductCategories}">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Style>
                                <Style TargetType="StackPanel">
                                    <Style.Triggers>
                                        <Trigger Property="Validation.HasError" Value="True">
                                            <Setter Property="ToolTip"
                                                    Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
                                            <Setter Property="Validation.ErrorTemplate"
                                                    Value="{StaticResource validationTemplate}" />
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </StackPanel.Style>
                            <StackPanel.BindingGroup>
                                <BindingGroup />
                            </StackPanel.BindingGroup>
                            <StackPanel.ToolTip>
                                <TextBlock Margin="2" Text="{Binding Path=Description}" />
                            </StackPanel.ToolTip>
                            <TextBlock Text="{Binding Path=Name}" FontSize="10" FontWeight="Medium" />
                            <TextBlock Text="{Binding Path=ProductCount, StringFormat='   ({0})'}" />
                        </StackPanel>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>

Basically I’m trying to put a little icon next to the item in the treeview if the underlying Model has a validation error.

I’ve tried playing around with BindingGroup but that’s a new topic for me so I’m not sure if that is even the way to go.

Any ideas?

Answer 1

First, you need a couple of properties in your data class like the following:

public ObservableCollection<string> Errors
{
    get
    {
        ObservableCollection<string> errors = new ObservableCollection<string>();
        errors.AddUniqueIfNotEmpty(this["PropertyToValidate1"]);
        errors.AddUniqueIfNotEmpty(this["PropertyToValidate2"]);
        ...
        errors.AddUniqueIfNotEmpty(this["PropertyToValidateN"]);
        return errors;
    }
}

This first one calls the indexer added for IDataErrorInfo and adds all validation errors into the collection if they are not already in there. The AddUniqueIfNotEmpty method is an extension method that ‘does what it says on the tin’. I trust you can manage this part for yourself. The nice thing about this collection is that you can bind to it and see a collection of every validation error, not just one at a time like with the simple IDataErrorInfo implementation.

public bool HasError
{
    get { return Errors != null && Errors.Count > 0; }
}

The second property simply returns a bool that signifies whether there are any validation errors in the data object or not.

Then, you can simply bind to this property in your Template or Style. Here is an example that would change the colour of a Border if the relating data object had any validation errors.

<Style x:Key="ValidationBorderStyle" TargetType="{x:Type Border}">
    <Setter Property="Border.BorderBrush" Value="Black" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding HasError, FallbackValue=False}" Value="True">
            <Setter Property="Border.BorderBrush" Value="Red" />
        </DataTrigger>
    </Style.Triggers>
</Style>