How to get rid of the red border when a DataGrid cell is invalid?

You can just add this line to your DataGrid:

<DataGrid  Validation.ErrorTemplate="{x:Null}" />

I had this same issue but in my case I wasn't using IDataError or INotifyDataErrorInfo. I'm using a custom ValidationRule and styles to handle my validation logic and presentation. I was already using the DataGrid RowStyle to display a custom style for the row that has errors so I thought it would be easy to do something similar with the DataGridCell.

Things to note:

  1. You can't just define a style and set the DataGrid.CellStyle. Instead you have to use the ElementStyle and/or the EditingElementStyle.

  2. The style TargetType has to match the DataGridColumn type that the cell is using. So for a DataGridComboBoxColumn the TargetType should be ComboBox

DataGrid Column XAML:

<DataGridComboBoxColumn Header="Column1" 
    ItemsSource="{Binding Path=Column1Path}"
    DisplayMemberPath="Column1DisplayPath"
    ElementStyle="{StaticResource DGComboColValidationStyle}"
    EditingElementStyle="{StaticResource DGComboColValidationStyle}">

    <DataGridComboBoxColumn.SelectedItemBinding>
        <Binding Path="Column1Path" UpdateSourceTrigger="LostFocus">
            <Binding.ValidationRules>
                <Validation:CustomValidationRule ValidationStep="UpdatedValue" ValidatesOnTargetUpdated="True" />
            </Binding.ValidationRules>
        </Binding>
    </DataGridComboBoxColumn.SelectedItemBinding>
</DataGridComboBoxColumn>

Style Definitions

<Style x:Key="DGComboColValidationStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <Border BorderThickness="1" 
                            BorderBrush="{Binding ElementName=adorner1, Path=DataContext[0].ErrorContent.ValidationType, Converter={StaticResource ValidationTypeColorConverter}}" 
                            CornerRadius="3">
                    </Border>
                    <AdornedElementPlaceholder Name="adorner1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="DGTextColValidationStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <Border BorderThickness="1" 
                            BorderBrush="{Binding ElementName=adorner2, Path=DataContext[0].ErrorContent.ValidationType, Converter={StaticResource ValidationTypeColorConverter}}" 
                            CornerRadius="3">
                    </Border>
                    <AdornedElementPlaceholder Name="adorner2"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="DGRowValidationStyle" TargetType="{x:Type DataGridRow}">
    <Setter Property="ValidationErrorTemplate">
        <Setter.Value>
            <ControlTemplate x:Name="DGRowValidationTemplate">
                <Grid>
                    <Ellipse Width="12" Height="12" Stroke="Black" StrokeThickness="0.5"
                        Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}, Path=(Validation.Errors)[0].ErrorContent.ValidationType, Converter={StaticResource ValidationTypeColorConverter}}"/>
                    <TextBlock FontWeight="Bold" Padding="4,0,0,0"
                        Margin="0" VerticalAlignment="Top" Foreground="White" Text="!"
                        ToolTip="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}, Path=(Validation.Errors)[0].ErrorContent.ValidationMessage}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="true">
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent.ValidationType, Converter={StaticResource ValidationTypeColorConverter}}"/>
        </Trigger>
        <Trigger Property="Validation.HasError" Value="false">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent" />
        </Trigger>
    </Style.Triggers>
</Style>

<Style x:Key="DGCellStyle" TargetType="{x:Type DataGridCell}">
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="false">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}, Path=(Validation.Errors)[0].ErrorContent.ValidationMessage}"/>
        </Trigger>
    </Style.Triggers>
</Style>

Reference: http://social.msdn.microsoft.com/Forums/vstudio/en-US/6d2d6513-7bca-4359-a12b-46da3c380b0a/wpf-4-datagrid-editingelementstyle-and-validationerrortemplate-adorner-layer?forum=wpf


Set the ValidatesOnDataErrors and ValidatesOnExpcetions to False for your binding of your cell. In case you want your validations, then you have to override the Validation Template for your control. Please refer to my answer here - Validation Error Style in WPF, similar to Silverlight

Tags:

Wpf

Recent Posts