Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

CheckBox Windows 10 Style #3534

Merged
merged 4 commits into from
Jan 6, 2020
Merged

CheckBox Windows 10 Style #3534

merged 4 commits into from
Jan 6, 2020

Conversation

timunie
Copy link
Collaborator

@timunie timunie commented Jun 17, 2019 •
edited by punker76
Loading

Describe the changes you have made to improve this project

Added a CheckBoxHelper to enable different CheckBox designs. Thanks to this helper class I created a style similar to the UWP CheckBox.

The main advantage of this approach is, that it is not a breaking change, unless the new style is the default style. Moreover the user can create CheckBoxStyles on his own, e.g. an eye for Visibility.

Additional context

Sample XAML:

            <CheckBox Margin="{StaticResource ControlMargin}"
                      Content="Enabled"
                      IsChecked="True" />
            <CheckBox Margin="{StaticResource ControlMargin}"
                      Content="Windows 10 Style"
                      IsChecked="{x:Null}"
                      IsThreeState="True" 
                      Style="{StaticResource MahApps.Metro.Styles.CheckBox.Win10}"/>
            <CheckBox Margin="{StaticResource ControlMargin}"
                      Content="This is a custom Glyph in a rounded CheckBox"
                      IsEnabled="True"
                      BorderThickness="2"
                      Controls:CheckBoxHelper.CheckedBorderBrush="DarkRed"
                      Controls:CheckBoxHelper.CheckedBackgroundBrush="LightGreen"
                      Controls:CheckBoxHelper.CheckBoxSize="40"
                      Controls:ControlsHelper.CornerRadius ="15">
                <Controls:CheckBoxHelper.CheckedGlyphTemplate>
                    <DataTemplate>
                        <iconPacks:PackIconFontAwesome Kind="EyeSolid" 
                                                       Width="30"  
                                                       Height="30" 
                                                       Foreground="DarkGreen" 
                                                       HorizontalAlignment="Center" 
                                                       VerticalAlignment="Center"/>
                    </DataTemplate>
                </Controls:CheckBoxHelper.CheckedGlyphTemplate>
            </CheckBox>

image

image

Closed Issues

Closes #3136

@timunie
Copy link
Collaborator Author

timunie commented Jun 24, 2019

@punker76 In Win10 the Checkbox size is 20x20 px, in MahApps it is 18x18 px. What do you think, which value should we use as default for this style?

@Nuklon
Copy link
Contributor

Nuklon commented Jun 28, 2019 •
edited
Loading

@punker76 In Win10 the Checkbox size is 20x20 px, in MahApps it is 18x18 px. What do you think, which value should we use as default for this style?

W10 style should use W10 size I think, so 20x20.

@punker76 punker76 force-pushed the CheckBoxWin10Style branch from 1cc40cd to ac01ab5 Compare July 11, 2019 21:07
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 2 times, most recently from ae50a0e to 56a44b8 Compare July 29, 2019 07:09
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 7 times, most recently from 01462e2 to b8e813b Compare September 2, 2019 21:16
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 2 times, most recently from 91f81b5 to 54621ef Compare September 25, 2019 22:25
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 3 times, most recently from 9deacf7 to 0e9c257 Compare October 14, 2019 10:42
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 2 times, most recently from 3e533db to b524281 Compare October 29, 2019 15:47
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 2 times, most recently from 77f4a5f to d5989f6 Compare November 4, 2019 15:47
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 4 times, most recently from 936c2ed to e2a8d22 Compare November 21, 2019 16:04
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 3 times, most recently from 64613ed to 5a747ff Compare November 30, 2019 12:34
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 2 times, most recently from 975c1ee to 7303ebf Compare December 12, 2019 14:52
@punker76 punker76 force-pushed the CheckBoxWin10Style branch 3 times, most recently from bcf949e to 9f8b442 Compare December 29, 2019 22:09
@punker76
(MahAppsGH-3136) Introduce CheckBoxHelper and new Windows 10 CheckBox…
20c6878 
… Style

- A CheckBoxHelper was introduced to allow different Glyphs and Brushes for different Styles
- Introduced a new Windows 10 CheckBox Style that switches the colors for a better visibility, especially with a dark theme
	- Use Win10 check glyph Xaml path data from "Segoe MDL2 Assets"
	- Set Win10 BorderThickness to 2

Code format


renaming
@punker76 punker76 force-pushed the CheckBoxWin10Style branch from 9f8b442 to 20c6878 Compare January 5, 2020 17:24
@punker76 punker76 added this to the 2.0.0 milestone Jan 5, 2020
@punker76 punker76 self-assigned this Jan 5, 2020
@punker76
Copy link
Member

punker76 commented Jan 6, 2020

2020-01-06_22h25_19

2020-01-06_22h25_34

Colors and Brushes taken from Win10 UWP

New Colors

MahApps.Colors.SystemAccent
MahApps.Colors.SystemAltHigh
MahApps.Colors.SystemAltLow
MahApps.Colors.SystemAltMedium
MahApps.Colors.SystemAltMediumHigh
MahApps.Colors.SystemAltMediumLow
MahApps.Colors.SystemBaseHigh
MahApps.Colors.SystemBaseLow
MahApps.Colors.SystemBaseMedium
MahApps.Colors.SystemBaseMediumHigh
MahApps.Colors.SystemBaseMediumLow
MahApps.Colors.SystemChromeAltLow
MahApps.Colors.SystemChromeBlackHigh
MahApps.Colors.SystemChromeBlackLow
MahApps.Colors.SystemChromeBlackMediumLow
MahApps.Colors.SystemChromeBlackMedium
MahApps.Colors.SystemChromeDisabledHigh
MahApps.Colors.SystemChromeDisabledLow
MahApps.Colors.SystemChromeHigh
MahApps.Colors.SystemChromeLow
MahApps.Colors.SystemChromeMedium
MahApps.Colors.SystemChromeMediumLow
MahApps.Colors.SystemChromeWhite
MahApps.Colors.SystemChromeGray
MahApps.Colors.SystemListLow
MahApps.Colors.SystemListMedium
MahApps.Colors.SystemErrorText

New Brushes

MahApps.Brushes.SystemControlBackgroundAccent
MahApps.Brushes.SystemControlBackgroundAltHigh
MahApps.Brushes.SystemControlBackgroundAltMediumHigh
MahApps.Brushes.SystemControlBackgroundAltMedium
MahApps.Brushes.SystemControlBackgroundAltMediumLow
MahApps.Brushes.SystemControlBackgroundBaseHigh
MahApps.Brushes.SystemControlBackgroundBaseLow
MahApps.Brushes.SystemControlBackgroundBaseMedium
MahApps.Brushes.SystemControlBackgroundBaseMediumHigh
MahApps.Brushes.SystemControlBackgroundBaseMediumLow
MahApps.Brushes.SystemControlBackgroundChromeBlackHigh
MahApps.Brushes.SystemControlBackgroundChromeBlackMedium
MahApps.Brushes.SystemControlBackgroundChromeBlackLow
MahApps.Brushes.SystemControlBackgroundChromeBlackMediumLow
MahApps.Brushes.SystemControlBackgroundChromeMedium
MahApps.Brushes.SystemControlBackgroundChromeMediumLow
MahApps.Brushes.SystemControlBackgroundChromeWhite
MahApps.Brushes.SystemControlBackgroundListLow
MahApps.Brushes.SystemControlBackgroundListMedium
MahApps.Brushes.SystemControlDisabledAccent
MahApps.Brushes.SystemControlDisabledBaseHigh
MahApps.Brushes.SystemControlDisabledBaseLow
MahApps.Brushes.SystemControlDisabledBaseMediumLow
MahApps.Brushes.SystemControlDisabledChromeDisabledHigh
MahApps.Brushes.SystemControlDisabledChromeDisabledLow
MahApps.Brushes.SystemControlDisabledChromeHigh
MahApps.Brushes.SystemControlDisabledChromeMediumLow
MahApps.Brushes.SystemControlDisabledListMedium
MahApps.Brushes.SystemControlDisabledTransparent
MahApps.Brushes.SystemControlFocusVisualPrimary
MahApps.Brushes.SystemControlFocusVisualSecondary
MahApps.Brushes.SystemControlRevealFocusVisual
MahApps.Brushes.SystemControlForegroundAccent
MahApps.Brushes.SystemControlForegroundAltHigh
MahApps.Brushes.SystemControlForegroundAltMediumHigh
MahApps.Brushes.SystemControlForegroundBaseHigh
MahApps.Brushes.SystemControlForegroundBaseLow
MahApps.Brushes.SystemControlForegroundBaseMedium
MahApps.Brushes.SystemControlForegroundBaseMediumHigh
MahApps.Brushes.SystemControlForegroundBaseMediumLow
MahApps.Brushes.SystemControlForegroundChromeBlackHigh
MahApps.Brushes.SystemControlForegroundChromeHigh
MahApps.Brushes.SystemControlForegroundChromeMedium
MahApps.Brushes.SystemControlForegroundChromeWhite
MahApps.Brushes.SystemControlForegroundChromeDisabledLow
MahApps.Brushes.SystemControlForegroundChromeGray
MahApps.Brushes.SystemControlForegroundListLow
MahApps.Brushes.SystemControlForegroundListMedium
MahApps.Brushes.SystemControlForegroundTransparent
MahApps.Brushes.SystemControlForegroundChromeBlackMedium
MahApps.Brushes.SystemControlForegroundChromeBlackMediumLow
MahApps.Brushes.SystemControlHighlightAccent
MahApps.Brushes.SystemControlHighlightAltAccent
MahApps.Brushes.SystemControlHighlightAltAltHigh
MahApps.Brushes.SystemControlHighlightAltBaseHigh
MahApps.Brushes.SystemControlHighlightAltBaseLow
MahApps.Brushes.SystemControlHighlightAltBaseMedium
MahApps.Brushes.SystemControlHighlightAltBaseMediumHigh
MahApps.Brushes.SystemControlHighlightAltAltMediumHigh
MahApps.Brushes.SystemControlHighlightAltBaseMediumLow
MahApps.Brushes.SystemControlHighlightAltListAccentHigh
MahApps.Brushes.SystemControlHighlightAltListAccentLow
MahApps.Brushes.SystemControlHighlightAltListAccentMedium
MahApps.Brushes.SystemControlHighlightAltChromeWhite
MahApps.Brushes.SystemControlHighlightAltTransparent
MahApps.Brushes.SystemControlHighlightBaseHigh
MahApps.Brushes.SystemControlHighlightBaseLow
MahApps.Brushes.SystemControlHighlightBaseMedium
MahApps.Brushes.SystemControlHighlightBaseMediumHigh
MahApps.Brushes.SystemControlHighlightBaseMediumLow
MahApps.Brushes.SystemControlHighlightChromeAltLow
MahApps.Brushes.SystemControlHighlightChromeHigh
MahApps.Brushes.SystemControlHighlightListAccentHigh
MahApps.Brushes.SystemControlHighlightListAccentLow
MahApps.Brushes.SystemControlHighlightListAccentMedium
MahApps.Brushes.SystemControlHighlightListMedium
MahApps.Brushes.SystemControlHighlightListLow
MahApps.Brushes.SystemControlHighlightChromeWhite
MahApps.Brushes.SystemControlHighlightTransparent
MahApps.Brushes.SystemControlHyperlinkText
MahApps.Brushes.SystemControlHyperlinkBaseHigh
MahApps.Brushes.SystemControlHyperlinkBaseMedium
MahApps.Brushes.SystemControlHyperlinkBaseMediumHigh
MahApps.Brushes.SystemControlPageBackgroundAltMedium
MahApps.Brushes.SystemControlPageBackgroundAltHigh
MahApps.Brushes.SystemControlPageBackgroundMediumAltMedium
MahApps.Brushes.SystemControlPageBackgroundBaseLow
MahApps.Brushes.SystemControlPageBackgroundBaseMedium
MahApps.Brushes.SystemControlPageBackgroundListLow
MahApps.Brushes.SystemControlPageBackgroundChromeLow
MahApps.Brushes.SystemControlPageBackgroundChromeMediumLow
MahApps.Brushes.SystemControlPageBackgroundTransparent
MahApps.Brushes.SystemControlPageTextBaseHigh
MahApps.Brushes.SystemControlPageTextBaseMedium
MahApps.Brushes.SystemControlPageTextChromeBlackMediumLow
MahApps.Brushes.SystemControlTransparent
MahApps.Brushes.SystemControlErrorTextForeground
MahApps.Brushes.SystemControlTransientBorder

New CheckBox Brushes

MahApps.Brushes.CheckBox.ForegroundUnchecked
MahApps.Brushes.CheckBox.ForegroundUncheckedMouseOver
MahApps.Brushes.CheckBox.ForegroundUncheckedPressed
MahApps.Brushes.CheckBox.ForegroundUncheckedDisabled
MahApps.Brushes.CheckBox.ForegroundChecked
MahApps.Brushes.CheckBox.ForegroundCheckedMouseOver
MahApps.Brushes.CheckBox.ForegroundCheckedPressed
MahApps.Brushes.CheckBox.ForegroundCheckedDisabled
MahApps.Brushes.CheckBox.ForegroundIndeterminate
MahApps.Brushes.CheckBox.ForegroundIndeterminateMouseOver
MahApps.Brushes.CheckBox.ForegroundIndeterminatePressed
MahApps.Brushes.CheckBox.ForegroundIndeterminateDisabled
MahApps.Brushes.CheckBox.BackgroundUnchecked
MahApps.Brushes.CheckBox.BackgroundUncheckedMouseOver
MahApps.Brushes.CheckBox.BackgroundUncheckedPressed
MahApps.Brushes.CheckBox.BackgroundUncheckedDisabled
MahApps.Brushes.CheckBox.BackgroundChecked
MahApps.Brushes.CheckBox.BackgroundCheckedMouseOver
MahApps.Brushes.CheckBox.BackgroundCheckedPressed
MahApps.Brushes.CheckBox.BackgroundCheckedDisabled
MahApps.Brushes.CheckBox.BackgroundIndeterminate
MahApps.Brushes.CheckBox.BackgroundIndeterminateMouseOver
MahApps.Brushes.CheckBox.BackgroundIndeterminatePressed
MahApps.Brushes.CheckBox.BackgroundIndeterminateDisabled
MahApps.Brushes.CheckBox.BorderBrushUnchecked
MahApps.Brushes.CheckBox.BorderBrushUncheckedMouseOver
MahApps.Brushes.CheckBox.BorderBrushUncheckedPressed
MahApps.Brushes.CheckBox.BorderBrushUncheckedDisabled
MahApps.Brushes.CheckBox.BorderBrushChecked
MahApps.Brushes.CheckBox.BorderBrushCheckedMouseOver
MahApps.Brushes.CheckBox.BorderBrushCheckedPressed
MahApps.Brushes.CheckBox.BorderBrushCheckedDisabled
MahApps.Brushes.CheckBox.BorderBrushIndeterminate
MahApps.Brushes.CheckBox.BorderBrushIndeterminateMouseOver
MahApps.Brushes.CheckBox.BorderBrushIndeterminatePressed
MahApps.Brushes.CheckBox.BorderBrushIndeterminateDisabled
MahApps.Brushes.CheckBox.CheckBorderBrushUnchecked
MahApps.Brushes.CheckBox.CheckBorderBrushUncheckedMouseOver
MahApps.Brushes.CheckBox.CheckBorderBrushUncheckedPressed
MahApps.Brushes.CheckBox.CheckBorderBrushUncheckedDisabled
MahApps.Brushes.CheckBox.CheckBorderBrushChecked
MahApps.Brushes.CheckBox.CheckBorderBrushCheckedMouseOver
MahApps.Brushes.CheckBox.CheckBorderBrushCheckedPressed
MahApps.Brushes.CheckBox.CheckBorderBrushCheckedDisabled
MahApps.Brushes.CheckBox.CheckBorderBrushIndeterminate
MahApps.Brushes.CheckBox.CheckBorderBrushIndeterminateMouseOver
MahApps.Brushes.CheckBox.CheckBorderBrushIndeterminatePressed
MahApps.Brushes.CheckBox.CheckBorderBrushIndeterminateDisabled
MahApps.Brushes.CheckBox.CheckBackgroundUnchecked
MahApps.Brushes.CheckBox.CheckBackgroundUncheckedMouseOver
MahApps.Brushes.CheckBox.CheckBackgroundUncheckedPressed
MahApps.Brushes.CheckBox.CheckBackgroundUncheckedDisabled
MahApps.Brushes.CheckBox.CheckBackgroundChecked
MahApps.Brushes.CheckBox.CheckBackgroundCheckedMouseOver
MahApps.Brushes.CheckBox.CheckBackgroundCheckedPressed
MahApps.Brushes.CheckBox.CheckBackgroundCheckedDisabled
MahApps.Brushes.CheckBox.CheckBackgroundIndeterminate
MahApps.Brushes.CheckBox.CheckBackgroundIndeterminateMouseOver
MahApps.Brushes.CheckBox.CheckBackgroundIndeterminatePressed
MahApps.Brushes.CheckBox.CheckBackgroundIndeterminateDisabled
MahApps.Brushes.CheckBox.CheckGlyphForegroundUnchecked
MahApps.Brushes.CheckBox.CheckGlyphForegroundUncheckedMouseOver
MahApps.Brushes.CheckBox.CheckGlyphForegroundUncheckedPressed
MahApps.Brushes.CheckBox.CheckGlyphForegroundUncheckedDisabled
MahApps.Brushes.CheckBox.CheckGlyphForegroundChecked
MahApps.Brushes.CheckBox.CheckGlyphForegroundCheckedMouseOver
MahApps.Brushes.CheckBox.CheckGlyphForegroundCheckedPressed
MahApps.Brushes.CheckBox.CheckGlyphForegroundCheckedDisabled
MahApps.Brushes.CheckBox.CheckGlyphForegroundIndeterminate
MahApps.Brushes.CheckBox.CheckGlyphForegroundIndeterminateMouseOver
MahApps.Brushes.CheckBox.CheckGlyphForegroundIndeterminatePressed
MahApps.Brushes.CheckBox.CheckGlyphForegroundIndeterminateDisabled

New CheckBoxHelper attached properties

CheckSize
CheckBorderThickness
CheckGlyphUnchecked
CheckGlyphUncheckedTemplate
ForegroundUnchecked
BackgroundUnchecked
BorderBrushUnchecked
CheckBackgroundUnchecked
CheckBorderBrushUnchecked
CheckGlyphForegroundUnchecked
ForegroundUncheckedMouseOver
BackgroundUncheckedMouseOver
BorderBrushUncheckedMouseOver
CheckBackgroundUncheckedMouseOver
CheckBorderBrushUncheckedMouseOver
CheckGlyphForegroundUncheckedMouseOver
ForegroundUncheckedPressed
BackgroundUncheckedPressed
BorderBrushUncheckedPressed
CheckBackgroundUncheckedPressed
CheckBorderBrushUncheckedPressed
CheckGlyphForegroundUncheckedPressed
ForegroundUncheckedDisabled
BackgroundUncheckedDisabled
BorderBrushUncheckedDisabled
CheckBackgroundUncheckedDisabled
CheckBorderBrushUncheckedDisabled
CheckGlyphForegroundUncheckedDisabled
CheckGlyphCheckedTemplate
ForegroundChecked
BackgroundChecked
BorderBrushChecked
CheckBackgroundChecked
CheckBorderBrushChecked
CheckGlyphForegroundChecked
ForegroundCheckedMouseOver
BackgroundCheckedMouseOver
BorderBrushCheckedMouseOver
CheckBackgroundCheckedMouseOver
CheckBorderBrushCheckedMouseOver
CheckGlyphForegroundCheckedMouseOver
ForegroundCheckedPressed
BackgroundCheckedPressed
BorderBrushCheckedPressed
CheckBackgroundCheckedPressed
CheckBorderBrushCheckedPressed
CheckGlyphForegroundCheckedPressed
ForegroundCheckedDisabled
BackgroundCheckedDisabled
BorderBrushCheckedDisabled
CheckBackgroundCheckedDisabled
CheckBorderBrushCheckedDisabled
CheckGlyphForegroundCheckedDisabled
CheckGlyphIndeterminateTemplate
ForegroundIndeterminate
BackgroundIndeterminate
BorderBrushIndeterminate
CheckBackgroundIndeterminate
CheckBorderBrushIndeterminate
CheckGlyphForegroundIndeterminate
ForegroundIndeterminateMouseOver
BackgroundIndeterminateMouseOver
BorderBrushIndeterminateMouseOver
CheckBackgroundIndeterminateMouseOver
CheckBorderBrushIndeterminateMouseOver
CheckGlyphForegroundIndeterminateMouseOver
ForegroundIndeterminatePressed
BackgroundIndeterminatePressed
BorderBrushIndeterminatePressed
CheckBackgroundIndeterminatePressed
CheckBorderBrushIndeterminatePressed
CheckGlyphForegroundIndeterminatePressed
ForegroundIndeterminateDisabled
BackgroundIndeterminateDisabled
BorderBrushIndeterminateDisabled
CheckBackgroundIndeterminateDisabled
CheckBorderBrushIndeterminateDisabled
CheckGlyphForegroundIndeterminateDisabled

@punker76 punker76 merged commit 81b2d31 into MahApps:develop Jan 6, 2020
@timunie timunie deleted the CheckBoxWin10Style branch January 7, 2020 05:54
@timunie
Copy link
Collaborator Author

timunie commented Jan 7, 2020

Good Morning @punker76,

absolutely impressing how you improved this PR! Many thanks!! 👍

Happy coding,
Tim

@timunie timunie mentioned this pull request Feb 12, 2020
Closed
# for free to join this conversation on GitHub. Already have an account? # to comment
Reviewers
No reviews
Assignees

@punker76 punker76

Labels
Feature
Milestone
2.0.0
Development

Successfully merging this pull request may close these issues.

Checkbox colors on dark theme arent good
3 participants
@timunie @Nuklon @punker76