WPF multimédia lejátszó készítése C#-ban 3

Kicsit megkésve, de itt van a folytatás. Újra gondoltam az egész programot és szélesítettem ez idő alatt az ismereteimet. Arra a következtetésre jutottam, hogy a program vázát módosítani kell, mivel méretezés közben eltűnnek/tűnhetnek bizonyos dolgok. Mivel a váz, az alap nem volt megfelelő, ezért a nulláról fogjuk újra elkezdeni. A gyors előrehaladás érdekében nem fogok mindent alaposan elmagyarázni. Aki éppen most kapcsolódott be vagy lemaradt volna valamiről az az előző bejegyzésekben olvashat a program eddigi szakaszairól.
Szokás szerint Visual Studioban készítsük egy új Wpf projectet. Majd indítsuk el az Expression Blendet (ha még nem szerezted be itt írtam róla) és nyissuk meg benne a projectet.

Néhány szó az Expression Blendről:

Bal oldalt található az eszköztár ahonnan behúzhatjuk a különböző objektumokat (panelek, gombok, csúszkák stb.). Közvetlenül mellette van a Solution Explorerre emlékeztető Projects fül, ami ugyanazt is tudja. Fontosabb ennél az itt található Triggers, ahol különböző eseményekhez köthettünk animációkat, Storyboardokat. Alatta van az Objects and Timeline, ami a program vizuálisfáját tartalmazza. A Storyboard szerkesztésnél kinyílik belőle egy a Flashben megszokotthoz hasonló idővonal. Jobb oldalt állíthatjuk be az objektum tulajdonságait, adatkötéseit, erőforrásait. Ennyi is volt nagyjából a bemutatása.

Mielőtt elkezdenénk mindenfélét pakolgatni az ablakunkra a legjobb, ha készítünk egy tervrajzot, hogy mit is akarunk majd. Ezt én is elkészítettem Paintben, és mellé csatoltam a vizuálisfát is.

Legegyszerűbben úgy tudunk alkotórészeket elhelyezni, ha kétszer rájuk kattintunk az eszköztáron. A Gridet nevezzük át  LayoutRootra. Ezen belülre tegyünk egy DockPanelt (azért kell, hogy egyben tartsa a többi elemet, mikor az ablakot átméretezzük). Ezen belülre két Gridet (neveik: Buttons és Player). A Playerbe helyezzünk egy Bordert (ez egy keret lesz a videó körül) és egy MediaElementet (legyen a neve Media). A Buttonsba egy újabb Grid(név: ButtonLayout) kerül.Ebbe rakjunk 3 Buttont (btnPause, btnPlay, btnBrowse), 3 Slidert (slidVolume, slidPostion, slidBalance) és 4 darab Labelt (lbBalance, lbVolume, lbPostion, lbDuration). Ha ezzel kész vagyunk akkor már meg van minden elemünk, de ezek egymás tetején vannak. Állítsuk be a tulajdonságokat, hogy el legyenek rendezve.

Először is növeljük meg az ablakméretét. A DockPanel HorizontalAligmentjét Stretchre, Margintját nullára, Lastchild tulajdonságát true-ra állítsuk, és a Widthjére nyomjunk egy Resetet. A Buttons Dock értéke legyen Bottom, Widthje szintén, mint az előbb legyen Reset, Height 85. Buttonlayoutot válasszuk ketté a megjelenő vízszintes narancssárga vonallal és tegyük ezt meg függőlegesen is, hogy öt oszlop legyen – később majd finomítsunk rajtuk.

A Column és a Row tulajdonságok megadásával a tervrajz szerint helyezzük el a további elemeket. A gombok Marginja legyen tíz. A többi tulajdonsághoz itt egy táblázat:

Elem	Row	Column	RowSpan	ColumnSpan	VerticalAlign	HorizontalAlign
btnPause	1	1	1	1	Strecth	Strecth
btnPlay	1	2	1	1	Strecth	Strecth
btnBrowse	1	1	1	1	Strecth	Strecth
slidVolume	1	0	1	1	Center	Strecth
slidBalance	1	4	1	1	Center	Strecth
slidPosition	0	1	1	3	Center	Strecth
lbBalance	1	4	1	1	Bottom	Center
lbVolume	1	0	1	1	Bottom	Center
lbPosition	0	0	1	1	Bottom	Center
lbDuration	0	4	1	1	Bottom	Center

Menjünk a Playerbe és állítsuk be a Border Cornerradiusát tízre (ettől lesz lekerekített), Marginját hétre és a Backgroundját Blackre. Állítgassuk tovább kedvünk és szívünk szerint a színeket, betűtípusokat, átmeneteket.

Most pedig következzen egy fontos dolog az adatkötés, ami Blenddel még egyszerűbb. Keressük meg a Media Volume tulajdonságát és a mellette lévő kisnégyzetre kattintva válasszuk az adatkötést. Az Element Property fülön jelöljük ki a baloldali listából a slidVolume vezérlőt, majd a jobboldaliból a  Value tulajdonságát. Ezt tegyük meg a Balance tulajdonságra is a slidBalance vezérlővel való adatkötéssel.

Ez volt nagyjából a design része. Legközelebb ott folytatjuk, ahol abbahagytuk.