Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Flat button style is theme-agnostic #3537

Closed
Foxtrek64 opened this issue Jun 26, 2019 · 4 comments · Fixed by #4315
Closed

Flat button style is theme-agnostic #3537

Foxtrek64 opened this issue Jun 26, 2019 · 4 comments · Fixed by #4315
Assignees
Milestone

Comments

@Foxtrek64
Copy link

Foxtrek64 commented Jun 26, 2019

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.

@timunie
Copy link
Collaborator

timunie commented Jun 27, 2019

See also #3328

@Nightro
Copy link

Nightro commented Oct 3, 2019

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

@danielavilam
Copy link

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.

@timunie
Copy link
Collaborator

timunie commented Nov 28, 2019

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

@punker76 punker76 added this to the 3.0.0 milestone Jun 30, 2021
@punker76 punker76 self-assigned this Jun 30, 2021
punker76 added a commit that referenced this issue Jun 27, 2022
Add a new Win10 button style, fonts and brushes.

- new style MahApps.Styles.Button.Win10
- new font family MahApps.Fonts.Family.ContentControlTheme
- new font size MahApps.Font.Size.ControlContentTheme
- new brush keys
  - MahApps.Brushes.Button.Background
  - MahApps.Brushes.Button.BackgroundPointerOver
  - MahApps.Brushes.Button.BackgroundPressed
  - MahApps.Brushes.Button.BackgroundDisabled
  - MahApps.Brushes.Button.Foreground
  - MahApps.Brushes.Button.ForegroundPointerOver
  - MahApps.Brushes.Button.ForegroundPressed
  - MahApps.Brushes.Button.ForegroundDisabled
  - MahApps.Brushes.Button.BorderBrush
  - MahApps.Brushes.Button.BorderBrushPointerOver
  - MahApps.Brushes.Button.BorderBrushPressed
  - MahApps.Brushes.Button.BorderBrushDisabled
punker76 added a commit that referenced this issue Jun 27, 2022
Add a new Win10 button accent style and brushes.

- new style MahApps.Styles.Button.Accent.Win10
- new brush keys
  - MahApps.Brushes.Button.AccentBackground
  - MahApps.Brushes.Button.AccentBackgroundPointerOver
  - MahApps.Brushes.Button.AccentBackgroundPressed
  - MahApps.Brushes.Button.AccentBackgroundDisabled
  - MahApps.Brushes.Button.AccentForeground
  - MahApps.Brushes.Button.AccentForegroundPointerOver
  - MahApps.Brushes.Button.AccentForegroundPressed
  - MahApps.Brushes.Button.AccentForegroundDisabled
  - MahApps.Brushes.Button.AccentBorderBrush
  - MahApps.Brushes.Button.AccentBorderBrushPointerOver
  - MahApps.Brushes.Button.AccentBorderBrushPressed
  - MahApps.Brushes.Button.AccentBorderBrushDisabled
punker76 added a commit that referenced this issue Jun 27, 2022
Add a new flat button accent style.

- new style MahApps.Styles.Button.Flat.Accent
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.

5 participants