Net maui windows platform how to change checkbox tick color or disable tick ?

Question

Net maui windows platform how to change checkbox tick color or disable tick ?

Sami 966

Net maui windows platform how to change checkbox tick color or disable tick ? thanks

Accepted answer

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

For this requirement, you need to override the default style of CheckBox in WinUI3.

Step 1. Add the following code into Platforms/Windows/App.xaml. Since the default style of CheckBox is too long to post to Q&A, you can refer to the first step in Can we able to modify the design of toggle switch in maui.

Step 2. You' need to find the <VisualState> tags for CheckedPressed and CheckedPointerOver, then, search the following code:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#00FF00" />
                                                </ObjectAnimationUsingKeyFrames>

Step 3. Modify the Value of the value in both tags to the RGP value to customize the color of the tick.

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Sami 966 Reputation points

2024-03-04T07:38:30.92+00:00

I could not understand sorry can you do sample for me thanks...
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-03-04T08:27:45.2133333+00:00
To change the default style of a control in MAUI, first find the generic.xaml file that contains all the default styles. This file can be found in two paths.

Each theme resource is part of the XAML file themeresources.xaml. For design purposes, themeresources.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. The resource dictionaries in themeresources.xaml are also reproduced in generic.xaml in the same directory.

Or

%USERPROFILE%.nuget\packages\microsoft.windowsappsdk\1.x.x\lib\uap10.0\Microsoft.UI\Themes

Then, you need to find the default style for CheckBox. You could search the key word Default style for Windows.UI.Xaml.Controls.CheckBox.After that, you'll need to copy the entire Style tag paragraph into App.xaml in the Windows folder of your MAUI project.

<maui:MauiWinUIApplication ...> <maui:MauiWinUIApplication.Resources>  from generic.xaml file. </maui:MauiWinUIApplication.Resources> </maui:MauiWinUIApplication>

Finally, you'll need to follow the last two steps in the answer to customize the tick color.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-03-07T06:48:00.7966667+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.

Sami 966

I found something like this but I need just change tick color ?

  <SolidColorBrush x:Key="BackgroundColor" Color="#FFFFFF" />

  <StaticResource x:Key="CheckBoxBorderBrushUnchecked" ResourceKey="BackgroundColor" />

  <Style x:Key="ExpanderCheckBoxStyle" TargetType="CheckBox">

      <Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundUnchecked}" />

      <Setter Property="Foreground" Value="{ThemeResource CheckBoxForegroundUnchecked}" />

      <Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderBrushUnchecked}" />

      <Setter Property="Padding" Value="8,5,0,0" />

      <Setter Property="HorizontalAlignment" Value="Left" />

      <Setter Property="VerticalAlignment" Value="Center" />

      <Setter Property="HorizontalContentAlignment" Value="Left" />

      <Setter Property="VerticalContentAlignment" Value="Top" />

      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />

      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />

      <Setter Property="MinWidth" Value="35" />

      <Setter Property="MinHeight" Value="35" />

      <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />

      <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />

      <Setter Property="CornerRadius" Value="3" />

      <Setter Property="Template">

          <Setter.Value>

              <ControlTemplate TargetType="CheckBox">

                  <Grid x:Name="RootGrid"

              Background="{TemplateBinding Background}"

              BorderBrush="{TemplateBinding BorderBrush}"

              BorderThickness="{TemplateBinding BorderThickness}"

              CornerRadius="{TemplateBinding CornerRadius}" >

                      <VisualStateManager.VisualStateGroups>

                          <VisualStateGroup x:Name="CombinedStates">

                              <VisualState x:Name="UncheckedNormal">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                      </ObjectAnimationUsingKeyFrames>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                              <VisualState x:Name="UncheckedPointerOver">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                      </ObjectAnimationUsingKeyFrames>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                              <VisualState x:Name="UncheckedPressed">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                      </ObjectAnimationUsingKeyFrames>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                              <VisualState x:Name="UncheckedDisabled"/>

                              <VisualState x:Name="CheckedNormal">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                      </ObjectAnimationUsingKeyFrames>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                              <VisualState x:Name="CheckedPointerOver">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                      </ObjectAnimationUsingKeyFrames>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                              <VisualState x:Name="CheckedPressed">

                                  <Storyboard>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                      </ObjectAnimationUsingKeyFrames>

                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnCheckGlyph"

                                                           Storyboard.TargetProperty="Visibility">

                                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                      </ObjectAnimationUsingKeyFrames>

                                  </Storyboard>

                              </VisualState>

                              <VisualState x:Name="CheckedDisabled"/>

                              <VisualState x:Name="IndeterminateNormal"/>

                              <VisualState x:Name="IndeterminatePointerOver"/>

                              <VisualState x:Name="IndeterminatePressed"/>

                              <VisualState x:Name="IndeterminateDisabled"/>

                          </VisualStateGroup>

                      </VisualStateManager.VisualStateGroups>

                      <Grid.ColumnDefinitions>

                          <ColumnDefinition Width="20" />

                          <ColumnDefinition Width="*" />

                      </Grid.ColumnDefinitions>

                      <Grid VerticalAlignment="Top" Height="32">

                          <Rectangle x:Name="NormalRectangle"

                          Stroke="{ThemeResource CheckBoxCheckBackgroundStrokeUnchecked}"

                          StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"

                          UseLayoutRounding="False"

                          Height="20"

                          Width="20" />

                          <FontIcon x:Name="CheckGlyph"

                          FontFamily="{ThemeResource SymbolThemeFontFamily}"

                          Glyph="&#xE738;"

                          FontSize="12"

                          Foreground="Black"

                          Opacity="1" />

                          <FontIcon x:Name="UnCheckGlyph"

                          FontFamily="{ThemeResource SymbolThemeFontFamily}"

                          Glyph="&#xE710;"

                          FontSize="12"

                          Foreground="Black"

                          Opacity="1"/>

                      </Grid>

                      <ContentPresenter x:Name="ContentPresenter"

                                ContentTemplate="{TemplateBinding ContentTemplate}"

                                ContentTransitions="{TemplateBinding ContentTransitions}"

                                Content="{TemplateBinding Content}"

                                Margin="{TemplateBinding Padding}"

                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                Grid.Column="1"

                                AutomationProperties.AccessibilityView="Raw"

                                TextWrapping="Wrap" />

                  </Grid>

              </ControlTemplate>

          </Setter.Value>

      </Setter>

  </Style>

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-03-07T09:05:56.9166667+00:00

Even if you only need to change the color of the tick, you will need to copy all the default styles to your maui project, which is determined by the way WinUI3 changes the default styles.

Share via

Net maui windows platform how to change checkbox tick color or disable tick ?

0 additional answers

Your answer