Mahapps.metro: Checkbox checkmark accent is hard to see against dark flyout

Created on 17 Apr 2017  路  6Comments  路  Source: MahApps/MahApps.Metro

My WPF application using MahApps.Metro uses a Flyout for the app's Settings UI. Most of the users use the default "Light" theme with the "Blue" accent color. The Flyout is Modal="True" and configured with the defaults). Under these conditions checkboxes in the flyout have checkmarks that don't stand-out very well:

image

A quickfix is to change the checkmark brush to use a lighter shade of accent, if not white, when a checkbox is displayed in a flyout.

Environment

  • MahApps.Metro v1.5.0
  • Windows 10
  • Visual Studio 2015
  • .NET Framework 4.6.1

Most helpful comment

@Jehoel The CheckBox and RadioBox uses the HighlightBrush brush for the check mark and pressed status. You can override these in your Flyout resources like this

<Style TargetType="{x:Type CheckBox}"
        BasedOn="{StaticResource MetroCheckBox}">
    <Style.Resources>
        <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource AccentColor}" />
    </Style.Resources>
</Style>

(or whatever color you need)

Hope this helps.

All 6 comments

@Jehoel The CheckBox and RadioBox uses the HighlightBrush brush for the check mark and pressed status. You can override these in your Flyout resources like this

<Style TargetType="{x:Type CheckBox}"
        BasedOn="{StaticResource MetroCheckBox}">
    <Style.Resources>
        <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource AccentColor}" />
    </Style.Resources>
</Style>

(or whatever color you need)

Hope this helps.

@Jehoel Do you need more help?

Sorry, I had my Github notifications turned off. I'll try this later tonight and let you know.

Using AccentColor is still too dark - and I noticed the other shades (e.g. AccentColorBrush4) are just differing opacity levels, so they're even harder to see on a black background.

I would like to reference the color used by the current FlyoutForegroundBrush, however that color is defined by StaticResource BlackColor (which is actually white) which I cannot directly access ({StaticResource BlackColor} gives me black).

How should I get white color if the flyout is dark, but a dark color if the flyout is white?

@Jehoel If you have a dark Flyout you need the WhiteColor or IdealForegroundColor and vice versa, for light Flyout the BlackColor.

<SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource WhiteColor}" />
<SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource IdealForegroundColor}" />

image

Perfect, thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

oschwab picture oschwab  路  17Comments

SamOxyPlot picture SamOxyPlot  路  14Comments

patriksvensson picture patriksvensson  路  18Comments

AndrzejKl picture AndrzejKl  路  12Comments

kayone picture kayone  路  10Comments