title: Trigger for mouseover on parent element
body: <p>If have written a button usercontrol that contains an image and a text.</p>
  
  <p>When the user moves the mouse over the button, I want an effect on the image.</p>
  
  <p>Right now I just can get it to work with an effect on the button.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;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"&gt;
      &lt;Button.Resources&gt;
          &lt;ResourceDictionary&gt;
              &lt;ResourceDictionary.MergedDictionaries&gt;
                  &lt;ResourceDictionary Source="Resources.xaml" /&gt;
                  &lt;ResourceDictionary&gt;
                      &lt;Style x:Key="SomeButtonStyle"
                             BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                             TargetType="Button"&gt;
                          &lt;Style.Triggers&gt;
                              &lt;Trigger Property="Button.IsMouseOver" Value="True"&gt;
                                  &lt;Setter Property="Button.Effect"&gt;
                                      &lt;Setter.Value&gt;
                                          &lt;DropShadowEffect BlurRadius="30"
                                                            Opacity="100"
                                                            ShadowDepth="0"
                                                            Color="WhiteSmoke" /&gt;
                                      &lt;/Setter.Value&gt;
                                  &lt;/Setter&gt;
                              &lt;/Trigger&gt;
                          &lt;/Style.Triggers&gt;
                      &lt;/Style&gt;
                  &lt;/ResourceDictionary&gt;
              &lt;/ResourceDictionary.MergedDictionaries&gt;
          &lt;/ResourceDictionary&gt;
      &lt;/Button.Resources&gt;
      &lt;Border HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              BorderBrush="SlateGray"
              BorderThickness="1"&gt;
          &lt;Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="5*" /&gt;
                  &lt;RowDefinition Height="2*" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="3*" /&gt;
                  &lt;ColumnDefinition Width="9*" /&gt;
                  &lt;ColumnDefinition Width="3*" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;Image Grid.Row="0"
                     Grid.Column="1"
                     Margin="7"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Stretch"
                     Source="{Binding ElementName=MyButtonControl,
                                      Path=Image}" /&gt;
  
              &lt;TextBlock Grid.Row="1"
                         Grid.Column="1"
                         Margin="2"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Stretch"
                         Style="{DynamicResource MenuButtonText}"
                         Text="{Binding ElementName=MyButtonControl,
                                        Path=Text}" /&gt;
          &lt;/Grid&gt;
      &lt;/Border&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p>Now I want the effect to just affect the image, or the image and text perhaps.</p>
  
  <p>Can this be achieved somehow?</p>
  
  <p>Right now I'm trying to have the trigger at the image and let it fire on mouseover of the parent. </p>
  
  <p>Here is the testcode:</p>
  
  <pre><code>&lt;Image Grid.Row="0"
                     Grid.Column="1"
                     Margin="7"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Stretch"
                     Source="{Binding ElementName=ImageButtonControl,
                                      Path=Image}"&gt;
                  &lt;Image.Style&gt;
                      &lt;Style&gt;
                          &lt;Style.Triggers&gt;
                              &lt;DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True"&gt;
                                  &lt;Setter Property="Image.Effect"&gt;
                                      &lt;Setter.Value&gt;
                                          &lt;DropShadowEffect BlurRadius="30"
                                                            Opacity="100"
                                                            ShadowDepth="0"
                                                            Color="WhiteSmoke" /&gt;
                                      &lt;/Setter.Value&gt;
                                  &lt;/Setter&gt;
                              &lt;/DataTrigger&gt;
                          &lt;/Style.Triggers&gt;
                      &lt;/Style&gt;
                  &lt;/Image.Style&gt;
              &lt;/Image&gt;
  </code></pre>
  
  <p>But the trigger does not change anything...</p>