Question

我正在创建一个媒体播放器应用程序，当鼠标不在程序窗口内时，我正试图隐藏控件。

我有一个动画设置和工作，但我想不出如何将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>

Answer 1

使用Trigger时的规则（如果TargetName无法使用）是触发器应该属于具有您要修改的属性的元素。在这种情况下，Trigger应属于grdControls。但是，您可以使用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>

接近 Peter Dunno 在评论中建议的第二种方法要求您必须直接设置EventTrigger 主Grid的Triggers属性。您可以直接设置Storyboard或将其定义为资源。以下是该方法的代码：

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

请注意，现在不再需要您定义的Style。

基于其他控件的动画控件

1 个答案: