Control position of the song Using Slider bar in windows phone using converter class.

In windows phone 7.1 there is no option available to control directly the position of the song and change the position using slider bar which is actually called seek bar for music player.
I’m going to explain how we do that using slider bar with media element.
First of all add a media element on your application using Blend or just type an XAML tag.

<MediaElement x:Name="myMedia" Source="/My MP3 File.mp3" CurrentStateChanged="myMusic_CurrentStateChanged"/>In windows phone 7.1 there is no option available to control directly the position of the song and change the position using slider bar which is actually called seek bar for music player. I’m going to explain how we do that using slider bar with media element. First of all add a media element on your application using Blend or just type an XAML tag.

 <Slider x:Name="PostisonControlSlider">

In the event CurrentStateChanged in C# class write this code to assign maximum value of the song maximum value. 

 PostionControlSlider.Maximum = myMedia.NaturalDuration.TimeSpan.TotalSeconds;

After adding Slider and media element we want to bind the position of the media element and the value of the slider bar but unfortunately we are not able to do that because position have type of “Time” but the Slider have value type of Double Integer. To bind different type of values we need to write a converter class in C# or any other class type.
In converter class we get value from slider and convert it into our desire value in this scenario our desired converted value is time span as position of the song is control by time span.

 public class PositionConverterClass : IValueConverter
 {
 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
 {
 double position = 0;
 TimeSpan timespan = TimeSpan.Parse(value.ToString());
 position = timespan.TotalSeconds;
 return position;
 }
 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
 {
 return TimeSpan.FromSeconds((double)value);
 }
 }

Now access this class by defining in the XAML as 

xmlns:app="clr-namespace:playcheck"

<Grid.Resources>

            <app:PositionConverterClass x:Key="PositionConverterKey" />

</Grid.Resources>

Now, include our converter to our slider bar by adding this attribute in our slider tag

 Converter={StaticResource PositionConverterKey}

And finally create binding between position and the value of the slider as given below

Value="{Binding ElementName=myMedia, Path=Position, Mode=TwoWay}"

The Red one is controlling volume of the media and the blue one is controlling the position of the song and you may be used this to play song from your desired position.

This Post is written by Mic Lahore Intern Tallha Sarwar, from Comsats Lahore.

Comments

• Anonymous
  August 28, 2013
  that's great man

• Anonymous
  August 28, 2013
  it converted value is in Seconds ?

• Anonymous
  August 29, 2013
  Yes shaun, it returns in second

• Anonymous
  March 24, 2014
  it does not work , can you provide the source code please

• Anonymous
  April 13, 2014
  @Ahmed it does, follow all setup again .

• Anonymous
  September 25, 2015
  Wow that resolved all my problems

• Anonymous
  December 01, 2015
  Where do you put the Converter at?