WPF how to get maximize/minimize button icon - Custom title bar

Question

I'm trying to create a custom title bar for my application. I have no idea how to add a the windows maximize or minimize icon to the button. I want my icons o look similar to this

Here is my XAML for my buttons

            <Button Command="{x:Static SystemCommands.MaximizeWindowCommand}" Content="+" Canvas.Left="1020" Height="30" Width="30">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="Black"/>
                    <Setter Property="TextBlock.Foreground" Value="White"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#403c47"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
        <Button Command="{x:Static SystemCommands.MinimizeWindowCommand}" Content="" Canvas.Left="990" Height="30" Width="30" >
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="Black"/>
                    <Setter Property="TextBlock.Foreground" Value="White"/>
                    <Setter Property="FontSize" Value="24"/>
                    <Setter Property="TextBlock.LineHeight" Value="5"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#403c47"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

Any assistance is appreciated :)

just get some nice icons/pictures and use an image element for your buttons content — Random Dev, Aug 15 '15 at 08:04
I don't want to use icons/pictures when there is already one built into windows. — Le General de Cuddles, Aug 15 '15 at 08:09

score 9 · Accepted Answer · answered Aug 15 '15 at 08:57

This an extract of code i have used. (in my case is a reusable Window class extension, too long to post entirely)

XAML 2 button minimize and maximize

<Grid Margin="1,0,1,0">
    <Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}"  Visibility="Collapsed" Style="{StaticResource WindowButtonStyle}">
        <Grid Width="30" Height="25" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
            <Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}, Mode=FindAncestor}}" StrokeThickness="1"  />
        </Grid>
    </Button>
    <Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}"  Style="{StaticResource WindowButtonStyle}">
        <Grid Width="31" Height="25">
            <Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}, Mode=FindAncestor}}" StrokeThickness="2"  />
        </Grid>
    </Button>
</Grid>

Trigger to hide minimize/maximize button when window is maximized/minimized

<ControlTemplate.Triggers>
    <Trigger Property="WindowState" Value="Maximized">
        <Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
        <Setter TargetName="Restore" Property="Visibility" Value="Visible" />
    </Trigger>
    <Trigger Property="WindowState" Value="Normal">
        <Setter TargetName="Maximize" Property="Visibility" Value="Visible" />
        <Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
    </Trigger>
    .....
</ControlTemplate.Triggers>

Hope can adapt to your needs.

For Windows 10: https://stackoverflow.com/questions/44190041/show-default-window-buttons-on-wpf-window-using-windowchrome — Coder14, Apr 16 '19 at 11:18

score 4 · Answer 2 · answered Aug 30 '17 at 09:45

An alternative solution is to use the Webdings font, which has minimise, maximise and restore glyphs on 0, 1 and 2 respectively.

There are also unicode characters for these e.g. but they are relatively recent and don't currently seem to work correctly in all locales.

WPF how to get maximize/minimize button icon - Custom title bar

2 Answers2