Lekce 18 - Audio/Video přehrávač v C# a WPF - Základ

V minulé lekci, Zdroje (Resources) v C# .NET WPF, jsme se věnovali resources.

Jedním ze zajímavých ovládacích prvků WPF je <MediaElement>, který slouží k přehrávání audio a video souborů. V dnešním C# .NET WPF si postupně popíšeme tvorbu jednoduchého přehrávače.

Funkce

Nejdříve bychom si měli ujasnit, jaké funkcionality od přehrávače budeme chtít. A abychom se v tom hned "neutopili", budeme postupovat od jednoduchého ke složitějšímu. Hotový projekt bude opravdu plnohodnotný přehrávač videa i hudby, kde si procvičíme mimo jiné i stylování ovládacích prvků:

Aplikace bude podporovat např. i playlisty a další vychytávky:

Řekněme, že bychom prozatím chtěli tyto funkcionality:

• Vybrat a otevřít soubor
• Spustit přehrávání
• Pozastavit přehrávání
• Ukončit přehrávání

To by pro začátek mohlo stačit. Později si můžeme přidat další, např. ovládání hlasitosti, posun videa apod. A abychom se nezdržovali nějakým povídáním, pustíme se hned do tvorby a založíme si ve Visual Studiu nový WPF projekt pod názvem AVPrehravac.

Rozložení prvků

Zobrazí se nám okno MainWindow.xaml s návrhem formuláře, do kterého vložíme <MediaElement /> a specifikujeme velikost okna:

<Window x:Class="AVPrehravac.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AVPrehravac"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <MediaElement/>
    </Grid>
</Window>

A máme v podstatě hotovo Jenže, když spustíme aplikaci, tak vidíme, že nevidíme nic. Zapomněli jsme totiž ještě říci <MediaElement>u, co chceme přehrát. To se zajistí vlastností Source, kde zadáme cestu k souboru.

V tuto chvíli by se sice soubor přehrál, ale záhy bychom zjistili, že je přehrávač jak "kafemlejnek" a že přehrává pořád to samé. Přidáme si tedy do formuláře rovnou i tlačítko, kterým si budeme vybírat požadovaný soubor a zároveň tlačítko pro ukončení aplikace. A aby se nám tam ovládací prvky neválely jak seno, použijeme kontejner <Grid>, pomocí kterého si je rozmístíme:

<Window x:Name="wdwPrehravac" x:Class="AVPrehravac.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AVPrehravac"
        mc:Ignorable="d"
        Title="MainWindow" Height="470" Width="700">

    <Grid Margin="0,20,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>

        <MediaElement x:Name="avPrehravac"/>

        <Grid Grid.Row="2" Margin="20,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="80"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" Content="Otevřít"
                    Click="BtnOtevri" ToolTip="Výběr videa"/>

            <Button Grid.Column="5" Content="Konec"
                    Click="ZavriOkno"
                    ToolTip="Ukončení aplikace"/>
        </Grid>
    </Grid>
</Window>

Kromě zmíněných dvou tlačítek jsme přidali také k definici okna jeho jméno, abychom jej mohli pomocí tlačítka zavřít. Rovněž jsme pojmenovali <MediaElement>, aby jej bylo možné naplnit vybraným souborem. Všimněte si, že tlačítka mají připravené i obslužné metody, pojďme je přidat.

Code Behind

Přesuneme se do souboru MainWindow.xaml.cs, kam přidáme metodu pro tlačítko otevírající multimediální soubor:

private void BtnOtevri(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    openFileDialog.Filter = "Video soubory
           (*.mpg;*.mpeg;*.avi;*.mp4)|*.mpg;*.mpeg;*.avi;*.mp4";
    if (openFileDialog.ShowDialog() == true)
    {
        avPrehravac.Source = new Uri(openFileDialog.FileName);
    }
}

Nezapomeňte si přidat příslušný using pro dialog:

using Microsoft.Win32;

Metoda otevře dialogové okno pro výběr souboru a po výběru jej přiřadí k <MediaElement>u pomocí jeho vlastnosti Source. Zde jsme výběr pro začátek pomocí filtru omezili pouze na video soubory. Jakmile se provede přiřazení, začne <MediaElement> daný soubor přehrávat.

Druhá metoda bude obsluhovat zavírací tlačítko:

private void ZavriOkno(object sender, RoutedEventArgs e)
{
    wdwPrehravac.Close();
}

Ukončení aplikace se provádí tím, že jí řekneme, ať zavře hlavní okno (viz pojmenování okna wdwPrehravac).

Ovládací tlačítka

Na začátku jsme si ale stanovili, že bychom chtěli mít možnost video i pozastavit a kdykoliv spustit znovu. Přidáme si proto do aplikace další tlačítka a to pro spuštění videa, pro pozastavení videa a pro ukončení přehrávání.

XAML

Tlačítka opět umístíme do naší Grid:

<Grid Grid.Row="2" Margin="20,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="80"/>
    </Grid.ColumnDefinitions>

    <Button x:Name="btnOtevri" Grid.Column="0" Content="Otevřít"
            Click="BtnOtevri" ToolTip="Výběr videa"/>

    <Button x:Name="btnHraj" Grid.Column="1" Content="Hraj"
            Click="BtnPrehraj"
            ToolTip="Přehrát video"/>

    <Button x:Name="btnPauza" Grid.Column="2" Content="Pauza"
            Click="BtnPauza"
            ToolTip="Pozastavit video"/>

    <Button x:Name="btnZavri" Grid.Column="3" Content="Zavřít"
            Click="BtnZavri"
            ToolTip="Zavřít video"/>

    <Button Grid.Column="5" Content="Konec"
            Click="ZavriOkno"
            ToolTip="Ukončení aplikace"/>
 </Grid>

Do kontejneru jsme přidali další 3 sloupce a umístili do nich požadovaná tlačítka. Zároveň ještě upravíme i <MediaElement>:

<MediaElement x:Name="avPrehravac" LoadedBehavior="Manual"/>

Změnili jsem předdefinovanou vlastnost LoadedBehavior z hodnoty Play na Manual. To proto, abychom mohli přehrávač ovládat ručně.

Code Behind

Soubor s obslužným kódem rozšíříme o příslušné metody:

private void BtnPrehraj(object sender, RoutedEventArgs e)
{
    avPrehravac.Play();
}

private void BtnPauza(object sender, RoutedEventArgs e)
{
    avPrehravac.Pause();
}

private void BtnZavri(object sender, RoutedEventArgs e)
{
    avPrehravac.Close();
}

Základ máme v podstatě hotový.

Příště, v lekci Audio/Video přehrávač v C# a WPF - Úprava kódu, si vylepšíme kód přehrávače a v té další zapracujeme na jeho vzhledu .