Mahapps.metro: Flat button style is theme-agnostic

Created on 26 Jun 2019  路  4Comments  路  Source: MahApps/MahApps.Metro

Is your feature request related to a problem? Please describe.
The current flat button style is theme-agnostic. In Windows 10, these flat buttons style based on the selected theme. For those designing apps more in line with Win10, it would be nice to see a themed flat button style. Current behavior:

Light theme:
mMHwBj9omX

Dark theme:
92LKFYtbIB

Describe the solution you'd like
Add a ThemedFlatButton resource dictionary that styles the buttons as appropriate for Win10:

9jSdf30LEp

Additional context
I am currently using MahApps.Metro 1.6.5 with VS2019 on Win10 1809. The screenshot is above is from Visual Studio but that's not the only place themed flat buttons exist.

Edit: Current resource dictionaries:

<ResourceDictionary.MergedDictionaries>
    <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
    <!-- Accent and AppTheme setting -->
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
</ResourceDictionary.MergedDictionaries>

Buttons on above form:

<Button Grid.Column="1" 
        Margin="0 0 10 0"
        Padding="10 0"
        IsCancel="True" 
        Content="Cancel" />
<Button Grid.Column="2"
        Padding="10 0"
        IsDefault="True"
        Content="Create" />

Closed Issues

3118 fixes the Win81 style for the button.

Most helpful comment

Hi Together,
at the moment the main focus is on getting v2.0 released. So I think we have to wait for this implementation. Nevertheless you can override the Style with a custom one like the one blow:

<Style x:Key="My.Buttons.Styles.Win10.Accented"
       BasedOn="{StaticResource MahApps.Styles.Button.Flat}"
       TargetType="Button">
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Gray8}" />
    <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Gray8}" />
    <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.Black}" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Accent}" />
            <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Gray8}" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Accent}" />
            <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Accent}" />
        </Trigger>
    </Style.Triggers>
</Style>

Happy coding
Tim

All 4 comments

See also #3328

Totally agree on this, themed flat button would be the way to go.

Definitely I would to have this available. I was search for an themed flat button but the only "themed" button with MahApps.Metro, change the text case to lowercase, and that solid border ... no way.

Hi Together,
at the moment the main focus is on getting v2.0 released. So I think we have to wait for this implementation. Nevertheless you can override the Style with a custom one like the one blow:

<Style x:Key="My.Buttons.Styles.Win10.Accented"
       BasedOn="{StaticResource MahApps.Styles.Button.Flat}"
       TargetType="Button">
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Gray8}" />
    <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Gray8}" />
    <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.Black}" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Accent}" />
            <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Gray8}" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Accent}" />
            <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Accent}" />
        </Trigger>
    </Style.Triggers>
</Style>

Happy coding
Tim

Was this page helpful?
0 / 5 - 0 ratings

Related issues

benjamin275 picture benjamin275  路  17Comments

fredericoregateiro picture fredericoregateiro  路  10Comments

kayone picture kayone  路  10Comments

ghost picture ghost  路  18Comments

SteffanDonal picture SteffanDonal  路  11Comments