Creating Your Own Custom WPF Media Player - Seekbars and Volume Bars
Welcome to the final part of the tutorial. This time, we shall create bars for media element play progress and volume controlers.
Open MainWindow.xaml.cs file. In the constructor of the class, (the one called MainWindow) add the following lines of code:
timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(200);
timer.Tick += new EventHandler(timer_Tick);
sliderVOLUME.Value = volumeValue;
When you add the new EventHandler, the IDE will automatically write the function for you just below the constructor. It is not necessary to add these as global variables inside the class.
The event handler we just created should look like this.
void timer_Tick(object sender, EventArgs e)
seekBar.Value = media_Element.Position.TotalSeconds;
currentposition = seekBar.Value;
Don’t forget to add currentposition(double) and IsDragging(bool) as variables inside the class.
Now, edit the MediaOpened EventHandler for media element and add these lines
private void media_Element_MediaOpened(object sender, RoutedEventArgs e)
TimeSpan ts = media_Element.NaturalDuration.TimeSpan;
seekBar.Maximum = ts.TotalSeconds;
seekBar.SmallChange = 1;
seekBar.LargeChange = Math.Min(10, ts.Seconds / 10);
history = media_Element.Volume;
When we open a media file, we first check if the media file has a timespan. In the case of pictures, it doesn’t, so the progress bar will do nothing. If it has a timespan, we set the seekbar maximum value to the timespan of the media file in seconds. We also set smallchange and largechage as precisions for when we drag the pointer around. The timer starts, and it will count the seconds passed. History is a double variable which retains the initial level of sound.
And now, we will edit the 2 custom Eventhandlers we created for the seekbar (see part 2)
private void Seekbar_Dragcompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
isDRagging = false;
media_Element.Position = TimeSpan.FromSeconds(seekBar.Value);
private void SeekBar_Dragstarter(object sender, System.Windows.Controls.Primitives.DragStartedEventArgs e)
isDRagging = true;
As the seekbar value pointer moves around with each timer_tick, the current play position of the media element is also moving. Remember, this way, we can only manipulate the seekbar by dragging the pointer around. We can, of course, edit the ValueChanged EventHandler (which is also custom created, see part 2) so we get to set the position by simply clicking on the bar, instead of dragging, just like we do with the volume bar:
private void sliderVOLUME_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
media_Element.Volume = (double)sliderVOLUME.Value;
The click event for the mute/unmute button looks like this
private void mute_Click(object sender, RoutedEventArgs e)
if (isMuted == false)
media_Element.Volume = 0;
isMuted = true;
sliderVOLUME.Value = 0;
else if (isMuted == true)
isMuted = false;
sliderVOLUME.Value = 100;
And…this is it. Sounds simple isn’t it? We can do much, much more with this media player. We can add playlists, create custom buttons, 3D effects and others. What’s next? We compile the application. Press the green “Play” button in the taskbar, and you will enter debugging mode. Once you’ve cleared all the mistakes and add the ; you forgot to add, you can test the application. Once you are satisfied it works properly, simply build the application, by using the “Build" menu. The files will be created in C:\user\My documents\Visual Studio\Porjects\. You will find the .exe files in the binary folder. You can now move the application at will on other computers and bolster to your friends. Just remember to take all the files created when you built the project, which are basically all the files in that folder.