We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the validation error template color?

Platform: WPF |
Control: SfDataGrid |
.NET Framework: 4.5

The SfDataGrid provides a convenient way to validate data and indicate the errors along with its information. By default, validation error templates are displayed in red. However, the SfDataGrid allows you to customize the Validation error template or its icon by writing style for GridCell and GridRowHeaderCell. You can change the validation error template color of the cell by editing the ControlTemplate of the GridCell and also setting the error path fill color. For example, yellow. You can change the validation error template color of the RowHeader by editing the ControlTemplate of the GridRowHeaderCell and setting the path fill color as any. For example, yellow.

GridRowHeaderCell.

 

The control template of the GridRowHeaderCell contains two VisualStateGroupsBorderStates that specifies the BorderThickness of the GridRowHeaderCell and IndicationStates that contains the visual states, CurrentRowError, Error, CurrentRow, Editing row and AddNewRow. The validation error template color of the GridRowHeaderCell is changed by editing the visual state Error. It contains two classes, ObjectAnimationUsingKeyFrames where the error template is drawn and ColorAnimationUsingKeyFrames where the color of the error template is mentioned. The validation error template color is changed by changing the value property of the EasingColorKeyFrame.

XAML

<Style TargetType="syncfusion:GridRowHeaderCell">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="Gray" />
                <Setter Property="BorderThickness" Value="0,0,1,1" />
                <Setter Property="Padding" Value="0,0,0,0" />
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="syncfusion:GridRowHeaderCell">
                            <Border x:Name="PART_RowHeaderCellBorder"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
 
                                <VisualStateManager.VisualStateGroups>
 
                                    <VisualStateGroup x:Name="BorderStates">
                                        <VisualState x:Name="NormalCell"/>
                                        <VisualState x:Name="TableSummaryCell">
                                            <Storyboard BeginTime="0">
                                                <ThicknessAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderCellBorder" Storyboard.TargetProperty="(Border.BorderThickness)">
                                                    <EasingThicknessKeyFrame KeyTime="0" Value="0" />
                                                </ThicknessAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Fixed_NormalCell">
                                            <Storyboard BeginTime="0">
                                                <ThicknessAnimationUsingKeyFrames BeginTime="0"
                                                                          Duration="1"
                                                                          Storyboard.TargetName="PART_RowHeaderCellBorder"
                                                                          Storyboard.TargetProperty="BorderThickness">
                                                    <EasingThicknessKeyFrame KeyTime="0" Value="0, 1, 1, 1" />
                                                </ThicknessAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
 
                                    <VisualStateGroup x:Name="IndicationStates">
                                        <VisualState x:Name="Normal">
                                            <!--<Storyboard BeginTime="0">
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="Data">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Geometry>M0.5,0.5 L40.5,0.5 L40.5,29.5 L0.5,29.5 z</Geometry>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="Transparent" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>-->
                                        </VisualState>
 
                                        <VisualState x:Name="Error_CurrentRow">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="Data">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Geometry>F1 M 397.333,276.552L 395.445,274.666L 392,278.112L 388.555,274.666L 386.667,276.552L 390.113,279.999L 386.667,283.445L 388.555,285.334L 392,281.887L 395.445,285.334L 397.333,283.445L 393.887,279.999L 397.333,276.552 Z</Geometry>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                                    <EasingColorKeyFrame KeyTime="0" Value="Yellow" />
                                                </ColorAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
 
                                        <VisualState x:Name="Error">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="Data">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Geometry>F1 M 397.333,276.552L 395.445,274.666L 392,278.112L 388.555,274.666L 386.667,276.552L 390.113,279.999L 386.667,283.445L 388.555,285.334L 392,281.887L 395.445,285.334L 397.333,283.445L 393.887,279.999L 397.333,276.552 Z</Geometry>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                                    <EasingColorKeyFrame KeyTime="0" Value="Yellow" />
                                                </ColorAnimationUsingKeyFrames>
 
                                            </Storyboard>
                                        </VisualState>
 
                                        <VisualState x:Name="CurrentRow">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="Data">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Geometry>F1 M 390.741,274.667L 387.928,274.667L 393.048,280L 387.927,285.333L 390.741,285.333L 396.073,280L 390.741,274.667 Z</Geometry>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ToolTip" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
 
                                        <VisualState x:Name="EditingRow">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="Data">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Geometry>M6.8007798,1.7332839 L8.97791,3.9143763 2.8868401,10.034073 0,10.666874 0.70837402,7.8491302 z M9.1967516,0.00016105175 C9.5903473,-0.0053596497 9.9693098,0.13107061 10.251301,0.41431141 10.856801,1.0224026 10.794301,2.067961 10.110801,2.7515601 L7.9219999,0.5588423 C8.2858057,0.19500291 8.7506762,0.0064178705 9.1967516,0.00016105175z</Geometry>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ToolTip" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="AddNewRow">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="Data">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Geometry>F1 M 397.333,278.825L 393.176,278.825L 393.176,274.667L 390.824,274.667L 390.824,278.825L 386.667,278.825L 386.667,281.175L 390.824,281.175L 390.824,285.333L 393.176,285.333L 393.176,281.175L 397.333,281.175L 397.333,278.825 Z</Geometry>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ToolTip" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="FilterRow">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_RowHeaderIndicator" Storyboard.TargetProperty="Data">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Geometry>F1M12,6L12,7L13,7L13,8L14,8L14,9L15,9L15,13L17,14L17,9L18,9L18,8L19,8L19,7L20,7L20,6z</Geometry>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ToolTip" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
 
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Path x:Name="PART_RowHeaderIndicator"
                              Width="8.146"
                              Height="8.146"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Fill="#FF303030"
                              Stretch="Fill">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Name="PART_ToolTip"
                                         Background="#FFDB000C"
                                         Placement="Left"
                                         PlacementRectangle="20,0,0,0"
                                         Tag="{TemplateBinding RowErrorMessage}"
                                         Template="{StaticResource ValidationToolTipTemplate}" />
                                    </ToolTipService.ToolTip>
                                </Path>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

GridCell

The control template of the GridCell contains only one VisualStateGroup that contains the visual states HasError and NoError. The HasError state specifies the width of the error template of the cell and NoError state depicts the state of the cell when it has no errors. Apart from the VisualStateGroup, the control template of the GridCell has three borders. A ContentPresenter is loaded in the first border where the contents of the cell are displayed. The Second border is the CurrentCellBorder and the third border  displays the error template. You can change the validation error template color of the GridCell by changing the Fill property of the path codes in the third border.

 

XAML

 <Style TargetType="syncfusion:GridCell">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="Gray" />
                <Setter Property="BorderThickness" Value="0,0,1,1" />
                <Setter Property="Padding" Value="0,0,0,0" />
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="syncfusion:GridCell">
                            <Grid SnapsToDevicePixels="True">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="IndicationStates">
                                        <VisualState x:Name="NoError">
                                            <Storyboard BeginTime="0">
                                                <!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        </DoubleAnimationUsingKeyFrames>-->
                                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="PART_InValidCellBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="HasError">
                                            <Storyboard>
                                                <!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                            <EasingDoubleKeyFrame KeyTime="0" Value="10" />
                                        </DoubleAnimationUsingKeyFrames>-->
                                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                       Storyboard.TargetName="PART_InValidCellBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
 
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="BorderStates">
                                        <VisualState x:Name="NormalCell" />
                                        <VisualState x:Name="FrozenColumnCell"/>
                                        <VisualState x:Name="FooterColumnCell">
                                            <Storyboard BeginTime="0">
                                                <ThicknessAnimationUsingKeyFrames BeginTime="0"
                                                                          Duration="1"
                                                                          Storyboard.TargetName="PART_GridCellBorder"
                                                                          Storyboard.TargetProperty="BorderThickness">
                                                    <EasingThicknessKeyFrame KeyTime="0" Value="1,0,1,1" />
                                                </ThicknessAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="BeforeFooterColumnCell">
                                            <Storyboard BeginTime="0">
                                                <ThicknessAnimationUsingKeyFrames BeginTime="0"
                                                                          Duration="1"
                                                                          Storyboard.TargetName="PART_GridCellBorder"
                                                                          Storyboard.TargetProperty="BorderThickness">
                                                    <EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,1" />
                                                </ThicknessAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border Background="{TemplateBinding CellSelectionBrush}"
                                SnapsToDevicePixels="True"
                                Visibility="{TemplateBinding SelectionBorderVisibility}" />
 
                                <Border x:Name="PART_GridCellBorder"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="True">
                                    <ContentPresenter Margin="{TemplateBinding Padding}" Opacity="{TemplateBinding AnimationOpacity}" />
                                </Border>
 
                                <Border Margin="0,0,1,1"
                                Background="Transparent"
                                BorderBrush="{TemplateBinding CurrentCellBorderBrush}"
                                BorderThickness="{TemplateBinding CurrentCellBorderThickness}"
                                IsHitTestVisible="False"
                                SnapsToDevicePixels="True"
                                Visibility="{TemplateBinding CurrentCellBorderVisibility}" />
                                <Border x:Name="PART_InValidCellBorder"
                                Width="10"
                                Height="10"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                SnapsToDevicePixels="True"
                                Visibility="Collapsed">
                                    <ToolTipService.ToolTip>
                                        <ToolTip Background="#FFDB000C"
                                         Placement="Right"
                                         PlacementRectangle="20,0,0,0"
                                         Tag="{TemplateBinding ErrorMessage}"
                                         Template="{StaticResource ValidationToolTipTemplate}" />
                                    </ToolTipService.ToolTip>
                                    <Path Data="M0.5,0.5 L12.652698,0.5 12.652698,12.068006 z"
                                  Fill="Yellow"
                                  SnapsToDevicePixels="True"
                                  Stretch="Fill" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

 

The following screenshot displays the output for the above code in the SfDataGrid.

change validation error template color in SfDataGrid

Note:

The above code examples are for WPF. For WinRT and Silverlight platforms, refer to the following samples.

 

Sample Links

WPF: DataValidationDemo_WPF

WRT: DataValidationDemo_WRT.zip

SilverLight: DataValidationDemo_SL.zip

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile