9

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?

Improve this question
4
  • 1
    Copied into an empty wpf project your code works just fine. So your problem lies somewhere else... Commented Sep 14, 2012 at 20:00
  • Updated my answer and code with some new info. Commented Sep 14, 2012 at 20:19
  • 2
    @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. Commented Sep 14, 2012 at 20:24
  • 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. Commented Sep 14, 2012 at 20:29

2 Answers 2

Reset to default
20

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

shell:WindowChrome.IsHitTestVisibleInChrome="True"
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@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""
@Okuma.Scott you can use a resource dictionary to add this to a style.
NOTE : there's no need to add shell just use ` WindowChrome.IsHitTestVisibleInChrome="True"` and it works fine :)
But this will disable moving the window on titleBar drag, also in windows 11 it will disable window snapping popup. Are there any solution?
0

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

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.