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 .
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkamiStaženo 575x (366.21 kB)