WPF Mouseover Trigger Effect for Child Controls - wpf

Question

Lets say I have this bit of code:
<Window>
<Window.Resources>
<Color x:Key="MyColor"
A="255"
R="152"
G="152"
B="152" />
<DropShadowEffect x:Key="MyEffect"
ShadowDepth="0"
Color="{StaticResource MyColor}"
BlurRadius="10" />
<Style x:Key="MyGridStyle"
TargetType="{x:Type Grid}">
<Setter Property="Height"
Value="200" />
<Setter Property="Width"
Value="200" />
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width"
Value="100" />
</Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Height"
Value="100" />
<Setter Property="Width"
Value="100" />
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<!-- How do I apply my effect when this grid is hovered over to Image and TextBox, but not the grid itself? -->
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Style="{StaticResource MyGridStyle}">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.Column="0"
Source="image.png" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Hover Over Me" />
</Grid>
</Window>
Basically I have a Style applied to the Grid that says any TextBlock or Image within it should be styles to a certain size.
I want to create a Trigger on the Grid that causes an effect to be applied to all TextBlocks and Images within the Grid, but not to the Grid itself.
I can apply the Trigger directly to TextBlock and/or Image, but then the effect only occurs on each element separately. I need to have the effect occur to any TextBlock and/or Image within the Grid despite which inner child element I am hovered over.
Can anyone help me with this?

Answer 1

You can do it the other way around. That is, add DataTriggers to Image and TextBlock and make them trigger on IsMouseOver for the ancestor Grid.
Note: If you want this effect to trigger as soon as the mouse is over the Grid you will need to set Background to a value, like Transparent. By default, the Background is null and this value isn't used in hit testing.
<Style x:Key="MyGridStyle" TargetType="{x:Type Grid}">
<!--<Setter Property="Background" Value="Transparent"/>-->
<Setter Property="Height" Value="200" />
<Setter Property="Width" Value="200" />
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width" Value="200" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=IsMouseOver}" Value="True">
<Setter Property="Effect" Value="{StaticResource MyEffect}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Height" Value="200" />
<Setter Property="Width" Value="200" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=IsMouseOver}" Value="True">
<Setter Property="Effect" Value="{StaticResource MyEffect}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>

Answer 2

We once had a similar requirement of outer glowing ONLY the content of a row of a list box, not the row overall. We took help of this article... http://drwpf.com/blog/2008/03/25/itemscontrol-i-is-for-item-container.