How to differentiate the WinRT GridCombobox column from other columns in non-editable display mode?

2 mins read

You can differentiate the GridComboBoxColumn from other columns by showing the drop down arrow in the display mode. Normally, it is shown only in the edit mode. For this, you need to write the custom style for the GridCell and assign that style to the GridComboBoxColumn.CellStyle property, as follows.

XAML

<Style x:Key="style1" TargetType="syncfusion:GridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="syncfusion:GridCell">
                        <Grid SnapsToDevicePixels="True">
                            <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>
                                        </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>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    SnapsToDevicePixels="True">
                                <Grid>
                                    <ContentPresenter Margin="{TemplateBinding Padding}" />
                      <!--Sets the Arrow Path-->.
                                    <Path Width="5.3"
                                          Height="4.2"
                                          Margin="0,0,7,0"
                                          HorizontalAlignment="Right"
                                          VerticalAlignment="Center"
                                          Data="F1M0,0L2.667,2.66665 5.3334,0 5.3334,-1.78168 2.6667,0.88501 0,-1.78168 0,0z"
                                          Fill="Gray"
                                          Stretch="Uniform" />
                                </Grid>
                            </Border>
                            <Border 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">
                                <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="Red"
                                      SnapsToDevicePixels="True"
                                      Stretch="Fill" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Note:

The above custom style is only applicable for the WPF platform. For WinRT and Windows Phone, UWP refer to the following sample links.

The following screenshot shows to differentiate the GridComboBoxColumn from other columns,

GridColumn display mode