In the previous article about "Capture ScreenShot From Media Element In WPF
", we saw how to capture screenshot from the media (Video) playing
in Media Element. In this article we will see how we can add a Seek Bar that
will seek to the desired position.Crating WPF Application
Fire up Visual Studio 2008 and Create a WPF Application and
name the project as MediaSampleWPF.
am just extending the feature that we experienced in our last application titled
"Media Element In WPF" and "Screenshot From Media Element in WPF".
will just add a Slider control that will seek to the desired position of the
Media Element. See following figure.
in the constructor of the Application add a DispatcherTimer object as
timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(200);
timer.Tick += new EventHandler(timer_Tick);
in the MediaElement's MediaOpened event add the following code:
private void MediaEL_MediaOpened(object sender, RoutedEventArgs e)
TimeSpan ts = MediaEL.NaturalDuration.TimeSpan;
seekBar.Maximum = ts.TotalSeconds;
seekBar.SmallChange = 1;
seekBar.LargeChange = Math.Min(10, ts.Seconds / 10);
Add two events to the slider control, events are Thumb.DragStarted and
Thumb.DragCompleted in XAML behind.
the above event handlers add the following code:
bool isDragging = false;
void timer_Tick(object sender, EventArgs e)
seekBar.Value = MediaEL.Position.TotalSeconds;
private void seekBar_DragStarted(object sender, DragStartedEventArgs e)
isDragging = true;
private void seekBar_DragCompleted(object sender, DragCompletedEventArgs e)
isDragging = false;
MediaEL.Position = TimeSpan.FromSeconds(seekBar.Value);
it we are ready to run our application. Open the media and seek to the desired
You can also download sample project used in above example
the article helps.