This is a migrated thread and some comments may be shown as answers.

GridViewCheckBoxColumn - Checkbox tick color does not follow Expression_Dark Theme

12 Answers 171 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Joel asked on 25 May 2018, 03:13 AM

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}"/>

12 Answers, 1 is accepted

Sort by
0
Vladimir Stoyanov
Telerik team
answered on 29 May 2018, 10:58 AM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Joel
Top achievements
Rank 1
answered on 30 May 2018, 12:00 AM

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?

 

 

0
Vladimir Stoyanov
Telerik team
answered on 31 May 2018, 01:06 PM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Joel
Top achievements
Rank 1
answered on 01 Jun 2018, 02:23 AM

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.


       
0
Accepted
Vladimir Stoyanov
Telerik team
answered on 05 Jun 2018, 12:38 PM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Stéphane
Top achievements
Rank 1
Iron
answered on 29 Aug 2019, 05:48 AM

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

Some news?

Regards

Stephane

0
Vladimir Stoyanov
Telerik team
answered on 02 Sep 2019, 11:05 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Stéphane
Top achievements
Rank 1
Iron
answered on 02 Sep 2019, 11:22 AM

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

0
Stéphane
Top achievements
Rank 1
Iron
answered on 13 Sep 2019, 07:08 AM

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"?

0
Vladimir Stoyanov
Telerik team
answered on 16 Sep 2019, 03:26 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Stéphane
Top achievements
Rank 1
Iron
answered on 17 Sep 2019, 05:38 AM
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. 
0
Vladimir Stoyanov
Telerik team
answered on 17 Sep 2019, 03:13 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Joel
Top achievements
Rank 1
Answers by
Vladimir Stoyanov
Telerik team
Joel
Top achievements
Rank 1
Stéphane
Top achievements
Rank 1
Iron
Share this question
or