淡入/淡出mediaElement顶部的堆栈面板（两者都在网格中的同一单元格内）

Question

我是WPF的新手，我在这方面遇到了一个问题。我正在制作一个简单的视频应用程序，该应用程序有3列。第二列是网格分析器，第三列是 MediaElement ， StackPanel（包含视频控件）位于其上方。

我想要实现的是当鼠标指针进入MediaElement时淡入StackPanel，并在鼠标指针退出MediaElement时淡出StackPanel。但是，当鼠标指针进入StackPanel时会出现问题，这将触发淡出效果（将发生MediaElement的MouseExit事件）。

<Window x:Class="WPF_learningapp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:MyNamespace="clr-namespace:WPF_learningapp"
    Title="MiDrama" Height="350" Width="700" ResizeMode="CanResize">
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Custom assets/CustomScrollbar.xaml"></ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
        <MyNamespace:PausePlayBooleanConverter x:Key="PausePlayBooleanConverter" />
    </ResourceDictionary>
</Window.Resources>
<MyNamespace:GridControl>
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="0" MaxWidth="300"/>
        <ColumnDefinition Width="1"/>
        <ColumnDefinition Width= "*">
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackPanel/>
    <GridSplitter Grid.Column="1" Width="1" HorizontalAlignment="Stretch" />
    <MediaElement Grid.Column="2" Name="myMediaPlayer" LoadedBehavior="Manual" Stretch="Fill">
        <MediaElement.Triggers>
          <EventTrigger RoutedEvent="MouseEnter" >
             <BeginStoryboard>
                 <Storyboard>
                     <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VideoControlPanel"
                             From="0.0" To="1.0" Duration="0:0:1"/>
                 </Storyboard>
             </BeginStoryboard>
          </EventTrigger>
          <EventTrigger RoutedEvent="MouseLeave">
             <BeginStoryboard>
                 <Storyboard>
                     <DoubleAnimation Storyboard.TargetProperty="Opacity"           Storyboard.TargetName="VideoControlPanel"
                            From="1.0" To="0" Duration="0:0:1"/>
                 </Storyboard>
             </BeginStoryboard>
          </EventTrigger>
       </MediaElement.Triggers>
    </MediaElement>
    <StackPanel Name="VideoControlPanel" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="59" Margin="55,0,41,4" Background="Transparent">
        <Slider Name="VideoSlider" Thumb.DragStarted="slider_DragStarted"  Thumb.DragCompleted="slider_DragCompleted" Margin="0,0,0,5"
                IsMoveToPointEnabled="True" ValueChanged="slider_ValueChanged"/>
        <WrapPanel HorizontalAlignment="Center">
            <Button Content="{Binding Path=isPlaying, Converter={StaticResource PausePlayBooleanConverter}}" Height="34" Width="50" Margin="5 0" Name="playpause_Btn" Click="playpause_Btn_Click"/>
            <Button Height="34" Width="50" Content="Stop" Margin="5 0" Name="stop_Btn" Click="stop_Btn_Click"/>
        </WrapPanel>
    </StackPanel>
</MyNamespace:GridControl>

我尝试将所有内容封装在网格中的画布中，但控制面板不会正确调整大小。即使在网格列上实现事件触发器似乎也无法正常工作。有没有办法实现这个目标？请指教。

Answer 1

我想说你应该将MouseLeave的EventTrigger放在StackPanel上，也可以放在StackPanel的内容上 - 而不是放在MediaElement上。

修改

好吧，我认为堆叠板覆盖了整个媒体元素（我没有看到高度道具）。

解决方案可以是将mediaelement和stackpanel放置在某种内容控件中，如下例所示：

<Window x:Class="SO40188046.MainWindow"
        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"
        xmlns:local="clr-namespace:SO40188046"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
  <Border Background="Blue">
    <Border.Triggers>
      <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VideoControlPanel" From="0.0" To="1.0" Duration="0:0:1"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="MouseLeave">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VideoControlPanel" From="1.0" To="0" Duration="0:0:1"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Border.Triggers>
    <Grid>
      <MediaElement Source="SOME MEDIA URI" />
      <Border Name="VideoControlPanel" Background="Red" Height="100" VerticalAlignment="Bottom" Opacity="0" />
    </Grid>
  </Border>
</Window>

编辑2：

这里我修改了你自己的答案，因此不需要代码来控制控件的大小和位置。我已经用ContentControl替换了Canvas并替换了其他一些控件。但整体布局是一样的：

<Window x:Class="WPF_learningapp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:MyNamespace="clr-namespace:WPF_learningapp"
        Title="MiDrama" Height="350" Width="700" ResizeMode="CanResize">
  <Window.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Custom assets/CustomScrollbar.xaml"></ResourceDictionary>
      </ResourceDictionary.MergedDictionaries>
      <MyNamespace:PausePlayBooleanConverter x:Key="PausePlayBooleanConverter" />
    </ResourceDictionary>
  </Window.Resources>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition MinWidth="0" MaxWidth="300"/>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width= "*">
      </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackPanel/>
    <GridSplitter Grid.Column="1" Width="4" HorizontalAlignment="Center" VerticalAlignment="Stretch" />
    <ContentControl Grid.Column="2" Background="AliceBlue">
      <ContentControl.Triggers>
        <EventTrigger RoutedEvent="MouseEnter" >
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetProperty="Opacity" 
                Storyboard.TargetName="VideoControlPanel"
                From="0.0" 
                To="1.0" 
                Duration="0:0:1"/>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetProperty="Opacity" 
                Storyboard.TargetName="VideoControlPanel"
                From="1.0" 
                To="0" 
                Duration="0:0:1"/>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </ContentControl.Triggers>
      <Grid>
        <MediaElement 
          Name="myMediaPlayer" 
          Stretch="Fill"  />
        <Grid Name="VideoControlPanel" VerticalAlignment="Bottom" Height="60" Background="Transparent" Opacity="0">
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
          </Grid.RowDefinitions>
          <Slider 
            Name="VideoSlider" 
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Thumb.DragStarted="slider_DragStarted"  
            Thumb.DragCompleted="slider_DragCompleted" 
            Margin="10,5"
            IsMoveToPointEnabled="True" 
            ValueChanged="slider_ValueChanged"/>
          <Button 
            Grid.Column="0"
            Grid.Row="1"
            HorizontalAlignment="Right"
            Content="Play" 
            Height="26" 
            Width="50" 
            Name="playpause_Btn" 
            Click="playpause_Btn_Click"/>
          <Button 
            Grid.Column="1"
            Grid.Row="1"
            HorizontalAlignment="Left"
            Height="26" 
            Width="50"
            Content="Stop"
            Name="stop_Btn" 
            Click="stop_Btn_Click"/>
        </Grid>
      </Grid>
    </ContentControl>
  </Grid>
</Window>

Answer 2

这是上述问题的解决方案。将所有内容放在网格单元格中的画布内（我认为这是唯一容易使用重叠控件的容器）。

<Window x:Class="WPF_learningapp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:MyNamespace="clr-namespace:WPF_learningapp"
        Title="MiDrama" Height="350" Width="700" ResizeMode="CanResize">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Custom assets/CustomScrollbar.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
            <MyNamespace:PausePlayBooleanConverter x:Key="PausePlayBooleanConverter" />
        </ResourceDictionary>
    </Window.Resources>
    <MyNamespace:GridControl>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="0" MaxWidth="300"/>
            <ColumnDefinition Width="1"/>
            <ColumnDefinition Width= "*">
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel/>
        <GridSplitter Grid.Column="1" Width="1" HorizontalAlignment="Stretch" />
        <Canvas Grid.Column="2" Name="VideoCanvas" SizeChanged="VideoCanvas_sizeChanged" Background="AliceBlue">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="MouseEnter" >
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VideoControlPanel"
                             From="0.0" To="1.0" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VideoControlPanel"
                            From="1.0" To="0" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <MediaElement Grid.Column="2" Name="myMediaPlayer" LoadedBehavior="Manual" Stretch="Fill" Height="{Binding Path=ActualHeight, ElementName=VideoCanvas}"  Width="{Binding Path=ActualWidth, ElementName=VideoCanvas}"/>
            <StackPanel Name="VideoControlPanel" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="59" Background="Transparent" Canvas.Left="10" Canvas.Top="250" Width="371">
                <Slider Name="VideoSlider" Thumb.DragStarted="slider_DragStarted"  Thumb.DragCompleted="slider_DragCompleted" Margin="0,0,0,5"
                    IsMoveToPointEnabled="True" ValueChanged="slider_ValueChanged"/>
                <WrapPanel HorizontalAlignment="Center">
                    <Button Content="{Binding Path=isPlaying, Converter={StaticResource PausePlayBooleanConverter}}" Height="34" Width="50" Margin="5 0" Name="playpause_Btn" Click="playpause_Btn_Click"/>
                    <Button Height="34" Width="50" Content="Stop" Margin="5 0" Name="stop_Btn" Click="stop_Btn_Click"/>
                </WrapPanel>
            </StackPanel>
        </Canvas>
    </MyNamespace:GridControl>
</Window>