Category / Section
How to resolve the mirror issue in GridCheckBoxColumn when the FlowDirection is changed?
3 mins read
In WPF, when changing the FlowDirection as RightToLeft, a mirrored image appears for CheckBox control and you can see it displayed here in the following screenshot, with GridCheckBox column in SfDataGrid.
Figure 1: Mirror image of the column
Based on the discussion about this in MSDN forum, you can fix it by changing the default control template of CheckBox and set the FlowDirection to the Path object as LeftToRight as shown in the following code example.
XAML
<Style TargetType="{x:Type CheckBox}"> <Setter Property="FocusVisualStyle"> <Setter.Value> <Style> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> <Setter Property="Background" Value="White"/> <Setter Property="BorderBrush" Value="#FF707070"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type CheckBox}"> <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <Grid x:Name="markGrid"> <Path FlowDirection="LeftToRight" x:Name="optionMark" Data="F1M9.97498,1.22334L4.6983,9.09834 4.52164,9.09834 0,5.19331 1.27664,3.52165 4.255,6.08833 8.33331,1.52588E-05 9.97498,1.22334z" Fill="#FF212121" Margin="1" Opacity="0" Stretch="None"/> <Rectangle x:Name="indeterminateMark" Fill="#FF212121" Margin="2" Opacity="0"/> </Grid> </Border> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="HasContent" Value="True"> <Setter Property="FocusVisualStyle"> <Setter.Value> <Style> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> <Setter Property="Padding" Value="4,-1,0,0"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" TargetName="checkBoxBorder" Value="#FFF3F9FF"/> <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#FF5593FF"/> <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/> <Setter Property="Fill" TargetName="indeterminateMark" Value="#FF212121"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" TargetName="checkBoxBorder" Value="#FFE6E6E6"/> <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#FFBCBCBC"/> <Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/> <Setter Property="Fill" TargetName="indeterminateMark" Value="#FF707070"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" TargetName="checkBoxBorder" Value="#FFD9ECFF"/> <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#FF3C77DD"/> <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/> <Setter Property="Fill" TargetName="indeterminateMark" Value="#FF212121"/> </Trigger> <Trigger Property="IsChecked" Value="True"> <Setter Property="Opacity" TargetName="optionMark" Value="1"/> <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/> </Trigger> <Trigger Property="IsChecked" Value="{x:Null}"> <Setter Property="Opacity" TargetName="optionMark" Value="0"/> <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
By setting the default value of the FlowDirection to LeftToRight, you can overcome this issue in the GridCheckBoxColumn of the SfDataGrid.
Figure 2: FlowDirection LeftToRight
Note: This mirror bug in CheckBox appears only in Windows 8 and Windows 8.1 OS.
Sample Link