Oggi vediamo come usare l'elemento MediaElement e ProgressBar di windows phone prendendo un pò di confidenza con il loro uso per realizzare un player video di base per le nostre applicazioni. Per prima cosa ho aperto un nuovo progetto e ho aggiunto gli elementi che mi servivano, due Grid, una contenente il mio MediaElement e l'altra contenente i miei controlli. Nella griglia contenente i controlli ho inserito un bottone play/pause, un bottone stop, la mia ProgressBar per la visualizzazione del tempo trascorso e i bottoni per aumentare/diminuire il volume.

Dopo aver creato tutti i controlli necessari ho iniziato ad attaccare ai vari bottoni gli Handler per farli funzionare e la logica per i controlli sullo stato del video. Nel codice ho inserito un DispatcherTimer che ogni 200 millisecondi va a controllare la posizione corrente del video ed aggiorna di conseguenza la ProgressBar, calcolando la percentuale di avanzamento, visto che i valori di default sono 0-100.

Il risultato è il seguente

Il codice (riportato qui sotto e allegato) è abbastanza auto-esplicativo per le domande lasciate pure un commento o contattatemi in privato

Pagina xaml:

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="Ollie10.it Media Player" x:Name="textBlockPageTitle" TextAlignment="Center" Style="{StaticResource PhoneTextPageTitle1Style}"/>
        </Grid>

        <!--ContentGrid is empty. Place new content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <MediaElement x:Name="MediaPlayer" VerticalAlignment="Top" HorizontalAlignment="Center" Width="476" Height="268" Source="bunny.wmv" AutoPlay="False" Margin="0,20,0,0" Volume="0.8"></MediaElement>
        </Grid>

        <Grid x:Name="ButtonsGrid" Grid.Row="1" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center" Height="70" Margin="0,260,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="70" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="150"/>
                <ColumnDefinition Width="250"/>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="70"/>
            </Grid.ColumnDefinitions>
            <Button Content="Play" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" Name="PlayButton" Width="140" Grid.Row="0" Grid.Column="0" Click="PlayButton_Click" />
            <Button Content="Stop" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" Name="StopButton" Width="140" Grid.Row="0" Grid.Column="1" Click="StopButton_Click" />
            <ProgressBar x:Name="ProgressPosition" Width="240" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="2"></ProgressBar>
            <Button Content="+" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" Name="VolumeUp" Width="60" Grid.Row="0" Grid.Column="3" Click="VolumeUp_Click" FontSize="15" />
            <Button Content="-" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" Name="VolumeDown" Width="60" Grid.Row="0" Grid.Column="4" Click="VolumeDown_Click" FontSize="15" />
        </Grid>
    </Grid>

Codice c#:

public partial class MainPage : PhoneApplicationPage
    {
        private double currentPostition, duration, progressPosition;
        private DispatcherTimer myDispatcherTimer = new DispatcherTimer();

        public MainPage()
        {
            InitializeComponent();

            SupportedOrientations = SupportedPageOrientation.Landscape;

            // INIZIALIZZO IL TIMER CHE OGNI 200 MILLISECONDI ANDRA' A CAMBIARE LA POSIZIONE DELLA MIA PROGRESS BAR
            myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 200); // 200 Millisecondi
            myDispatcherTimer.Tick += new EventHandler(Each_Tick);
            myDispatcherTimer.Start();

            // ATTACCO L'HANDLER CHE STOPPA IL FILMATO E RESETTA I BOTTONI QUANDO IL PLAYBACK E' FINITO
            MediaPlayer.MediaEnded += new RoutedEventHandler(MediaEnded);
        }

        // QUESTO E' IL MIO HANDLER CHE AGGIORNA LA POSIZIONE DELLA PROGRESS BAR OGNI VOLTA CHE VIENE RICHIAMATO DAL TIMER
        private void Each_Tick(object o, EventArgs sender)
        {
            if (MediaPlayer.CurrentState == MediaElementState.Playing)
            {
                currentPostition = MediaPlayer.Position.TotalMilliseconds;
                duration = MediaPlayer.NaturalDuration.TimeSpan.TotalMilliseconds;
                progressPosition = (currentPostition*100)/duration;

                ProgressPosition.Value = progressPosition;
            }
        }

        // QUESTO E' L'HANDLER CHE RIPORTA TUTTO ALLO STATO INIZIALE QUANDO IL PLAYBACK DEL FILMATO E' TERMINATO
        private void MediaEnded(object sender, RoutedEventArgs e)
        {
            MediaPlayer.Stop();
            MediaPlayer.Position = TimeSpan.FromSeconds(0);
            PlayButton.Content = "Play";
            ProgressPosition.Value = 0;
        }

        // FUNZIONE ASSOCIATA ALLA PRESSIONE DEL BOTTONE PLAY
        private void PlayButton_Click(object sender, RoutedEventArgs e)
        {
            if (MediaPlayer.CurrentState == MediaElementState.Playing)
            {
                MediaPlayer.Pause();
                PlayButton.Content = "Play";
                myDispatcherTimer.Stop();
            }
            else
            {
                MediaPlayer.Play();
                PlayButton.Content = "Pause";
                myDispatcherTimer.Start();
            }
        }

        // FUNZIONE ASSOCIATA ALLA PRESSIONE DEL BOTTONE STOP
        private void StopButton_Click(object sender, RoutedEventArgs e)
        {
            MediaPlayer.Stop();
            MediaPlayer.Position = TimeSpan.FromSeconds(0);
            PlayButton.Content = "Play";
            ProgressPosition.Value = 0;
        }

        // FUNZIONE ASSOCIATA ALLA PRESSIONE DEL BOTTONE VOLUME UP
        private void VolumeUp_Click(object sender, RoutedEventArgs e)
        {
            if (MediaPlayer.Volume <= 0.9)
                MediaPlayer.Volume = MediaPlayer.Volume + 0.1;
            else
                MediaPlayer.Volume = MediaPlayer.Volume + 1;
        }

        // FUNZIONE ASSOCIATA ALLA PRESSIONE DEL BOTTONE VOLUME DOWN
        private void VolumeDown_Click(object sender, RoutedEventArgs e)
        {
            if (MediaPlayer.Volume >= 0.1)
                MediaPlayer.Volume = MediaPlayer.Volume - 0.1;
            else
                MediaPlayer.Volume = MediaPlayer.Volume + 0;
        }
    }

I sorgenti sono disponibili per il download qui: Ollie10.Media.zip (5,77 mb)