.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Seek Bar For Media Element In WPF

Posted By:Diptimaya Patra       Posted Date: April 27, 2010    Points: 25    Category: WPF    URL: http://www.dotnetspark.com  

Seek Bar For Media Element In WPF. In this article we will see how we can add a Seek Bar that will seek to the desired position in Media Element in WPF.
 

Introduction

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

DispatcherTimer timer;

#region Constructor
public Window1()
{
    InitializeComponent();
    IsPlaying(false);
    timer = new DispatcherTimer();
    timer.Interval = TimeSpan.FromMilliseconds(200);
    timer.Tick += new EventHandler(timer_Tick);
}
#endregion

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

private void MediaEL_MediaOpened(object sender, RoutedEventArgs e)
{
    if (MediaEL.NaturalDuration.HasTimeSpan)
    {
        TimeSpan ts = MediaEL.NaturalDuration.TimeSpan;
        seekBar.Maximum = ts.TotalSeconds;
        seekBar.SmallChange = 1;
        seekBar.LargeChange = Math.Min(10, ts.Seconds / 10);
    }
    timer.Start();
}

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


  

In the above event handlers add the following code:
bool isDragging = false;

void timer_Tick(object sender, EventArgs e)
{
    if (!isDragging)
    {
        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);
}

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

seekbar7.gif

You can also download sample project used in above example

Hope the article helps.

 Subscribe to Articles

     

Further Readings:

Responses
Author: Sameena         Company URL: http://www.dotnetspark.com
Posted Date: August 22, 2011

Hi Patra,
I am learning silverlight..All your posts are very helpful to me in learning..
Thank You very much..

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend