Trigger for mouseover on parent element

Question

If have written a button usercontrol that contains an image and a text.

When the user moves the mouse over the button, I want an effect on the image.

Right now I just can get it to work with an effect on the button.

Here is what I have so far:

<Button x:Class="Example.Controls.MyButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Name="MyButtonControl"
        Margin="5"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        d:DesignHeight="80"
        d:DesignWidth="120"
        Style="{DynamicResource SomeButtonStyle}"
        mc:Ignorable="d">
    <Button.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources.xaml" />
                <ResourceDictionary>
                    <Style x:Key="SomeButtonStyle"
                           BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                           TargetType="Button">
                        <Style.Triggers>
                            <Trigger Property="Button.IsMouseOver" Value="True">
                                <Setter Property="Button.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Button.Resources>
    <Border HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            BorderBrush="SlateGray"
            BorderThickness="1">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="5*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="9*" />
                <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>

            <Image Grid.Row="0"
                   Grid.Column="1"
                   Margin="7"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Stretch"
                   Source="{Binding ElementName=MyButtonControl,
                                    Path=Image}" />

            <TextBlock Grid.Row="1"
                       Grid.Column="1"
                       Margin="2"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Stretch"
                       Style="{DynamicResource MenuButtonText}"
                       Text="{Binding ElementName=MyButtonControl,
                                      Path=Text}" />
        </Grid>
    </Border>
</Button>

Now I want the effect to just affect the image, or the image and text perhaps.

Can this be achieved somehow?

Right now I'm trying to have the trigger at the image and let it fire on mouseover of the parent.

Here is the testcode:

<Image Grid.Row="0"
                   Grid.Column="1"
                   Margin="7"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Stretch"
                   Source="{Binding ElementName=ImageButtonControl,
                                    Path=Image}">
                <Image.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Image.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>

But the trigger does not change anything...

Answer 1

The seconds trigger works

                <Image.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Image.Effect">
                                    <Setter.Value>
                                        <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>

Answer 2

You have to define your buttons look and feel in a ControlTemplate so you are able to use the TargetName property in the Trigger to target the Image Control. e.g.:

<Button Width="200" Height="200">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            BorderBrush="SlateGray"
            BorderThickness="1">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="5*" />
                                <RowDefinition Height="2*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="3*" />
                                <ColumnDefinition Width="9*" />
                                <ColumnDefinition Width="3*" />
                            </Grid.ColumnDefinitions>

                            <Image x:Name="MyImage" Grid.Row="0"
                   Grid.Column="1"
                   Margin="7"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Stretch"
                   Source="{Binding ElementName=MyButtonControl,
                                    Path=Image}" />

                            <TextBlock Grid.Row="1"
                       Grid.Column="1"
                       Margin="2"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Stretch"
                       Text="{Binding ElementName=MyButtonControl,
                                      Path=Text}" />
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter Property="Button.Effect" TargetName="MyImage">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="30"
                                                          Opacity="100"
                                                          ShadowDepth="0"
                                                          Color="WhiteSmoke" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Button.Template>
        </Button>