Seek Bar For Media Element in WPF

Introduction

In the previous article about "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 Project

Fire up Visual Studio 2008 and Create a WPF Application and name the project as MediaSampleWPF.

seekbar1.gif

I am just extending the feature that we experienced in our last application titled "Media Element In WPF" and "Screenshot From Media Element in WPF".

We will just add a Slider control that will seek to the desired position of the Media Element. See following figure.

seekbar2.gif

First in the constructor of the Application add a DispatcherTimer object as follows:

seekbar3.gif

Then in the MediaElement's MediaOpened event add the following code:

seekbar4.gif

Now Add two events to the slider control, events are Thumb.DragStarted and Thumb.DragCompleted in XAML behind.

seekbar5.gif

In the above event handlers add the following code:

seekbar6.gif

That's it we are ready to run our application. Open the media and seek to the desired position.

seekbar7.gif

Hope the article helps.