How to replace Maximize/RestoreDown icons of MetroWindow of MahApps - wpf

Question

I am using MahApps.Metro in my WPF app and trying to change the Maximize/RestoreDown icons of MetrowWindow to the following new FullScreen/BackToWindow icons:
Question: How can we replace the default Maximize/RestoreDown icons of MetrowWindow?
Remarks: As suggested here, I tried the following code but it's still showing the old style - as shown below. I'm probably missing something here and not doing it right. New icons are not an issue. I just need to know how we can replace the old ones with the new ones.
<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.WindowButtonCommands>
<mah:WindowButtonCommands Template="{DynamicResource MahApps.Templates.WindowButtonCommands.Win10}" />
</mah:MetroWindow.WindowButtonCommands>
<Grid>
</Grid>

Answer 1

In order to customize the window buttons, you have to create a custom control template for the type WindowButtonCommands. You can copy one of the default control templates below from GitHub.
MahApps.Templates.WindowButtonCommands
MahApps.Templates.WindowButtonCommands.Win10
I took the Win10 control template and and adapted two things in the PART_Max button:
Change the Data of PART_MaxPath Path to an appropriate path that represents the icon or replace it with a TexBlock that uses the Segoe MDL2 Assets font and displays the gylph.
Change the DataTrigger for Maximized to set the appropriate icon the same way.
In the example below, I used the TextBlock approach, because I do not have path data for the icons. Please be aware, that the Path variant would always work, while the TextBlock variant requires the font to be available on your system.
<ControlTemplate x:Key="MahApps.Templates.WindowButtonCommands.Custom"
TargetType="{x:Type mah:WindowButtonCommands}">
<StackPanel Orientation="Horizontal">
<Button x:Name="PART_Min"
Width="46"
AutomationProperties.AutomationId="Minimize"
AutomationProperties.Name="Minimize"
Command="{x:Static SystemCommands.MinimizeWindowCommand}"
Focusable="False"
IsEnabled="{Binding IsMinButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type mah:MetroWindow}}}"
ToolTip="{Binding Minimize, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
UseLayoutRounding="True">
<Button.Visibility>
<MultiBinding Converter="{x:Static converters:ResizeModeMinMaxButtonVisibilityConverter.Instance}"
ConverterParameter="MIN">
<Binding Mode="OneWay"
Path="ShowMinButton"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
<Binding Mode="OneWay"
Path="UseNoneWindowStyle"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
<Binding Mode="OneWay"
Path="ResizeMode"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
</MultiBinding>
</Button.Visibility>
<Path Width="10"
Height="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,0L10,0 10,1 10,1 1,1 0,1z"
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
RenderOptions.EdgeMode="Aliased"
SnapsToDevicePixels="True"
Stretch="Uniform" />
</Button>
<Button x:Name="PART_Max"
Width="46"
AutomationProperties.AutomationId="MaximizeRestore"
AutomationProperties.Name="Maximize"
Command="{x:Static SystemCommands.MaximizeWindowCommand}"
Focusable="False"
IsEnabled="{Binding IsMaxRestoreButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type mah:MetroWindow}}}"
ToolTip="{Binding Maximize, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
UseLayoutRounding="True">
<Button.Visibility>
<MultiBinding Converter="{x:Static converters:ResizeModeMinMaxButtonVisibilityConverter.Instance}"
ConverterParameter="MAX">
<Binding Mode="OneWay"
Path="ShowMaxRestoreButton"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
<Binding Mode="OneWay"
Path="UseNoneWindowStyle"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
<Binding Mode="OneWay"
Path="ResizeMode"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
</MultiBinding>
</Button.Visibility>
<!-- normal state -->
<TextBlock x:Name="PART_MaxPath"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Text="" />
</Button>
<Button x:Name="PART_Close"
Width="46"
AutomationProperties.AutomationId="Close"
AutomationProperties.Name="Close"
Command="{x:Static SystemCommands.CloseWindowCommand}"
Focusable="False"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:MetroWindow}}, Path=IsCloseButtonEnabled, Mode=OneWay}"
ToolTip="{Binding Close, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
UseLayoutRounding="True">
<Button.Visibility>
<MultiBinding Converter="{x:Static converters:ResizeModeMinMaxButtonVisibilityConverter.Instance}"
ConverterParameter="CLOSE">
<Binding Mode="OneWay"
Path="ShowCloseButton"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
<Binding Mode="OneWay"
Path="UseNoneWindowStyle"
RelativeSource="{RelativeSource AncestorType={x:Type mah:MetroWindow}}" />
</MultiBinding>
</Button.Visibility>
<Path Width="10"
Height="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="F1M8.583,8L13,12.424 12.424,13 8,8.583 3.576,13 3,12.424 7.417,8 3,3.576 3.576,3 8,7.417 12.424,3 13,3.576z"
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
RenderOptions.EdgeMode="Aliased"
SnapsToDevicePixels="True"
Stretch="Uniform" />
</Button>
</StackPanel>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:MetroWindow}}, Path=IsCloseButtonEnabled}"
Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:MetroWindow}}, Path=IsAnyDialogOpen}"
Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:MetroWindow}}, Path=IsCloseButtonEnabledWithDialog}"
Value="False" />
</MultiDataTrigger.Conditions>
<Setter TargetName="PART_Close"
Property="IsEnabled"
Value="False" />
</MultiDataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:MetroWindow}}, Path=WindowState}"
Value="Maximized">
<Setter TargetName="PART_Max"
Property="AutomationProperties.Name"
Value="Restore" />
<Setter TargetName="PART_Max"
Property="Command"
Value="{x:Static SystemCommands.RestoreWindowCommand}" />
<Setter TargetName="PART_Max"
Property="ToolTip"
Value="{Binding Restore, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
<Setter TargetName="PART_MaxPath"
Property="Text"
Value="" />
</DataTrigger>
<Trigger Property="Theme"
Value="Light">
<Setter TargetName="PART_Close"
Property="Style"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LightCloseButtonStyle}" />
<Setter TargetName="PART_Max"
Property="Style"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LightMaxButtonStyle}" />
<Setter TargetName="PART_Min"
Property="Style"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LightMinButtonStyle}" />
</Trigger>
<Trigger Property="Theme"
Value="Dark">
<Setter TargetName="PART_Close"
Property="Style"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DarkCloseButtonStyle}" />
<Setter TargetName="PART_Max"
Property="Style"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DarkMaxButtonStyle}" />
<Setter TargetName="PART_Min"
Property="Style"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DarkMinButtonStyle}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Set the custom WindowButtonCommands template MahApps.Templates.WindowButtonCommands.Custom to MetroWindow the same way as in your question. Make sure the control template resource is in scope.
<mah:MetroWindow.WindowButtonCommands>
<mah:WindowButtonCommands Template="{StaticResource MahApps.Templates.WindowButtonCommands.Custom}" />
</mah:MetroWindow.WindowButtonCommands>