Styling autogenerated DataGrid column on validation failure

Question

I have a DataGrid filled with instances of a class that exposes a double type property. This property is shown into the DataGrid. I want to implement a custom validation, and I want to color the whole cell red if this validation fails. I think I am close to making it work, but not quite yet, and now I'm stumped.

My problem is that I cannot make the conditional (on validation fail) formatting work. The result is that the cells are correctly colored at the start, but when I insert a value that makes the falidating function return false, I get the usual red border, white background cell style.

How am I supposed to input this formatting style?

XAML code:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
  <DataGrid x:Name="dg" ItemsSource="{Binding Data}">
    <DataGrid.Resources>
      <ControlTemplate x:Key="validationTemplate">
        <DockPanel>
          <AdornedElementPlaceholder/>
          <TextBlock Foreground="Red" FontSize="20">!</TextBlock>
        </DockPanel>
      </ControlTemplate>

      <Style TargetType="{x:Type TextBox}">
        <Setter Property="Background" Value="Yellow"/>
        <Setter Property="Validation.ErrorTemplate" Value="{StaticResource validationTemplate}"></Setter>
      </Style>
    </DataGrid.Resources>
  </DataGrid>
</Window>

Code behind:

public partial class MainWindow : Window
{
  ...

  private void DataGrid_AutoGeneratedColumns(object sender, EventArgs e)
  {
    foreach (DataGridTextColumn c in dg.Columns)
    {
      c.ElementStyle = (Style)dg.FindResource("s");

      for (int i = 0; i < dg.Items.Count; i++)
      {
        DataGridRow row = (DataGridRow)dg.ItemContainerGenerator.ContainerFromIndex(i);
        if (row == null) // May be virtualized, bring into view and try again.
        {
          dg.UpdateLayout();
          dg.ScrollIntoView(dg.Items[i]);
          row = (DataGridRow)dg.ItemContainerGenerator.ContainerFromIndex(i);
        }
        TextBlock tb = (TextBlock)c.GetCellContent(row);

        Binding binding = BindingOperations.GetBinding(tb, TextBlock.TextProperty);
        binding.ValidationRules.Clear();
        binding.ValidationRules.Add(new VR());
      }
    }
  }
}

public class VR : ValidationRule
{
  public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
  {
    ...
  }
}

EDIT: updated XAML code according to dev hedgehog's suggestion, still not working.

dev hedgehog dev hedgehog · Accepted Answer · 2013-12-05T12:11:48

You seem to be using ErrorTemplate wrong.

Take a look at this:

<ControlTemplate x:Key="validationTemplate">
  <DockPanel>
    <TextBlock Foreground="Red" FontSize="20">!</TextBlock>
    <AdornedElementPlaceholder/>
  </DockPanel>
</ControlTemplate>


<TextBox Name="textBox1" Width="50" FontSize="15"
         Validation.ErrorTemplate="{StaticResource validationTemplate}"
         Style="{StaticResource textBoxInError}"
         Grid.Row="1" Grid.Column="1" Margin="2">
  <TextBox.Text>
    <Binding Path="Age" Source="{StaticResource ods}"
             UpdateSourceTrigger="PropertyChanged" >
      <Binding.ValidationRules>
        <c:AgeRangeRule Min="21" Max="130"/>
      </Binding.ValidationRules>
    </Binding>
  </TextBox.Text>
</TextBox>

Validation.ErrorTemplate will allow you to decorate AdornedElementPlaceholder which is in this case TextBox.

In the example I gave you a red ! will be decorated to the left of the TextBox.

Edit:

I changed your code to make it work.

<Grid>
    <DataGrid x:Name="dg" ItemsSource="{Binding Data}" PreparingCellForEdit="OnBeginningEdit">
        <DataGrid.Resources>
            <ControlTemplate x:Key="validationTemplate">
                <DockPanel>
                    <AdornedElementPlaceholder/>
                    <TextBlock Foreground="Red" FontSize="20">!</TextBlock>
                </DockPanel>
            </ControlTemplate>

            <Style TargetType="{x:Type TextBox}">
                <Setter Property="Background" Value="Yellow"/>
                <Setter Property="Validation.ErrorTemplate" Value="{StaticResource validationTemplate}"/>
            </Style>
        </DataGrid.Resources>
    </DataGrid>
</Grid>

This is the code behind

public partial class MainWindow : Window
{
    public List<D> Data { get; set; }

    public MainWindow()
    {
        Data = new List<D>();
        Random r = new Random();
        Data.Add(new D(r.NextDouble()));
        Data.Add(new D(r.NextDouble()));
        Data.Add(new D(r.NextDouble()));

        InitializeComponent();

        DataContext = this;
    }

    private void DataGrid_AutoGeneratedColumns(object sender, EventArgs e)
    {
        foreach (DataGridTextColumn c in dg.Columns)
        {
            c.EditingElementStyle = (Style)dg.FindResource("s");
        }
    }

    private void OnBeginningEdit(object sender, DataGridPreparingCellForEditEventArgs e)
    {
        TextBox tbx = (TextBox)e.EditingElement;
        Binding binding = BindingOperations.GetBinding(tbx, TextBox.TextProperty);
        binding.ValidationRules.Clear();
        binding.ValidationRules.Add(new VR());
    }
}

See you need to work with TextBoxes and when you write something inside one then click away in order to trigger validation.

Try it out. It works for me :)

Styling autogenerated DataGrid column on validation failure

1 Answers