Show Video Play Progress using Media Element Windows 8.1 Universal app

Question

i want to show Progress of Video while it is playing but i dont get any event on media element where i will get play progress of video like download progress and buffer progress. Is there any other way to achieve it? or some other tool or something?

<MediaElement x:Name="player" AutoPlay="True"
              MediaEnded="player_MediaEnded" Stretch="Uniform"                    
              DownloadProgressChanged="player_DownloadProgressChanged"
              BufferingProgressChanged="player_BufferingProgressChanged" 
              CurrentStateChanged="player_CurrentStateChanged"/>

<FlyoutPresenter ScrollViewer.VerticalScrollMode="Disabled"
                 ScrollViewer.HorizontalScrollMode="Disabled" x:Name="playerControls"
                 Margin="0,0,0,0" Height="150" Background="Transparent" VerticalAlignment="Bottom">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock x:Name="songTitle" Grid.Row="0" Foreground="White" TextAlignment="Center"
                   Margin="10,0,10,5" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
       <ProgressBar Grid.Row="1" x:Name="progressBar" Background="White"
                    IsIndeterminate="True" Maximum="1" Height="2" 
                    VerticalAlignment="Bottom" Margin="10,0,10,20"/>

        <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

            <Button x:Name="backword" Style="{StaticResource ButtonStyle}" Click="backword_Click" Margin="0,0,0,0"  Foreground="Red"
                BorderThickness="0" Grid.Column="0" HorizontalAlignment="Right" Background="Transparent">
                <Image Stretch="None" Source="ms-appx:///Assets/backword.png"/>
            </Button>
            <Button x:Name="playPause" Style="{StaticResource ButtonStyle}" Click="playPause_Click" Margin="0,0,0,0"  Foreground="Red"
                BorderThickness="0" Grid.Column="1" HorizontalAlignment="Center" Background="Transparent">
                 <Image x:Name="playPauseButton" Stretch="None" Source="ms-appx:///Assets/Play.png"/>
            </Button>
            <Button x:Name="forward" Style="{StaticResource ButtonStyle}" Click="forward_Click" Margin="0,0,0,0" Foreground="Red"
                BorderThickness="0" Grid.Column="2" HorizontalAlignment="Left" Background="Transparent">
                 <Image Stretch="None" Source="ms-appx:///Assets/Forward.png"/>
            </Button>
        </Grid>
    </Grid>
</FlyoutPresenter>

<FlyoutPresenter ScrollViewer.VerticalScrollMode="Disabled" BorderThickness="0" 
                 ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                 ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch"
                 ScrollViewer.HorizontalScrollMode="Disabled" x:Name="topbarControls"
                 Margin="0,-30,0,0" Height="100" Background="Transparent" VerticalAlignment="Top">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

               <Button x:Name="back" Style="{StaticResource ButtonStyle}" Click="back_Click" Margin="0,0,0,0"  Foreground="Red"
                BorderThickness="0" Grid.Column="0" HorizontalAlignment="Left" Background="Transparent">
                 <Image  Stretch="None" Source="ms-appx:///Assets/Back.png"/>
            </Button>
            <Button x:Name="share" Style="{StaticResource ButtonStyle}" Click="share_Click" Margin="0,0,0,0" Foreground="Red"
                BorderThickness="0" Grid.Column="1" HorizontalAlignment="Right" Background="Transparent">
                 <Image Stretch="None" Source="ms-appx:///Assets/Share2.png"/>
             </Button>
    </Grid>
</FlyoutPresenter>

above i have given my xaml for refrence.

Answer 1

One simple solution is to do it by Binding. The very simple example can look like this:

First we will need converters to convert TimeSpan and Duration to double (as ProgressBas's values use this type):

public class TimeSpanToDouble : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    { return (value == null) ? 0 : ((TimeSpan)value).TotalSeconds; }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    { throw new NotImplementedException(); }
}

public class DurationToDouble : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    { return (value == null) ? 0 : ((Duration)value).TimeSpan.TotalSeconds; }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    { throw new NotImplementedException(); }
}

Once we have it, the rest is simple in xaml - just bind ProgressBar's values to MediaElement ones and start playing:

<!--Converters in resources-->
<Page.Resources>
    <local:TimeSpanToDouble x:Key="TimeSpanToDouble"/>
    <local:DurationToDouble x:Key="DurationToDouble"/>
</Page.Resources>

<!--MediaElement and progressbar-->
<MediaElement Name="myMedia" Width="200" Height="200" Grid.Row="2"/>
<ProgressBar HorizontalAlignment="Stretch" Grid.Row="3" Minimum="0"
             Value="{Binding ElementName=myMedia, Path=Position, Converter={StaticResource TimeSpanToDouble}}"
             Maximum="{Binding ElementName=myMedia, Path=NaturalDuration, Converter={StaticResource DurationToDouble}}"/>

Of course this will need some more improvements, but should help you to start.

Note also that you can use Slider instead of ProgressBar and define TwoWay Binding - in this case you will be able, not only to track the progress, but also to jump to specific position of your video.