How to support for Windows 11 "Snap Layout" to the custom maximize/restore button in WPF?

Question

I have a WPF app using a custom Maximize/Restore button. In Windows 11, mouse hover on maximize/restore button does not pop up snap layout feature like below:

Does anyone have any idea fixing this issue? Kindly advise.

TIA!

Answer 1

Here you can find an extensive discussion about this topic

https://github.com/dotnet/wpf/issues/4825

including some working code:

https://github.com/ghost1372/HandyControls/commit/41fce1df04b45ab9a7a8ebad33f3810a89a1ad13

However, in my opinion is too much processing for that snap menu which can be easily displayed by pressing Win + Z keys on your keyboard.

This is the solution that I came up with in XAML only. Instead of having a Border that holds the content of the button, I created a Path around the sign in the center. The area inside the sign will bring up the snap menu because it has no Fill set which means the mouse cursor will hit the WindowChrome over that area. Below is the style and the result. You get the idea. It is not perfect, but it is better than nothing.

<Style x:Key="TitleBarMaximizeButtonStyle" TargetType="Button">
    <Setter Property="Foreground" Value="{DynamicResource WindowTextBrush}"/>
    <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Path x:Name="p" Width="46" Height="32" ClipToBounds="True" StrokeThickness="0" Stretch="Uniform" Data="M 0,0 45,0 45,31 0,31 Z M 18,11 28,11 28,21 18,21 Z" Fill="Transparent"/>
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Focusable="False"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsActive, RelativeSource={RelativeSource AncestorType=Window}}" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource WindowTitleBarInactiveText}"/>
                    </DataTrigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="p" Property="Fill" Value="{DynamicResource MouseOverOverlayBackgroundBrush}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="p" Property="Fill" Value="{DynamicResource MousePressedOverlayBackgroundBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>