WPF making Windows 10 close button in custom title bar-CodePudding

I need to build a custom title bar for my WPF application with only the close button, which currently looks like this:

This is the code:

<Grid Width="32" Height="25" Margin="1" HorizontalAlignment="Right" MouseLeftButtonUp="OnCloseWindow" Grid.Column="4">
    <Rectangle Fill="#FFE81123" Height="25" VerticalAlignment="Bottom"/>
    <TextBlock Text="╳" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#DDFFFFFF" />
</Grid>

What I wanted is a replica of the default Windows 10 close button animation, the button gradually turning red on hover and white again when you stop hovering.

How can I accomplish this?

CodePudding user response：

This is what I use...

Style:

<Style TargetType="{x:Type Button}" x:Key="WindowControlRed">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Opacity" Value="1"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}" >
                    <Border Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="IndianRed"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="Red"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" Value="0.25"/>
            </Trigger>
        </Style.Triggers>
    </Style>

Button in XAML:

<Button Content="&#xE106;" FontFamily="Segoe MDL2 Assets" Height="40" FontSize="12" Width="40" Style="{StaticResource WindowControlRed}" Click="Close_Click"/>

Code behind:

private void Close_Click(object sender, RoutedEventArgs e)
{
    Close();
}

CodePudding user response：

You can achieve it by adding

WindowStyle="ToolWindow"

        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:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowStyle="ToolWindow">

It will show the close button only.

If you want the same style as the normal window, You need to create the style of the close button.

Check this link for reference

https://www.codemag.com/article/1903031/Create-a-Title-Bar-for-User-Controls