I want the border to turn green when the mouse is over it and then to return to blue when the mouse is no longer over the border.
I attempted this without any luck:
<Border
Name="ClearButtonBorder"
Grid.Column="1"
CornerRadius="0,3,3,0"
Background="Blue">
<Border.Triggers>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter Property="Border.Background" Value="Green" />
</Trigger>
<Trigger Property="Border.IsMouseOver" Value="False">
<Setter Property="Border.Background" Value="Blue" />
</Trigger>
</Border.Triggers>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="X" />
</Border>
How can one set a trigger or events for MouseOver?
Yes, this is confusing...
According to this blog post, it looks like this is an omission from WPF.
To make it work you need to use a style:
<Border Name="ClearButtonBorder" Grid.Column="1" CornerRadius="0,3,3,0">
<Border.Style>
<Style>
<Setter Property="Border.Background" Value="Blue"/>
<Style.Triggers>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter Property="Border.Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="X" />
</Border>
I guess this problem isn't that common as most people tend to factor out this sort of thing into a style, so it can be used on multiple controls.
Source: Stackoverflow.com