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>