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:

Expression BlendBal 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.

TervrajzLegegyszerű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.

0 megjegyzés :

Megjegyzés küldése