Adding custom styles to icons inside Title bar of MetroWindow

Question

I am using MahApps.Metro in my WPF app. The default behavior of the title bar of its MetroWindow is that any icon inside it has low opacity (dimmed) display unless you mouseover the icon. Even if you don't mouseover the icon, I would like to look it the same as when you mouseover it. How can we achieve this?

With mouseover on CupCakes icon [I would like it to look the same even without mouseover]:

Without mouseover:

MetroWindow.xaml:

<mah:MetroWindow x:Class="WPF_Mah_Metro_Test.MainWindow"
        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:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_Mah_Metro_Test"
        mc:Ignorable="d"
        GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
        ResizeMode="CanResizeWithGrip"
        WindowStartupLocation="CenterScreen"
        Height="450" Width="800">

    <mah:MetroWindow.LeftWindowCommands>
        <mah:WindowCommands>
            <Button x:Name="btnTest" Click="btnTest_Click"  ToolTip="Open up the GitHub site">
                <iconPacks:PackIconModern Width="22" Height="22" Kind="SocialGithubOctocat" />
            </Button>
        </mah:WindowCommands>
    </mah:MetroWindow.LeftWindowCommands>

    <mah:MetroWindow.RightWindowCommands>
        <mah:WindowCommands>
            <Button x:Name="btnTest1" Click="btnTest1_Click"  Content="Deploy CupCakes">
                <Button.ContentTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <iconPacks:PackIconModern Width="22" Height="22" VerticalAlignment="Center" Kind="FoodCupcake" />
                            <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="{Binding}" />
                        </StackPanel>
                    </DataTemplate>
                </Button.ContentTemplate>
            </Button>
        </mah:WindowCommands>
    </mah:MetroWindow.RightWindowCommands>
    <Grid>
    </Grid>

</mah:MetroWindow>

Answer 1

To override the styles of the inner controls of the WindowCommands you must create your own style for it:

<Style x:Key="Styles.WindowCommands.Custom"
       BasedOn="{StaticResource MahApps.Styles.WindowCommands}"
       TargetType="{x:Type mah:WindowCommands}">
    <Style.Resources>
        <ResourceDictionary>
            <Style BasedOn="{StaticResource MahApps.Styles.Button.WindowCommands}" TargetType="{x:Type Button}">
                <Setter Property="Opacity" Value="1" />
            </Style>
            <Style BasedOn="{StaticResource MahApps.Styles.ToggleButton.WindowCommands}" TargetType="{x:Type ToggleButton}">
                <Setter Property="Opacity" Value="1" />
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Opacity" Value="1" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Opacity" Value="1" />
                    </Trigger>
                </Style.Triggers>
            </Style>
            <Style BasedOn="{StaticResource MahApps.Styles.SplitButton.WindowCommands}" TargetType="{x:Type mah:SplitButton}">
                <Setter Property="Opacity" Value="1" />
            </Style>
            <Style BasedOn="{StaticResource MahApps.Styles.DropDownButton.WindowCommands}" TargetType="{x:Type mah:DropDownButton}">
                <Setter Property="Opacity" Value="1" />
            </Style>
        </ResourceDictionary>
    </Style.Resources>
</Style>

Now if you put this key to your `App.xaml you can use it in your App like:

<mah:MetroWindow.LeftWindowCommands>
    <mah:WindowCommands Style="{StaticResource Styles.WindowCommands.Custom}">
    </mah:WindowCommands>
</mah:MetroWindow.LeftWindowCommands>

<mah:MetroWindow.RightWindowCommands>
    <mah:WindowCommands Style="{StaticResource Styles.WindowCommands.Custom}">
    </mah:WindowCommands>
</mah:MetroWindow.RightWindowCommands>

Another solution could be to make a style for the Button directly.

Note: Namespace for mah is xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"