MediaPlayerElementの再生位置をSliderでうまく操作できない

Question

前提、実現したいこと

WinUI3で動画を再生できるページを作っています。MediaPlayerElementで動画を再生し、そのAreTransportControlsEnabledをFalseにして自分で動画再生のコントロールを作ろうとしています。Sliderを使って再生位置を変えられるようにしているのですが、動画再生中にSliderのつまみをもって少し動かした後どこかでつまみを持ったまま同じ場所でとどまると、動画は進もうとしていくのにSliderはそれより前の位置にしようとするので、動画が少し再生されてそのあとすぐ巻き戻るという動きを繰り返してしまいます。

試したこと

Sliderを動かしている間は動画の再生を止めようと思ったのですが、SliderのValueがつまみを動かすことによって変更されたということを検知する方法がわかりませんでした。SliderのTappedはマウスが押された場所と離された場所が同じでないと発火しないようなのでうまくいきませんでした。
また、下のSlider_ValueChangedは動画が再生されると何度も発火し、発火した原因がユーザーの操作によってなのか、単に動画が再生されているからなのかを見分ける方法がわからないので、その中に動画の再生を一時停止するなどといった処理を入れられませんでした。

ソースコード

SliderのValueから動画の再生位置を決める

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    var value = (sender as Slider).Value;
    mediaPlayer.PlaybackSession.Position = new TimeSpan(0, 0, 0, 0, (int)value);
    //VideoPlayer.SetMediaPlayer(mediaPlayer);　が前のほうにあります。
}

SliderのValueを動画の再生時間に同期

mediaPlayer.PlaybackSession.PositionChanged += MediaPlayerPositionChanged;
private void MediaPlayerPositionChanged(MediaPlaybackSession sender, object e)
{
    VideoCommandSlider.Value = mediaPlayer.PlaybackSession.Position.TotalMilliseconds;
}

Comments

[len_souko]

WinUI3はほとんど触っていないうえにMediaPlayerElementはノータッチでしたので見当違いかもしれませんが、イベント的には
押す＝＞（動かす）＝＞離す
で、動かすがない場合にTappedが発生するので、やりたいことをするタイミングではないかと思います
また、「スライダーを止めた場合」の処理がしたいのにValueChangedも起きる筈がありませんので見当違いかと思います
調べるべきは押すイベントで再生を止めて話すイベントで再生を再開というのが一番自然な動きになりそうなのでそのイベントをどうやってとるかを調べると良いと思います

Answer 1

WPFみたいにPreview系のイベントがないのがつらいですね^^;

SliderのValueがつまみを動かすことによって変更されたということを検知する方法がわかりませんでした。

Sliderのテンプレートを見ると、CommonStates.Pressedで検知できそうです。
microsoft-ui-xaml/controls/dev/CommonStyles/Slider_themeresources.xaml at winui3/release/1.4-stable · microsoft/microsoft-ui-xaml

PlaybackSession.PositionChangedはあんまりスムーズではなかったので、単純にタイマーにしました（が、処理が甘いかもｗ

<windowex:WindowEx
  x:Class="Qbcc389s6g38ght.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:windowex="using:WinUIEx"
  Width="800"
  Height="450">

  <Grid RowDefinitions="*,Auto">
    <MediaPlayerElement x:Name="mpe" Source="ms-appx:///Assets/SampleMedia/ladybug.wmv" />

    <StackPanel Grid.Row="1" Margin="8">
      <Slider
        x:Name="slider"
        Loaded="Slider_Loaded"
        ValueChanged="Slider_ValueChanged" />

      <ToggleButton
        x:Name="toggleButton"
        HorizontalAlignment="Center"
        Checked="ToggleButton_Checked"
        Content="Play/Pause"
        Unchecked="ToggleButton_Unchecked" />
    </StackPanel>
  </Grid>
</windowex:WindowEx>

using System;
using System.Linq;
using Microsoft.UI.Dispatching;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Media;
using Windows.Media.Playback;

namespace Qbcc389s6g38ght;

public sealed partial class MainWindow //: Window
{
    private readonly DispatcherTimer timer;
    private bool isPlaying;

    public MainWindow()
    {
        InitializeComponent();

        mpe.MediaPlayer.MediaOpened += MediaPlayer_MediaOpened;
        mpe.MediaPlayer.MediaEnded += MediaPlayer_MediaEnded;

        mpe.MediaPlayer.PlaybackSession.PlaybackStateChanged += PlaybackSession_PlaybackStateChanged;

        timer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(100), };
        timer.Tick += Timer_Tick;
    }


    private void Slider_Loaded(object sender, RoutedEventArgs e)
    {
        var firstChild = VisualTreeHelper.GetChild(slider, 0) as FrameworkElement;
        var commonStates = VisualStateManager.GetVisualStateGroups(firstChild)
                                             .First(x => x.Name == "CommonStates");
        commonStates.CurrentStateChanged += CommonStates_CurrentStateChanged;
    }
    private void CommonStates_CurrentStateChanged(object sender, VisualStateChangedEventArgs e)
    {
        if (e.NewState.Name == "Pressed")
        {
            isPlaying = mpe.MediaPlayer.PlaybackSession.PlaybackState == MediaPlaybackState.Playing;
            mpe.MediaPlayer.Pause();
        }
        else if (e.NewState.Name == "Normal")
        {
            if (isPlaying) mpe.MediaPlayer.Play();
        }
    }

    private void MediaPlayer_MediaOpened(MediaPlayer sender, object args)
    {
        DispatcherQueue?.TryEnqueue(DispatcherQueuePriority.Normal, () =>
        {
            slider.Maximum = mpe.MediaPlayer.PlaybackSession.NaturalDuration.TotalMilliseconds;
        });
    }
    private void MediaPlayer_MediaEnded(MediaPlayer sender, object args)
    {
        DispatcherQueue?.TryEnqueue(DispatcherQueuePriority.Normal, () =>
        {
            slider.Value = 0;
            toggleButton.IsChecked = false;
        });
    }

    private void PlaybackSession_PlaybackStateChanged(MediaPlaybackSession sender, object args)
    {
        DispatcherQueue?.TryEnqueue(DispatcherQueuePriority.Normal, () =>
        {
            if (mpe.MediaPlayer.PlaybackSession.PlaybackState == MediaPlaybackState.Playing)
                timer.Start();
            else
                timer.Stop();
        });
    }

    private void Timer_Tick(object sender, object e)
        => slider.Value = mpe.MediaPlayer.PlaybackSession.Position.TotalMilliseconds;

    private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        => mpe.MediaPlayer.PlaybackSession.Position = TimeSpan.FromMilliseconds(slider.Value);

    private void ToggleButton_Checked(object sender, RoutedEventArgs e) => mpe.MediaPlayer.Play();
    private void ToggleButton_Unchecked(object sender, RoutedEventArgs e) => mpe.MediaPlayer.Pause();
}

NuGet Gallery | WinUIEx 2.1.0

---

わたしも今MediaTransportControlsで見切れるシークバー（↓のようなの）を作ってるんですが、隠れると位置が更新されなくて頭を抱えました（結局２重にSliderを付けたｗ
[WPF] 動画プレイヤー 表示/非表示できる操作画面を作りたい

ThumbnailRequestedもタップした時しか来ないとか意味が分からんし...

Comments

[junyasu0124]

回答ありがとうございます。思い通りの挙動になりました。CommonStatesを使ったイベントを作れることを初めて知りました。