18. diel - Audio / Video prehrávač v C # a WPF - Základ

V minulej lekcii, Zdroje (Resources) v C # .NET WPF , sme sa venovali resources. Jedným zo zaujímavých ovládacích prvkov WPF je <MediaElement>, ktorý slúži na prehrávanie audio a video súborov. V dnešnom C# .NET WPF si postupne popíšeme tvorbu jednoduchého prehrávača.

Funkcie

Najskôr by sme si mali ujasniť, aké funkcionality od prehrávača budeme chcieť. A aby sme sa v tom hneď "neutopili", budeme postupovať od jednoduchého k zložitejšiemu. Hotový projekt bude naozaj plnohodnotný prehrávač videa i hudby, kde si precvičíme okrem iného aj štýlovanie ovládacích prvkov:

Aplikácia bude podporovať napr. Aj playlisty a ďalšie vychytávky:

Povedzme, že by sme zatiaľ chceli tieto funkcionality:

• Vybrať a otvoriť súbor
• spustiť prehrávanie
• pozastaviť prehrávanie
• ukončiť prehrávanie

To by pre začiatok mohlo stačiť. Neskôr si môžeme pridať ďalšie, napr. Ovládanie hlasitosti, posun videa a pod. A aby sme sa nezdržovali nejakým rozprávaním, pustíme sa hneď do tvorby a založíme si vo Visual Studiu nový WPF projekt pod názvom AVPrehravac.

Rozloženie prvkov

Zobrazí sa nám okno MainWindow.xaml s návrhom formulára, do ktorého vložíme <MediaElement /> a špecifikujeme veľkosť 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 podstate hotovo Lenže, keď spustíme aplikáciu, tak vidíme, že nevidíme nič. Zabudli sme totiž ešte povedať <MediaElement>u, čo chceme prehrať. To sa zaistí vlastností Source, kde zadáme cestu k súboru.

V tejto chvíli by sa síce súbor prehral, ale čoskoro by sme zistili, že je prehrávač ako "kafemlejnek" a že prehráva stále to isté. Pridáme si teda do formulára rovno aj tlačidlo, ktorým si budeme vyberať požadovaný súbor a zároveň tlačidlo pre ukončenie aplikácie. A aby sa nám tam ovládacie prvky neválely ako seno, použijeme kontajner <Grid>, pomocou ktorého si ich rozmiestnime:

<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>

Okrem spomínaných dvoch tlačidiel sme pridali tiež k definícii okna jeho meno, aby sme ho mohli pomocou tlačidla zavrieť. Taktiež sme pomenovali <MediaElement>, aby ho bolo možné naplniť vybraným súborom. Všimnite si, že tlačidlá majú pripravené aj obslužné metódy, poďme ich pridať.

Code Behind

Presunieme sa do súboru MainWindow.xaml.cs, kam pridáme metódu pre tlačidlo otvárajúca multimediálny súbor:

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);
    }
}

Nezabudnite si pridať príslušný using.

Metóda otvorí dialógové okno pre výber súboru a po výbere ho priradí k <MediaElement> u pomocou jeho vlastnosti Source. Tu sme výber pre začiatok pomocou filtra obmedzili len na video súbory. Akonáhle sa vykoná priradenie, začne <MediaElement> daný súbor prehrávať.

Druhá metóda bude obsluhovať zatváracie tlačidlo:

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

Ukončenie aplikácie sa vykonáva tým, že jej povieme, ktoré okno (pozri pomenovanie okna) má zatvoriť (wdwPrehravac).

Ovládacie tlačidlá

Na začiatku sme si však stanovili, že by sme chceli mať možnosť video aj pozastaviť a kedykoľvek spustiť znova. Pridáme si preto do aplikácie ďalšie tlačidlá a to pre spustenie videa, pre pozastavenie videa a pre ukončenie prehrávania.

XAML

Tlačidlá opäť umiestnime do našej 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 kontajnera sme pridali ďalšie 3 stĺpce a umiestnili do nich požadovaná tlačidla. Zároveň ešte upravíme aj <MediaElement>:

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

Zmenili som preddefinovanú vlastnosť LoadedBehavior z hodnoty Play na Manual. To preto, aby sme mohli prehrávač ovládať ručne.

Code Behind

Súbor s obslužným kódom rozšírime o príslušnej metódy:

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 podstate hotový. Nabudúce, v lekcii Audio / Video prehrávač v C # a WPF - Úprava kódu , si vylepšíme kód prehrávače a v tej ďalšej zapracujeme na jeho vzhľade