How can I add a button to the WPF caption bar while using custom window chrome?

Question

I'm attempting to create a simple button template in which the button normally looks like a single horizontal line, but when moused over, the button will display a "rectangle" color fill behind it. This is the code I have, but I can't seem to get the triggers to fire.

<Window x:Class="TestStylingWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="36" GlassFrameThickness="0 0 0 1" ResizeBorderThickness="5" />
    </WindowChrome.WindowChrome>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="36" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button Height="36" Width="36" 
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                Grid.Row="0">
            <Button.Template>
                <ControlTemplate>
                    <Grid>
                        <Rectangle x:Name="PART_ButtonBackgroundRectangle" Fill="LightGray" Width="36" Height="36" Opacity="0" />
                        <Path x:Name="PART_ButtonPath" Data="M10,26 L26,26" Stroke="DarkGray" StrokeThickness="1.5" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger SourceName="PART_ButtonBackgroundRectangle" Property="IsMouseOver" Value="True">
                            <Setter TargetName="PART_ButtonBackgroundRectangle" Property="Opacity" Value="1" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</Window>

Does anyone know why my trigger won't work, or perhaps a better way to do this? I'm sort of new to WPF and would like to refactor this out (so as to use it in many buttons), but am unsure how.

Update: Ok, so I guess it appears to be because the button is within the caption bar of the window. Is there a good way around this? Maybe a way to set click/hover priority to the button?

Anthropopathy

Copied into an empty wpf project your code works just fine. So your problem lies somewhere else... – Leflore

Updated my answer and code with some new info. – Anthropopathy

@ChrisCovert Please check your code in a clean solution before saying there's something wrong with it. Your updated code also doesn't seem to have any problems. – Pisolite

Sorry, I thought it was a clean solution, but apparently that was up at the top. I guess the lack of window borders should have tipped me off. – Anthropopathy

Answer 1

You need to set Hittest visible of your button, such as:

shell:WindowChrome.IsHitTestVisibleInChrome="True"

Cockleboat

@ChrisCovert But how? In a 4.5.2 project, If I add a reference to xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell" and try to set the property shell:WindowChrome.IsHitTestVisibleInChrome="True" on my buttons, I get the error "The name "WindowChrome" does not exist in the namespace "schemas.microsoft.com/winfx/2006/xaml/presentation/shell"" – Kingcraft

@Okuma.Scott you can use a resource dictionary to add this to a style. – Inland

NOTE : there's no need to add shell just use ` WindowChrome.IsHitTestVisibleInChrome="True"` and it works fine :) – Codycoe

But this will disable moving the window on titleBar drag, also in windows 11 it will disable window snapping popup. Are there any solution? – Erena

Answer 2

To clarify a previous answer, you'll want to set IsHitTestVisibleInChrome="True" on the button itself (Not on the window, like I mistakenly thought at first)

For example:

<Button Content="x" 
        Click="CloseButton_Click" 
        WindowChrome.IsHitTestVisibleInChrome="True">
</Button>

Hope this helps

Weinberger

Probably better to request an edit or request a comment on the other post, instead of an answer for this! – Harpy