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?
You need to set Hittest visible of your button, such as:
shell:WindowChrome.IsHitTestVisibleInChrome="True"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With