WPF Mouse Trigger Effect for Child Control

Question

Suppose 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 that any TextBlock or Image inside it should be styles of a certain size.

I want to create a trigger in a grid that causes an effect for all text blocks and images inside the Grid, but not for the grid itself.

I can apply Trigger directly to TextBlock and / or Image, but then the effect occurs only for each element separately. I need the effect to take place for any TextBlock and / or image inside the Grid, despite the fact that I am an internal child.

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 activate them for IsMouseOver for the Grid ancestor.

Note. If you want this effect to work as soon as the mouse is over the Grid , you need to set the Background value, for example Transparent . By default, the Background value is null , and this value is not used when testing hits.

 <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 for an external glowing ONLY the contents of a list line, not the entire line. We took advantage of this article ... http://drwpf.com/blog/2008/03/25/itemscontrol-i-is-for-item-container .