将MediaElement绑定到WPF中的滑块位置

Tried binding Maximum value of slider to media element's duration and binding slider's current value to the position of media element, but but for some reasons it doesn't.

尝试将滑块的最大值绑定到媒体元素的持续时间和绑定滑块的当前值到媒体元素的位置，但是由于某些原因它没有。

I want the slider to move it's thumb while the video is playing.

我想让滑块在播放视频时移动它的拇指。

<Slider x:Name="videoSlider" Value="{Binding ElementName=mp3MediaElement, Path=Position}" 
ValueChanged="videoSlider_ValueChanged" IsMoveToPointEnabled="True" 
Maximum="{Binding ElementName=mp3MediaElement, Path=NaturalDuration}" 
AllowDrop="True" DataContext="{Binding ElementName=mp3MediaElement}" />

4 个解决方案

#1

I didn't use binding.. I had a similar issue and used timer for this (My code is in Silverlight by it suppose to be the same on WPF):

我没有使用绑定. .我有一个类似的问题，并使用了计时器(我的代码在Silverlight中，假设在WPF上是相同的):

First direction (movie updates the slider)

第一个方向(电影更新滑块)

private TimeSpan TotalTime;

private void MyMediaElement_MediaOpened(object sender, RoutedEventArgs e)
        {
            TotalTime = MyMediaElement.NaturalDuration.TimeSpan;

            // Create a timer that will update the counters and the time slider
            timerVideoTime = new DispatcherTimer();
            timerVideoTime.Interval = TimeSpan.FromSeconds(1);
            timerVideoTime.Tick += new EventHandler(timer_Tick);
            timerVideoTime.Start();
        }

void timer_Tick(object sender, EventArgs e)
        {
            // Check if the movie finished calculate it's total time
            if (MyMediaElement.NaturalDuration.TimeSpan.TotalSeconds > 0)
            {
                if (TotalTime.TotalSeconds > 0)
                {
                    // Updating time slider
                    timeSlider.Value = MyMediaElement.Position.TotalSeconds /
                                       TotalTime.TotalSeconds;
                }
            }
        }

Second direction (user updates the slider)
on form ctor or something like this write the following line:

第二方向(用户更新滑块)在表格ctor或类似的东西写以下一行:

timeSlider.AddHandler(MouseLeftButtonUpEvent, 
                      new MouseButtonEventHandler(timeSlider_MouseLeftButtonUp), 
                      true);

and the event handler is:

事件处理程序是:

private void timeSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (TotalTime.TotalSeconds > 0)
            {
                MyMediaElement.Position = TimeSpan.FromSeconds(timeSlider.Value * TotalTime.TotalSeconds);
            }
        }

#2

Both Slider properties Value and Maximum are of type Double. You are trying to bind to values of types TimeSpan and Duration correspondingly and thats why the binding system doesn't work in your case.

滑块属性值和最大值都是双类型的。您正在尝试相应地绑定到TimeSpan和Duration类型的值，这就是为什么绑定系统在您的情况下不能工作。

You may try to write a convertor, or to bind to NaturalDuration.TimeSpan.TotalSeconds property.

您可以尝试编写一个转换器，或者绑定到naturaldurl . timespan。TotalSeconds财产。

Hope this helps.

希望这个有帮助。

By the way if some of your bindings do not work you may check binding errors in Visual Studio "Output" window.

顺便说一下，如果您的某些绑定不能工作，您可以在Visual Studio“Output”窗口中检查绑定错误。

#3

I had the same problem, the slider was not updating UI of the MediaElement..
I spent quite some time trying to fix it and I am not sure it will help others.
But Just in case someone else hit that problem, do note that there is a ScrubbingEnabled property in media element which allows the UI of the MediaElement to automatically seek the correct picture according to the position.
Very useful when you are in a pause-mode and trying to drag the slider.
Just add: ScrubbingEnabled="True" in the XAML of your MediaElement.

我有同样的问题，滑块没有更新MediaElement的UI。我花了很长时间试图修复它，我不确定它是否会帮助其他人。但是，万一有人遇到这个问题，请注意，media元素中有一个ScrubbingEnabled属性，它允许MediaElement的UI根据位置自动查找正确的图片。当您处于暂停模式并试图拖动滑块时，非常有用。只需在MediaElement的XAML中添加:ScrubbingEnabled=“True”。

#4

Here's what I ended up using for my UWP app.

这是我最后使用的UWP应用。

This answer just addresses the specific question; moving the slider thumb in response to playback. It doesn't handle changing the video position in response to the user moving the slider.

这个答案只是针对特定的问题;移动滑块以响应回放。它不处理为响应用户移动滑块而改变视频位置。

First add these:

第一次添加这些:

private DispatcherTimer timerVideoPlayback;

private void TimerVideoPlayback_Tick(object sender, object e)
{
    long currentMediaTicks = mediaElement.Position.Ticks;
    long totalMediaTicks = mediaElement.NaturalDuration.TimeSpan.Ticks;

    if (totalMediaTicks > 0)
        slider.Value = (double)currentMediaTicks / totalMediaTicks * 100;
    else
        slider.Value = 0;
}

Then when your video starts, start the timer:

然后当你的视频开始时，开始计时:

timerVideoPlayback = new DispatcherTimer();
timerVideoPlayback.Interval = TimeSpan.FromMilliseconds(10);
timerVideoPlayback.Tick += TimerVideoPlayback_Tick;
timerVideoPlayback.Start();

I used a 10 ms interval to keep the slider motion steady. Use any value you like.

我使用了10毫秒的间隔来保持滑块的运动稳定。使用你喜欢的任何值。

And don't forget to stop that timer when playback ends:

当回放结束时不要忘记停止计时器:

timerVideoPlayback.Stop();

#1