C# 基于其他控件设置控件动画

我正在创建一个媒体播放器应用程序，并试图在鼠标不在程序窗口内时设置隐藏控件的动画

我有一个动画设置和工作，但我想不出如何将

EventTrigger

设置为父网格，而不是我实际想要设置动画的网格。基本上，我想将

EventTrigger

设置为

grdMain

，并设置

grdControls

的高度动画

动画：

<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>

网格：

<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>

---

使用

触发器时的规则（如果无法使用
TargetName
）是触发器应属于具有要修改的属性的元素。在这种情况下，
触发器
应属于
GRD控件
。但是，您可以使用
DataTrigger
沿树向上走，并聆听树中任何向上可视对象的其他属性更改。以下代码应该可以工作：

<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>

请注意，您现在定义的
样式不再需要。
我是WPF新手，所以不确定。但是您是否可以将样式放在grdMain上，然后让TargetProperty引用相应的子控件？例如，“Storyboard.TargetProperty=grdControls.Height”之类的内容？或者，故事板中似乎有一个“TargetName”属性。也许您可以将其设置为“grdControls”（同样，将样式放在grdMain元素上）。第一种方法非常有效，使用这一种方法是因为另一种方法需要更多的重写，但是一种方法比另一种更好吗？我只想知道，以备将来参考。@blawford是的，第一个更好。我只是把第二种方法作为参考。
<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>