GridViewCheckBoxColumn - Checkbox tick color does not follow Expression_Dark Theme

[Joel]

telerik version - 2018.2.515.40

Check box tick color in GridViewCheckBoxColumn does not react to Expression Dark theme when it is in view mode.

<telerik:GridViewCheckBoxColumn Header="{Binding OperatorCaption, Mode=OneWay}" DataMemberBinding="{Binding opr}"/>
<telerik:GridViewCheckBoxColumn Header="{Binding TechnicianCaption, Mode=OneWay}" DataMemberBinding="{Binding technician}"/>
<telerik:GridViewCheckBoxColumn Header="{Binding EngineerCaption, Mode=OneWay}" DataMemberBinding="{Binding engineer}"/>
<telerik:GridViewCheckBoxColumn Header="{Binding AdminCaption, Mode=OneWay}" DataMemberBinding="{Binding administrator}"/>

[Vladimir Stoyanov]

Hello Joel,

Thank you for the attached picture.

In order to change the color of the path within the checkbox in view mode, you can extract and modify the GridViewCheckBox ControlTemplate for the Expression_Dark theme. You can just change the Stroke of the element with x:Name="CheckedPath". Here is how that would look:

<ControlTemplate x:Key="GridViewCheckBoxTemplate" TargetType="telerik:GridViewCheckBox">
            <Grid HorizontalAlignment="Left" VerticalAlignment="Center" Width="12" Height="12">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="CheckedPath" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked"/>
                        <VisualState x:Name="Indeterminate">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="IndeterminatePath" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderThickness="1" Background="#FF575859">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0.04,0.5">
                            <GradientStop Color="#FF707070" Offset="0"/>
                            <GradientStop Color="#FFA3A3A3" Offset="0.5"/>
                            <GradientStop Color="#FF707070" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <Grid>
                        <Rectangle x:Name="IndeterminatePath" Visibility="Collapsed" Fill="#FF353535" HorizontalAlignment="Left" VerticalAlignment="Top" Height="1" Width="7" Margin="2 5 0 0"/>
                        <Path x:Name="CheckedPath"
                            Visibility="Collapsed"
                            Stretch="Fill"
                            Stroke="White"
                            Data="M32.376187,77.162509 L35.056467,80.095277 40.075451,70.02144"
                            StrokeThickness="1.5"
                            Height="7"
                            Width="7"/>
                    </Grid>
                </Border>
            </Grid>
        </ControlTemplate>
        <Style TargetType="telerik:GridViewCheckBox">
            <Setter Property="Template" Value="{StaticResource GridViewCheckBoxTemplate}"/>
        </Style>

Please note that the recommended approach for modifying control templates is by using implicit styles as suggested above with the NoXaml dlls.

Please give this approach a try and let me know if it is suitable for your scenario.

Regards,
Vladimir Stoyanov
Progress Telerik

[Joel]

Hi Vladimir,

  Unfortunately i am using StyleManager method to apply the ExpressionDark theme.

StyleManager.ApplicationTheme = new Expression_DarkTheme();

 

    Reading from this post: GridViewCheckBoxColumn Applied theme problem -

"GridViewCheckBoxColumn uses GridViewCheckBox element in view mode and standard MS CheckBox in edit mode", it gives me the impression that GridViewCheckBox should react to the application theme out-of-the-box.

    Will there be a fix to resolve this issue?

 

 

[Vladimir Stoyanov]

Hello Joel,

I researched this scenario some more and you are indeed correct that the checkbox should be white by default in view mode. This is why I have logged an item in our feedback portal for this:GridView: GridViewCheckBox does not have the correct foreground in Expression_Dark theme. I have also awarded you with some telerik points for bringing our attention to that.

In the meantime even though you are using StyleManager, you can still use the suggested approach from my previous reply of modifying the ControlTemplate of the GridViewCheckBox.

Regards,
Vladimir Stoyanov
Progress Telerik

[Joel]

Hi Vladimir,

   I can confirm the suggested workaround helps to fix the problem.

   I am also mindful of the statement stated here: https://docs.telerik.com/devtools/wpf/styling-and-appearance/styling-apperance-setting-a-theme-overview#setting-a-theme-using-implicit-styles

1. You should not set application theme using the StyleManager when using implicit styles.
2. Merging theme resource dictionaries when using StyleManager (mixing implicit styles theming and StyleManager) is not supported. Use StyleManager only with Xaml dlls, or Implicit Styles only with NoXaml binaries.
   
   
      

[Vladimir Stoyanov]

Hello Joel,

You are indeed correct that mixing StyleManager with implicit styles is not generally recommended since it could cause problems. This is why I only recommended it as a temporary workaround.

However, I am happy to inform you that the fix for the issue is already available in our Latest Internal Build(version 2018.2.604) which you can download from your telerik account. It will also be available in the upcoming official release R2 2018 SP1 scheduled for the end of June. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Stéphane]

Hello, I have the version 2019.2.618.45 of the Wpf  controls and the "problem" is still there...

Some news?

Regards

Stephane

[Vladimir Stoyanov]

Hello Stephane, 

I tested the scenario with the "2019.2.618.45" version of the UI for WPF dlls, however on my end the GridViewCheckBox (displayed when the cell is in view mode) is white in the Expression_Dark theme. That is why I am attaching the sample project, which I used for testing purposes. Please, check it out and let me know, if I am missing something.

Regards,
Vladimir Stoyanov
Progress Telerik

[Stéphane]

Hello Vladimir,

Thank you for your example project, the checkboxes are displayed correctly. So it's not a question of the library version. The grid where the display of checkboxes is not correct in my project, is not in the executable but in an assembly, so I will investigate in this direction.

Regards

Stéphane Bertoli

[Stéphane]

The problem is simply that when a checkbox is in a readonly column, it is almost impossible to see if it is checked or not.

Is there some property similar to the "Windows8Palette.Palette.DisabledOpacity" property to make the content of the ReadOnly controls more "readable"?

[Vladimir Stoyanov]

Hello Stéphane,

The Expression_Dark theme does not expose a palette through which colors can be modified. 

I tried setting the IsReadOnly property of the GridViewCheckBoxColumn from the sample project attached to my previous reply, however on my end the state of the checkbox is easily identifiable. 

That said, in order to modify the control, you can extract and edit the ControlTemplate of the GridViewCheckBox for the ExpressionDark theme.

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[Stéphane]

Well, I'm absolutely sorry. While rereading my code I realized that I used GridViewDataColumn instead of GridViewCheckBoxColumn. It's so stupid.

One can only wonder why the use of a binding on a Boolean with a GridViewDataColumn results in an "unreadable" CheckBox.

Thank you. 

[Vladimir Stoyanov]

Hello Stéphane,

The GridViewCheckBoxColumn actually displays a GridViewCheckBox when the cells are in view mode. On the other hand, when a GridViewDataColumn is used, a normal WPF CheckBox element will be displayed. 

With the above information in mind, in order to change the styling of the CheckBox element, you can extract and edit its ControlTemplate for that theme. Alternatively, you can also use a GridViewCheckBoxColumn.

Hope this helps.

Regards,
Vladimir Stoyanov
Progress Telerik