メディア要素の再生/一時停止アイコンをフェードアウトする - uwp

Question

一時停止/再生モードになっているときに再生/一時停止アイコンをビデオに表示したい。そのアイコンは数秒後に消えるはずです。フェードアウト/フェードインアニメーションを適用する最善の方法は何ですか？

<MediaElement Name="videoMediaElement" AreTransportControlsEnabled="True" Stretch="Fill" PointerPressed="videoMediaElement_PointerPressed" MediaOpened="videoMediaElement_MediaOpened" CurrentStateChanged="Media_State_Changed" > 
     <MediaElement.TransportControls> 
      <MediaTransportControls Background="Red" Foreground="White" IsStopButtonVisible="True" IsStopEnabled="True" IsTextScaleFactorEnabled="True" IsPlaybackRateEnabled="True" IsPlaybackRateButtonVisible="True" IsFastForwardButtonVisible="True" IsFastForwardEnabled="True" IsFastRewindButtonVisible="True" IsFastRewindEnabled="True" /> 
     </MediaElement.TransportControls> 
    </MediaElement> 
    <Image x:Name="icon_play" Source="Assets/icon_play.png" Visibility="Collapsed" Opacity="0.5" HorizontalAlignment="Center" Height="100px" Width="100"/> 
    <Image x:Name="icon_pause" Source="Assets/icon_pause.png" Visibility="Collapsed" Opacity="0.5" HorizontalAlignment="Center" Height="100px" Width="100"/> 

    private void Media_State_Changed(object sender, RoutedEventArgs args) 
    { 
     if (videoMediaElement.CurrentState == MediaElementState.Paused) 
     { 
      icon_play.Visibility = Visibility.Visible; 
      icon_pause.Visibility = Visibility.Collapsed; 
     } 
     else if (videoMediaElement.CurrentState == MediaElementState.Playing) 
     { 
      icon_pause.Visibility = Visibility.Visible; 
      icon_play.Visibility = Visibility.Collapsed; 
     } 
    } 

Answer 1

AreTransportControlsEnabled="True"を設定すると、内蔵メディアプレーヤーを使用することに決めました。あなたは色のようないくつかのカスタマイズを行うことができますが、それらは非常に限られています。独自のUIを構築する場合は、AreTransportControlsEnabled="False"を設定し、XAMLで独自のUIを作成する必要があります。

Answer 2

のようなXAMLのアニメーションを作成します。

<Storyboard x:Name="FadeOut" Target="icon_play" TargetProperty="Opacity"> 
     <DoubleAnimation To="0" Duration="0:0:0.3"/> 
    </Storyboard> 

とちょうどFadeOut.Begin();

を呼び出すか（私はそれを好む）組成アニメーション作成：あなたはの視覚的な不透明度の値を変更するたびに

今

 var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; 

     var implicitOpacity = compositor.CreateScalarKeyFrameAnimation(); 
     implicitOpacity.Target = "Opacity"; 
     implicitOpacity.InsertExpressionKeyFrame(1, "This.FinalValue"); 
     implicitOpacity.Duration = TimeSpan.FromMilliseconds(300); 

     var implicitCollection = compositor.CreateImplicitAnimationCollection(); 
     implicitCollection["Opacity"] = implicitOpacity; 

     var playVisual = ElementCompositionPreview.GetElementVisual(play_icon); 
     playVisual.ImplicitAnimations = implicitCollection; 

を - アニメーションされます：playVisual.Opacity = 0;