Kezdőoldal > Kategorizálatlan > Media Player – WPF Tutorial (+ Video)

Media Player – WPF Tutorial (+ Video)

2010. január 2. szombat Hozzászólás Go to comments

Forrás fájl innen tölthető le.
Mint az előző technikai bevezetőben is említettem, a WPF a multimédia területén rengeteg újdonságot hozott a fejlesztőknek. Immár egyszerűen tudunk multimédiás tartalmakat integrálni alkalmazásainkba.
A következő tutorialban egy WPF alapú médialejátszót fogunk készíteni, amellyel kedvenc filmjeinket, zenéinket le tudjuk játszani.
A program elkészítését megnézhetitek az alábbi videóban is.

http://silverlight.services.live.com/invoke/64427/WPFVideoPlayer/iframe.html

Első lépésként nyissuk meg a feladathoz mellékelt solutiont Visual Studio 2008 segítségével. Ebben a solutionben az alap dolgok előre el vannak készítve, hogy ezzel se teljen az idő, és csak a lényegre koncentráljunk. Hogy véletlenül se írjunk rossz helyre kódokat, ezért minden általunk írt kódsor előtt van egy megjegyzés, amely mutatja, hogy hova kell az aktuális kódsort írnunk.
Nyissuk meg a Window1.xaml fájlt, és a XAML fájlba írjuk be az alábbi kódsort.  (Task 1)

<MediaElement Margin=”12,12,12,110” Name=”mediaElement1” MediaOpened="mediaPlayerMain_MediaOpened" Stretch="Fill" Volume="{Binding ElementName=sliderVolume, Path=Value}" Balance="{Binding ElementName=sliderBalance, Path=Value}" />

Ezzel a kódsorral, hozzá adunk egy MediaElementet az alkalmazásunkhoz. Meghatározzuk a margók segítségével a MediaElement pozícióját, a Volumenál meg a Balancenál egy egyszerű kötést készítünk a sliderVolume illetve a sliderBalance kontrolokhoz. Ekkor, ugyanis ha változtatjuk ezen sliderek értékét (mozgatjuk) akkor automatikusan a MediaElement hangerő vagy balance értéke is változni fog. Ha a fentebbi kódsort beírtuk már fordíthatjuk és el is indíthatjuk az alkalmazásunkat. Igaz még nincs funkcionalitásai a UI elemeknek.

Bindingról részletesebb információt itt találhattok:
http://msdn.microsoft.com/en-us/magazine/cc163299.aspx

Nézzük át a XAML többi részét is. Láthatjuk, hogy jó néhány elem, köztük a vezérlő kontrolok előre el vannak készítve.

Most miután hozzáadtuk a MediaElement kontrolt az alkalmazásunkhoz, már csak meg kell hívnunk a megfelelő metódusait, és lejátszani az adott média tartalmat. Bár a MediaElementnek van Play, Pause és Stop metódusa, amellyel könnyen lejátszhatjuk a média tartalmak, most mégse ezeket fogjuk használni, méghozzá azért mert, az alkalmazást előre felkészítettem arra, hogy a média tartalmakba bele tudjunk tekerni. Ehhez pedig a MediaTimeLine és a MediaClock osztályok lesznek segítségünkre. Így a triviális megoldáson felül erre lesz most szükségünk.
Nyissuk meg és nézzük át a Window1.xaml.cs fájlt. Látható, hogy néhány adattag előre deklarálva van, illetve vannak még üres törzsük események és vannak olyan események is amelyeknek a törzsük ki van töltve. (De ezek nagy részér még nem vagyunk feliratkozva)
Navigálunk el a btnPlay_Click eseményhez, majd adjuk hozzá az alábbi kódsor az eseményhez. (Task 2)

if (IsStopped)
{
    myClock.Controller.Begin();
    IsStopped = false;
}
else
{
    myClock.Controller.Resume();
}

Itt rögtön egy ellenőrzéssel kezdünk. Megvizsgáljuk, hogy ha le volt állítva a film akkor a Begin metódussal elejéről kezdjük a filmet, máskülönben folytatjuk.
Ezt követően navigáljunk el btnPause_Click eseményhez, és addjuk hozzá az alábbi kódsort. (Task 3)

myClock.Controller.Pause();

A kód gondolom magáért beszél. Egyszerűen szüneteltetjük a média tartalom lejátszását. Most már csak a Stop maradt hátra, így navigáljunk a btnStop_Click eseményhez. Itt kiadjuk a Stop metódust, illetve az IsStoped adattagot true-ra állítjuk. (Ez a fentebb megismert Play esemény miatt szükséges) (Task 4)

myClock.Controller.Stop();
IsStopped = true;

Most, hogy már minden fontosabb eseménnyel készen vagyunk, nem maradt más hátra, mint a megnyitás. Navigáljunk a btnOpen_Click eseményhez és adjuk hozzá az alábbi kódsorokat. (Task 5)

System.Windows.Forms.OpenFileDialog openFile = new System.Windows.Forms.OpenFileDialog();
openFile.CheckFileExists = true;
openFile.FileName = String.Empty;
openFile.Filter = "WMV files| *.wmv";
openFile.Title = "Windows 7 Ready – Video Player";
if (openFile.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
    myTimeline = new MediaTimeline();
    myTimeline.Source = new Uri(openFile.FileName, UriKind.Relative); 
    myClock = myTimeline.CreateClock();
    myClock.CurrentTimeInvalidated += new EventHandler(myClock_CurrentTimeInvalidated);
    myClock.Completed += new EventHandler(myClock_Completed);
    mediaElement1.Clock = myClock;
    IsStopped = false;
    EnableControl(true);
}

Figyeljük meg, hogy a fájl megnyitásához OpenFileDialog osztályt használunk, ami klasszikus Windows Formsos világból maradt ránk. (Emiatt hozzá kellet adni a System.Windows.Forms névteret a referenciákhoz). Példányosítjuk az OpenFileDialogot, beállítjuk a megfelelő tulajdonságait, hogy jól működjön, azután következik az érdemi munka. Példányosítjuk a MediaTimeline osztályt, és a Source tulajdonsághoz megadjuk  a fájlt, amit megakarunk nyitni. A MediaTimelinenak van egy CreateClock metódusa, amivel egy MediaClock objektumot hoz létre. Ezt követően már csak a MediaClock CurrentTimeInvalidate és Complated eseményére iratkozunk fel. (Az események és azok törzsei előre el vannak készítve.)
Ha mindennel megvagyunk, fordítsuk le az alkalmazást, majd indítsuk el. Kb. az kép fogad minket.
Nyissunk meg egy videót, játsszuk le, tekerünk bele és használjuk ki a lehetőségeit. Azt láthatjuk, hogy nagyjából jól működik az alkalmazás, de elég puritán a kinézete. Ezt orvosolnunk kell. Ma már nem elfogadható, hogy alkalmazás csúnya legyen ezért a holnapi nap kicsit a dizájn oldalát fogjuk megismerni.

Advertisements
Kategóriák:Kategorizálatlan
  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: