Animate control based on other control

Question

I am creating a media player application and I am trying to animate hiding the controls when the mouse is not inside the program window.

I have a animation setup and working, but I can't think of how to set the EventTrigger to the parent grid rather than the grid I actually want to animate. Essentially I want to set the EventTrigger to be grdMain and animate the height of grdControls.

Animation:

<Window.Resources>
    <Style x:Key="FadeInOut" TargetType="Grid">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Control.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:1" To="40" Storyboard.TargetProperty="Height"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Control.MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="Height"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Grids:

<Grid x:Name="grdMain" Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <MediaElement x:Name="meVideo" IsMuted="True" Stretch="Uniform" MediaOpened="meVideo_MediaOpened" MediaEnded="meVideo_MediaEnded" Grid.RowSpan="2" />
    <Grid Grid.Row="1" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ProgressBar x:Name="pgbVideoTimeline" HorizontalAlignment="Stretch" Height="7" Background="#252525" Foreground="Maroon" BorderThickness="0" Grid.Row="1" MouseDown="pgbVideoTimeline_MouseDown" MouseMove="pgbVideoTimeline_MouseMove" MouseUp="pgbVideoTimeline_MouseUp" />
        <Grid x:Name="grdControls" Grid.Row="2" Background="#0C0D0D" Height="0" Style="{StaticResource FadeInOut}" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="stpPlaybackControls" Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="0">
                <Image x:Name="btnPlayPause" Height="30" Margin="10,0,5,0" ToolTip="Play" Source="Resources/Images/UI/Play.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnPlayPause_MouseUp" />
                <Image x:Name="btnReplay" Height="20" Margin="5,0,5,0" ToolTip="Replay" Source="Resources/Images/UI/Replay.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnReplay_MouseUp" />
            </StackPanel>
            <StackPanel x:Name="stpMiscControls" Orientation="Horizontal" HorizontalAlignment="Right" Grid.Column="1">
                <Image x:Name="btnFullScreen" Height="25" Margin="5" ToolTip="Fullscreen" Source="Resources/Images/UI/FullScreen.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" MouseUp="btnFullScreen_MouseUp" />
                <Image x:Name="btnSettings" Height="30" Margin="5,5,10,5" ToolTip="Settings" Source="Resources/Images/UI/Settings.png" MouseEnter="btnVideoControl_MouseEnter" MouseLeave="btnVideoControl_MouseLeave" />
            </StackPanel>
        </Grid>
    </Grid>
</Grid>

Answer 1

The rule when using Trigger (in case TargetName can't be used) is the Trigger should belong to the element which has the properties you want to modify. In this case the Trigger should belong to the grdControls. However you can use DataTrigger to walk up the tree and listen to some other property change of any visual upwards in the tree. The following code should work:

<Style x:Key="FadeInOut" TargetType="Grid">
   <Style.Triggers>
       <DataTrigger Binding="{Binding IsMouseOver, ElementName=grdMain}" 
                              Value="true">
           <DataTrigger.EnterActions>
             <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:1" To="40" 
                     Storyboard.TargetProperty="Height"/>
                </Storyboard>
            </BeginStoryboard>
           </DataTrigger.EnterActions>
           <DataTrigger.ExitActions>
               <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:1" To="0" 
                      Storyboard.TargetProperty="Height"/>
                </Storyboard>
            </BeginStoryboard>
           </DataTrigger.ExitActions>
       </DataTrigger>
   </Style.Triggers>
</Style>

The second approach close to what Peter Dunno suggested in his comment requires you to have to set the EventTrigger directly in the Triggers property of the main Grid. You can either set the Storyboards directly or define them as Resource. Here is the code for that approach:

<Grid x:Name="grdMain" Background="Black">
  <Grid.Triggers>
     <EventTrigger RoutedEvent="Control.MouseEnter">
            <BeginStoryboard>
                <Storyboard TargetName="grdControls">
                    <DoubleAnimation Duration="0:0:1" To="40" 
                                     Storyboard.TargetProperty="Height"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Control.MouseLeave">
            <BeginStoryboard>
                <Storyboard TargetName="grdControls">
                    <DoubleAnimation Duration="0:0:1" To="0" 
                                     Storyboard.TargetProperty="Height"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
  </Grid.Triggers>
  <!-- remaining code -->
</Grid>

Note that the Style you define now is no longer needed.