Ytan Ytan - 1 month ago 10
C# Question

Fade in/out a stack panel on top of a mediaElement (both are within the same cell in a grid)

I am new to WPF and I am facing an issue in this. I am making a simple video application, and the application has 3 columns. The 2nd column is a gridsplitter, and the 3rd column is a MediaElement and a StackPanel (containing video controls) on top of it.

The thing I want to achieve is to fade in the StackPanel when the mouse pointer enters the MediaElement, and fade out the StackPanel when the mouse pointer exits the MediaElement. However, the problem occurs when the mouse pointer enters the StackPanel, which will trigger the fade out effect (MouseExit event of the MediaElement will occur).

<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 Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="0" MaxWidth="300"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width= "*"/>
</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"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VideoControlPanel"
From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
</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"></Slider>
<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>
<Button Height="34" Width="50" Content="Stop" Margin="5 0" Name="stop_Btn" Click="stop_Btn_Click"></Button>
</WrapPanel>
</StackPanel>
</Canvas>
</Grid>




I tried encapsulating everything in a canvas within the grid, but the control panel will not resize properly. Even implementing an event trigger on the grid column doesn't seem to be working. Is there a way to accomplish this? Please advice.

Answer

I would say that you should place the EventTrigger for MouseLeave on the StackPanel or maybe on the content of the StackPanel - not on the MediaElement.

EDIT

OK, I thought the stackpanel was covering the whole medialelement (I didn't see the height prop).

A solution could be to place the mediaelement and the stackpanel inside a content control of some kind as in the below example:

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