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

Change the style of triangle validation ?

Hello,

How to change the style of the "triangle validation" ? If we want a gree triangle how to do ?

We change the template of syncfusion:GridCell. But the "triangle validation" is hidden. ow t do please ?

<Style x:Key="CellCommandesStyle" TargetType="syncfusion:GridCell">
        <Setter Property="BorderBrush" Value="#55BCB3AB" />
        <Setter Property="BorderThickness" Value="0,0,1,1" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="syncfusion:GridCell">
                    <Grid x:Name="PART_RootGrid">
                        <Border x:Name="PART_CellBorder"
                                    Background="{TemplateBinding CellSelectionBrush}"
                                    Padding="0,0,0,0"
                                    Visibility="{TemplateBinding SelectionBorderVisibility}" />
                        <Border x:Name="PART_CurrentCell"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Padding="0,3,3,3">
                            <Grid>
                                <ContentPresenter Margin="5,0,0,0" FontWeight="SemiBold" />
                            </Grid>
                        </Border>
                        <Border Background="Transparent"
                                    BorderBrush="Transparent"
                                    BorderThickness="0"
                                    Visibility="Collapsed" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



Best regards

Attachment: TriangleValidation_7b669ad9.zip

1 Reply

SV Srinivasan Vasu Syncfusion Team November 9, 2016 01:11 PM UTC

Hi Elie, 

Thanks for contacting Syncfusion support. 

We have checked your query and you have missed the PART_InValidCell border which is used for notifying the validation state. We have prepared a sample based on your requirement.  
 
Please refer the below code to achieve your requirement. 

Code Example 
 xmlns:Grid="using:Syncfusion.UI.Xaml.Grid" 
 
     <Style TargetType="Grid: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="VerticalContentAlignment" Value="Center"/> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="Grid:GridCell"> 
                        <Grid> 
                            <VisualStateManager.VisualStateGroups> 
                                <VisualStateGroup x:Name="IndicationStates"> 
                                    <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 Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)"> 
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <Visibility>Visible</Visibility> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
 
                                    <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 Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)"> 
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <Visibility>Collapsed</Visibility> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                </VisualStateGroup> 
                                <VisualStateGroup x:Name="BorderStates"> 
                                    <VisualState x:Name="NormalCell"/> 
                                    <VisualState x:Name="FrozenColumnCell"> 
                                        <Storyboard BeginTime="0"> 
                                            <ObjectAnimationUsingKeyFrames BeginTime="0" 
                                                                          Duration="1" 
                                                                          Storyboard.TargetName="PART_GridCellBorder" 
                                                                          Storyboard.TargetProperty="BorderThickness"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                                     Value="0,0,1,1"/> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="FooterColumnCell"> 
                                        <Storyboard BeginTime="0"> 
                                            <ObjectAnimationUsingKeyFrames BeginTime="0" 
                                                                          Duration="1" 
                                                                          Storyboard.TargetName="PART_GridCellBorder" 
                                                                          Storyboard.TargetProperty="BorderThickness"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                                     Value="1,0,1,1"/> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="BeforeFooterColumnCell"> 
                                        <Storyboard BeginTime="0"> 
                                            <ObjectAnimationUsingKeyFrames BeginTime="0" 
                                                                          Duration="1" 
                                                                          Storyboard.TargetName="PART_GridCellBorder" 
                                                                          Storyboard.TargetProperty="BorderThickness"> 
                                                <DiscreteObjectKeyFrame KeyTime="0" 
                                                                     Value="0,0,0,1"/> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                </VisualStateGroup> 
                            </VisualStateManager.VisualStateGroups> 
                            <Border Background="{TemplateBinding CellSelectionBrush}" 
                                Visibility="{TemplateBinding SelectionBorderVisibility}" /> 
                            <Border x:Name="PART_GridCellBorder" 
                                Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"> 
                                <Grid> 
                                    <ContentPresenter Margin="{TemplateBinding Padding}" 
                                                  FontFamily="{TemplateBinding FontFamily}" 
                                                  FontSize="{TemplateBinding FontSize}" 
                                                  Foreground="{TemplateBinding Foreground}" /> 
                                </Grid> 
                            </Border> 
                            <Border Margin="0,0,0,0" 
                                Background="Transparent" 
                                BorderBrush="{TemplateBinding CurrentCellBorderBrush}" 
                                BorderThickness="{TemplateBinding CurrentCellBorderThickness}" 
                                IsHitTestVisible="False" 
                                Visibility="{TemplateBinding CurrentCellBorderVisibility}" /> 
                            <Border x:Name="PART_InValidCellBorder" 
                                Width="15" 
                                Height="15" 
                                HorizontalAlignment="Right" 
                                Visibility="Collapsed" 
                                VerticalAlignment="Top"> 
                                <ToolTipService.ToolTip> 
 
                                    <ToolTip Background="#FFDB000C" 
                                         Placement="Right" 
                                         Tag="{TemplateBinding ErrorMessage}" 
                                         /> 
 
                                </ToolTipService.ToolTip> 
                                <Path Data="M0.5,0.5 L12.652698,0.5 12.652698,12.068006 z" 
                                  Fill="Green" 
                                  Stretch="Fill" /> 
                            </Border> 
                        </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 



Regards, 
Srinivasan 
 
 
 


Loader.
Live Chat Icon For mobile
Up arrow icon