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

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>

question from:https://stackoverflow.com/questions/65650169/how-to-replace-maximize-restoredown-icons-of-metrowindow-of-mahapps

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:

1. 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.
2. 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="&#xE740;" />
      </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="&#xE73F;" />
      </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. M