mediaElementの上にスタックパネルをフェードイン/アウトします（両方ともグリッド内の同じセルにあります）。

Question

私はWPFを初めて使用しています。私は単純なビデオアプリケーションを作成しています。アプリケーションには3つの列があります。 2列目はグリッドスプリッターで、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

私は、StackPanelにMouseLeave用のEventTriggerを配置する必要があり、MediaPlayerのコンテンツではなく、StackPanelのコンテンツに配置する必要があります。

EDIT

OK、私は（私は高さの小道具を見ていない）のStackPanelは全体medialelementをカバーしていたと思いました。

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

EDIT 2：

ソリューションは、MediaElementに、以下の例のようにいくつかの種類のコンテンツコントロール内のStackPanelを配置することができここ

私はあなたが所有してmodfiedていますコントロールのサイズと位置を決めるためのコードビハインドは必要ありません。私はCanvasをContentControlに置き換え、他のコントロールも置き換えました。しかし全体的なレイアウトは同じです：

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