CODEWITHSUNDEEP
wpfslidermediaelement
HomeMade
HomeMade

Reputation: 570

Binding MediaElement to slider position in 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}" />

Upvotes: 4

Views: 27316

Answers (4)

koopa
koopa

Reputation: 31

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

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.

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

timerVideoPlayback.Stop();

Upvotes: 0

G.Y
G.Y

Reputation: 6159

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.

Upvotes: 0

Dor Cohen
Dor Cohen

Reputation: 17100

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

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:

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);
            }
        }

Upvotes: 11

Yuriy Zanichkovskyy
Yuriy Zanichkovskyy

Reputation: 1699

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.

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

Hope this helps.

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

Upvotes: 3

Related Questions