Binding MediaElement to slider position in WPF
Solution 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):
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);
}
}
Solution 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.
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.
HomeMade
Passionate about what I do, always willing to jump into team projects.
Updated on July 19, 2022Comments
-
HomeMade almost 2 years
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}" />
-
HomeMade about 12 yearswell it keeps calling ValueChanged event, which I use when the user clicks on the slider, so it moves to that location of media file. slider value is changing but it doesn't reflect on the UI :(
-
HomeMade about 12 yearsit started working since I removed the other logic: when user clicks the slider, it jumps to that location. Can you tell me how you solved that?
-
HomeMade about 12 yearsI used proper format. I still don't understand converters enough, since I'm a beginner. Thank you.
-
HomeMade about 12 yearsit calls the handler, but keeps a value for a less than second ( i see it move to the clicked point), and then it returns to the current playing position. The sound is playing continuously all the time.
-
HomeMade about 12 yearsI forgot to add line
timeSlider.AddHandler
but now it restarts the media file (playing from the begining on every click). -
HomeMade about 12 yearsI've solved it. I had been messed with milliseconds instead of seconds, and now it works. Thank you very much!
-
Johnny Westlake about 6 yearsFwiw, the built in UWP media element updates it's slider every 200 - 250 ms, for performance reasons. 10 ms is fast (technically it's about 16ms for a screen refresh, although you can't trust for that accurate ticking on a DispatcherTimer), but it's a lot more costly that it needs to be - especially using a DispatcherTimer and firing a Layout update on the slider constantly. Most media players don't update that fast for perf / efficiency reasons.