Custom Button Windows #4034

ghost · 2021-02-01T13:31:07Z

ghost
Feb 1, 2021

How do I add color to MetroWindows buttons?
Mine are gray.

    <Style x:Key="MeuMetroWindow" TargetType="{x:Type mah:MetroWindow}">
        <Setter Property="NonActiveWindowTitleBrush" Value="{DynamicResource BlueBrush}" />
        <Setter Property="TitleAlignment" Value="Center" />
        <Setter Property="TitleForeground" Value="{DynamicResource WhiteBrush}"/>
        <Setter Property="Background"  Value="{DynamicResource WhiteBrush}"/>
        <Setter Property="BorderBrush"  Value="{DynamicResource BlueBrush}" />
        <Setter Property="WindowTitleBrush" Value="{DynamicResource BlueBrush}" />
    </Style>

Answered by timunie

Feb 2, 2021

Hi @fabiociaf

The issue is that you do not import all the needed styles.

in your App.xaml you need to add these to 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" />
<!--  Theme setting  -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />

See: https://mahapps.com/docs/guides/quick-start

And here is the result:

If you don't want to have MahApps-Style then please read: #…

View full answer

timunie · 2021-02-02T11:57:37Z

timunie
Feb 2, 2021

Hi @fabiociaf ,

I think there are two issues with your Style.

You should use either BasedOn="{StaticResource {x:Type mah:MetroWindow}
I think BlueBrush and WhiteBrush are the wrong keys.

if you are on MahApps v2.0 it should be:

<Style x:Key="MeuMetroWindow" TargetType="{x:Type mah:MetroWindow}" BasedOn="{StaticResource {x:Type mah:MetroWindow}>
    <Setter Property="NonActiveWindowTitleBrush" Value="{DynamicResource MahApps.Brushes.Accent}" />
    <Setter Property="TitleAlignment" Value="Center" />
    <Setter Property="TitleForeground" Value="{DynamicResource MahApps.Brushes.IdealForeground}"/>
    <Setter Property="Background"  Value="{DynamicResource MahApps.Brushes.ThemeBackground}"/>
    <Setter Property="BorderBrush"  Value="{DynamicResource MahApps.Brushes.Accent}" />
    <Setter Property="WindowTitleBrush" Value="{DynamicResource MahApps.Brushes.Accent}" />
</Style>

if you want to override the Buttons itself you may override these Styles with the same x:Key:

MahApps.Metro/src/MahApps.Metro/Styles/Controls.Buttons.xaml

Lines 313 to 383 in bbab412

    
           <!--  light button style for min, max and close window buttons  --> 
        
           <Style x:Key="MahApps.Styles.Button.MetroWindow.Light" 
        
                  BasedOn="{StaticResource MahApps.Styles.Button.MetroWindow.Base}" 
        
                  TargetType="{x:Type Button}"> 
        
               <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
        
               <Setter Property="Focusable" Value="False" /> 
        
               <Setter Property="IsTabStop" Value="False" /> 
        
               <Setter Property="MaxHeight" Value="34" /> 
        
               <Setter Property="Padding" Value="0" /> 
        
               <Setter Property="Width" Value="34" /> 
        
               <Style.Triggers> 
        
                   <Trigger Property="IsMouseOver" Value="True"> 
        
                       <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.WindowButtonCommands.Background.MouseOver}" /> 
        
                   </Trigger> 
        
                   <Trigger Property="IsPressed" Value="True"> 
        
                       <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.AccentBase}" /> 
        
                       <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.IdealForeground}" /> 
        
                   </Trigger> 
        
                   <Trigger Property="IsEnabled" Value="False"> 
        
                       <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.IdealForegroundDisabled}" /> 
        
                   </Trigger> 
        
               </Style.Triggers> 
        
           </Style> 
        
           <!--  dark button style for min, max and close window buttons  --> 
        
           <Style x:Key="MahApps.Styles.Button.MetroWindow.Dark" 
        
                  BasedOn="{StaticResource MahApps.Styles.Button.MetroWindow.Light}" 
        
                  TargetType="{x:Type Button}"> 
        
               <Style.Triggers> 
        
                   <Trigger Property="IsMouseOver" Value="True"> 
        
                       <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.WindowButtonCommands.Background.MouseOver}" /> 
        
                   </Trigger> 
        
                   <Trigger Property="IsPressed" Value="True"> 
        
                       <Setter Property="Background" Value="{DynamicResource MahApps.Brushes.AccentBase}" /> 
        
                       <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.IdealForeground}" /> 
        
                   </Trigger> 
        
                   <Trigger Property="IsEnabled" Value="False"> 
        
                       <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.IdealForegroundDisabled}" /> 
        
                   </Trigger> 
        
               </Style.Triggers> 
        
           </Style> 
        
           <Style x:Key="MahApps.Styles.Button.MetroWindow.Close.Light.Win10" 
        
                  BasedOn="{StaticResource MahApps.Styles.Button.MetroWindow.Light}" 
        
                  TargetType="{x:Type Button}"> 
        
               <Style.Triggers> 
        
                   <Trigger Property="IsMouseOver" Value="True"> 
        
                       <Setter Property="Background" Value="#E81123" /> 
        
                       <Setter Property="Foreground" Value="White" /> 
        
                   </Trigger> 
        
                   <Trigger Property="IsPressed" Value="True"> 
        
                       <Setter Property="Background" Value="#F1707A" /> 
        
                       <Setter Property="Foreground" Value="Black" /> 
        
                   </Trigger> 
        
               </Style.Triggers> 
        
           </Style> 
        
           <Style x:Key="MahApps.Styles.Button.MetroWindow.Close.Dark.Win10" 
        
                  BasedOn="{StaticResource MahApps.Styles.Button.MetroWindow.Dark}" 
        
                  TargetType="{x:Type Button}"> 
        
               <Style.Triggers> 
        
                   <Trigger Property="IsMouseOver" Value="True"> 
        
                       <Setter Property="Background" Value="#E81123" /> 
        
                       <Setter Property="Foreground" Value="White" /> 
        
                   </Trigger> 
        
                   <Trigger Property="IsPressed" Value="True"> 
        
                       <Setter Property="Background" Value="#F1707A" /> 
        
                       <Setter Property="Foreground" Value="Black" /> 
        
                   </Trigger> 
        
               </Style.Triggers> 
        
           </Style>

Happy coding
Tim

7 replies

ghost Feb 2, 2021

Tim,
My window looks just like I show in these two images.
I have to use my blue and my white.

timunie Feb 2, 2021

Understood, but without a look into your code it is hard to guess what is wrong. In case you use BlueBrush and WhiteBrush everywhere I would consider using a custom Theme

Here is a guide: https://github.com/ControlzEx/ControlzEx/blob/develop/Wiki/ThemeManager.md

Maybe you can upload an App which shows this and than we may inspect it further.

ghost Feb 2, 2021

I no use Theme

My code:

TELACADUSUARIOS.xaml (MetroWindow)

<mah:MetroWindow 
    x:Class="DFe.TELACADUSUARIOS"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"  
    xmlns:local="clr-namespace:DFe"
    xmlns:local2="clr-namespace:DFe.Entidades"
    xmlns:fa="http://schemas.fontawesome.com/icons/"
    KeyDown="MetroWindow_KeyDown"
    mc:Ignorable="d"
    Style="{StaticResource MeuMetroWindowJanelas}"        
    xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
    d:DataContext="{d:DesignInstance {x:Type local:Usuarios}, IsDesignTimeCreatable=True}"
    Background="{StaticResource CordeFundo}"
    WindowStartupLocation="CenterScreen"
    Loaded="MetroWindow_Loaded"
    Height="500" Width="540"
    Title="USUÁRIOS E PERMISSÕES DE ACESSO" >
<Grid>....</Grid></mah:MetroWindow>

And Window.xaml (style)

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" 
                     xmlns:local="clr-namespace:DFe" >
<Style x:Key="MeuMetroWindow" TargetType="{x:Type mah:MetroWindow}">
        <Setter Property="NonActiveWindowTitleBrush" Value="{DynamicResource BlueBrush}" />
        <Setter Property="TitleAlignment" Value="Center" />
        <Setter Property="TitleForeground" Value="{DynamicResource WhiteBrush}"/>
        <Setter Property="Background"  Value="{DynamicResource WhiteBrush}"/>
        <Setter Property="BorderBrush"  Value="{DynamicResource BlueBrush}" />
        <Setter Property="WindowTitleBrush" Value="{DynamicResource BlueBrush}" />
    </Style>
</ResourceDictionary>

timunie Feb 2, 2021

Please 🙏 create a new repro and upload a sample which can be run directly. I have no time to reimplement all the stuff. Thx

ghost Feb 2, 2021

@timunie
https://github.com/fabiociaf/WpfCustomButtonWindows

timunie · 2021-02-02T16:37:46Z

timunie
Feb 2, 2021

Hi @fabiociaf

The issue is that you do not import all the needed styles.

in your App.xaml you need to add these to 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" />
<!--  Theme setting  -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />

See: https://mahapps.com/docs/guides/quick-start

And here is the result:

If you don't want to have MahApps-Style then please read: #4029

I'll send a PR to your sample

Happy coding
Tim

1 reply

ghost Feb 2, 2021

Tim,
You decided with a theme I will have to accept.
You helped me a lot I will need to review the theme part to start using.
Thanks you!

ghost · 2021-02-02T17:26:59Z

ghost
Feb 2, 2021

@timunie
I have new issue. I have new windows but now with the colors switched. What was blue turns white and what was white turns blue.

That's why I didn't want to use Theme

<Style x:Key="MeuMetroWindow2" TargetType="{x:Type mah:MetroWindow}" BasedOn="{StaticResource {x:Type mah:MetroWindow}}">
        <Setter Property="NonActiveWindowTitleBrush" Value="{DynamicResource BlueBrush}" />
        <Setter Property="TitleAlignment" Value="Center" />
        <Setter Property="TitleForeground" Value="{DynamicResource BlueBrush}" />
        <Setter Property="Background"  Value="{StaticResource WhiteBrush}"/>
        <Setter Property="BorderBrush"  Value="{DynamicResource BlueBrush}" />
        <Setter Property="WindowTitleBrush" Value="{StaticResource WhiteBrush}"/>
        <Setter Property="Foreground" Value="{DynamicResource BlueBrush}" />
    </Style>

2 replies

timunie Feb 3, 2021

Hi @fabiociaf

I am sorry, I didn't consider this scenario. Here you will need to implement a custom Style for the WindowButtonCommands

<Style TargetType="mah:WindowButtonCommands" BasedOn="{StaticResource MahApps.Styles.WindowButtonCommands.Base}">
    <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=mah:MetroWindow}, Path=TitleForeground}" />
    <Setter Property="Template" Value="{DynamicResource MahApps.Templates.WindowButtonCommands.Win10}" />
</Style>

I made another PR to your sample.

@punker76 should we add this Setter <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=mah:MetroWindow}, Path=TitleForeground}" /> to the original Style? I think it is the right way to inherit the TitleForeground here.

Happy coding
Tim

ghost Feb 3, 2021

Thanks my friends
I love it.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Button Windows #4034

{{title}}

Replies: 3 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Custom Button Windows #4034

Replies: 3 comments · 10 replies

Replies: 3 comments 10 replies