wpf mouseover fill rectangle - wpf

Question

I have Grid in wpf. When I do mouseover on rectangle, I can see color change. But when I do mouseover on content, I see original color of rectangle.
What should I write to apply same mouseover effect on ContentPresenter or is there any way to change rectangle background color on mouse over of content presenter.
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader">
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="{DynamicResource ContentOutofFocusBrush}"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
Thanks
Dee

Answer 1

If the grid is part of your control template then it is better to move the rectangle style trigger into ControlTemplate.Triggers:
<Window x:Class="Presentation2.MouseOverRectangleWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MouseOverRectangleWindow" Height="300" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="ContentOutofFocusBrush" Color="Orange"/>
<SolidColorBrush x:Key="ActiveItemBrush" Color="Blue" />
<Style x:Key="MouseOverContentControlStyle" TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader">
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle x:Name="PART_Rectangle" Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="{DynamicResource ContentOutofFocusBrush}"></Setter>
</Style>
</Rectangle.Style>
</Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ContentControl Style="{StaticResource MouseOverContentControlStyle}">
<TextBlock Text="Hello World!" />
</ContentControl>
</Grid>
</Window>

Answer 2

you don't need a rectangle inside your Border. Change the Background of the Border, you ll have same result. Then put the ContentPresenter inside that Border, and set the MouseOver handler on the Border, it should work fine.