WPF: Un pulsante con video all'interno

L'esperimento di oggi con Windows Presentation Foundation riprende quello di qualche giorno fa, in cui avevamo inserito un'immagine statica inclinata e contornata da un bordo in un pulsante.

Oggi riprendiamo lo stesso pulsante, ma faremo in modo che, quando l'utente fa click, venga avviata la riproduzione di un video all'interno della stessa cornice utilizzata la volta scorsa.

Quindi, apriamo Visual Studio 2005 e creiamo un progetto WPF (Visual Basic o C#, come preferite). All'interno dell'editor di codice XAML, digitiamo quanto segue (eliminando il contenitore Grid, io preferisco usare lo StackPanel per uniformità coi tutorial che trovo):

    <StackPanel>
      <Button Margin="46,75,47,81" Name="Button1" Click="PlayVideo">
        <Border BorderThickness="5" Height="70" Width="120" BorderBrush="Salmon" HorizontalAlignment="Center" VerticalAlignment="Center">
          <Border.LayoutTransform>
            <RotateTransform Angle="15" />
          </Border.LayoutTransform>
          <MediaElement Name="Video1" LoadedBehavior="Manual"> </MediaElement>
        </Border>
      </Button>
    </StackPanel>

Come potete osservare, al posto dell'immagine abbiamo aggiunto un controllo MediaElement che consente di riprodurre video, senza ricorrere a componenti esterni. Bello no? :-) La proprietà LoadedBehavior impostata su Manual sta a significare che decidermo noi quando avviare la riproduzione del video tramite codice, altrimenti la riproduzione partirebbe in automatico (se è stato specificato il video da riprodurre tramite la proprietà Source).

In secondo luogo, per il controllo Button abbiamo specificato un evento Click. In questo modo, quando l'utente clicca sul pulsante, verrà richiamato il gestore degli eventi chiamato PlayVideo, che sarà implementato da codice.

Ora si passa a modificare il file di code behind, quello, per intenderci, chiamato Window1.xaml.vb o Window1.xaml.cs (se al progetto non avete assegnato un altro nome).

Il codice da inserire è il seguente:

VB:

    Private Sub PlayVideo(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Video1.Source = New Uri("MyVideo.wmv")
        Video1.Play()
    End Sub

C#:

        private void PlayVideo(object sender, RoutedEventArgs e)
        {
        Video1.Source = new Uri("MyVideo.wmv");
        Video1.Play();
        }

Ovviamente, dovrete sostituire il video con il percorso di un file valido. Notate che la proprietà Source del controllo MediaElement accetta un valore di tipo Uri e non una stringa. Perfetto. Avviate l'applicazione e cliccate sul pulsante. Magia! Il video viene avviato all'interno del riquadro! ;-)