Tokom ovog kursa izgradićemo MusicPlayer. MusicPlayer je odličan način da kreiramo zanimljiv korisnički interfejs i primenimo neke od WPF koncepata. Obuhvatićemo kontrole, layout, databinding, sve ono što nam je potrebno za početak.

Da biste kreirali WPF aplikaciju, neophodno je da imate instalirano sledeće na vašem računaru:

  • Kao prvo, potrebno je da imate WPF kao sastavni deo .NET Framework-a najmanje verziju 3.0. WPF nije sastavni deo ranijih verzija .NET Framework-a. Ako imate instaliran Windows Vista operativni sistem, onda je .NET 3.0 već instaliran na vašem računaru, u supotnom, možete ga preuzeti od Microsofta.
  • Sledeća stvar koja će vam biti potrebna je Visual Studio. Ukoliko imate Visual Studio verziju 2005 ili koristite besplatan C#Express, neophodno je da instalirate VisualStudio Extensions za .NET Framework 3.0 koji će vam obezbediti template-e koje ćemo koristiti tokom ovog kursa. Ukoliko koristite Visual Studio 2008 ovi templejti i projektni fajlovi su već instalirani.
  • Takođe, koristićemo i dodatne alate kao što su XamlPad koji je sastavni deo .NET Framework 3.0 SDK, kao i Microsoft Expression Blend.

Prvo ćemo keirati novi projekat u okviru Visual Studija odabiom opcije File>NewProject. Proverite da li vam je u levoj koloni "ProjectTypes" selektovano Visual C# i da li vam je selektovano .NET Framework 3.0 ili 3.5. Ukoliko iz nekog razloga ne vidite .NET Framework 3.0 ili ne vidite Template-e, to je verovatno zato što niste instalirali VisualStudio Extensions za .NET Framework 3.0.

Prvi templejt koji ćemo prokomentarisati je „Windows Application". Ovaj projekat će kreirati standardnu windows aplikaciju tipa .exe. Ovakav tip aplikacije se izvršava sa „full trust", što znači da  svemu što korisnik može da pristupi, može i aplikacija - file sistemu ili internetu.

Sledeća opcija je „WPF browser application". Ovo je vrsta aplikacije koja je dizajnirana da se izvršava u web browseru. Uobičajeno se nazivaju XBAP aplikacije prema tipu file-a koji se kreira (tip je .xbap što je skraćenica od XAML Browser application). Zamislite običnu .NET exe aplikaciju koja se izvršava u browseru. Aplikacija ima pristup browser komandama kao što su forward i backward button ili adressbar. Za razliku od windows application, ove aplikacije se izvršavaju sa "partial trust" u okviru sandbox-a, što znači da sve što se izvršava u okviru browsera se smatra bezbednim sa stanovišta korisnika. Za naš MusicPlayer koristićemo windows application template jer hoćemo da kreiramo običnu windows aplikaciju.

Postavićemo ime: MusicPlayer, zatim ćemo postaviti lokaciju na kojoj ćemo kreirati MusicPlayer. I naziv Solutiona ćemo ostaviti po defaultu isto kao i ime projekta. Možemo da pokrenemo novokreirani projekat izborom opcije menija Debug>StartDebugging ili ubuduće, samo pritiskom na dugme F5. Iako vidimo samo prazan prozor to je prava funkcionalna wpf aplikacija. Pogledajmo strukturu projekta koju je VS kreirao.

SolutionExplorer može da sadrži više projekata. U našem Solutionu imamo samo jedan projekat. Pogledajmo šta se nalazi u okviru našeg projekta. Krenućemo od referenci.

Ako otvorimo References videćemo dosta referenci. Reference nam služe kada želimo da koristimo externi kod ili eksterne biblioteke, odnosno dll-ove u okviru našeg projekta. Sve reference koje vidimo ovde su standardne za WPF aplikacije, odnosno dosta njih su standardni .NET sklopovi, a neki od njih su specifični za WPF. Prvi od njih je PresentationCore. PresentationCore sadrži core WPF servise i biblioteke kao što su media, oblici i slično.

Sledeći je PresentationFramework. PresentationFramework sadrži koncepte višeg nivoa kao što su kontrole, layout i databinding koje koristimo kada keiramo aplikaciju, ondnosno korisnički interfejs.

I poslednji je WindowsBase koji sadrži base klase i servise koje nudi WPF. Ove reference su dodate pri kreiranju projekta na osnovu templejta koji smo izabrali. Sledeća dva fajla koje vidimo su .xaml fajlovi. Primetićete da imaju extenziju .xaml. Kao što smo napomenuli, xaml je skraćenica od Extensible Application Markup Language i u WPF-u se koristi za keiranje korisničkog interfejsa. Značajan deo ovog kursa odnosiće se na upoznavanje mogućnosti XAML-a. Primetićete da je fajl koji je trenutno otvoren - Window1.xaml. Svaki tag koji se kreira u xaml-u odgovara objektu. Tako da kada vidite tag kao što je tag Window elementa, to znaci da smo kreirali objekat tipa Window. Sledeća važna stvar je da svaki atribut koji smo postavili za jedan element odgovara propertiju tog objekta. Tako da u okviru Window elementa vidimo i neke propertije od kojih su interesantni Title, Height i Width. Kada je kreiran window element, postavljeni su vrednosti propertija Title na "MusicPlayer", Height na 300 piksela i Width takođe na 300 piksela.

Xmlns property koji je deklarisan na Window klasi je standardan xml atribut koji nam omogućava da navedemo namespace za tagove u dokumentu. Za sada smo deklarisali dva namespace-a: prvi je default namespace (ceo xmlns). Default namespace je namespace koji sadrži sve standardne WPF tagove koje ćemo koristiti kao što su npr. dugme, window ili grid, elipsa i sl. Kada postoji potreba da se koristi kod koji ne postoji u default namespacu, tada se deklariše dodatni namespace kao što je to xmlns:x namespace koji je ovde deklarisan. X namespace specificira specijalne xaml atribute. Primer upotrebe atributa iz x namespace je atribut Class koji je naveden u window elementu. Pogledajte šta će desiti ako promenimo atribute na Window elementu: prvo promenimo Title u "WPF Music Player", takođe, promenimo vrednosti propertija Height="330" i Width="460". Ove vrednosti odgovaraju pikselima na standardnom 96 dpi monitoru.

Dodajmo sada još neke propertije na Window element. Ako počnemo da kucamo u tagu ili pritisnemo SPACE taster na tastaturi, prikazaće se lista mogućih atributa. Npr. hoćemo da postavimo atribut background. Kad pritisnemo ENTER, atribut će se postaviti automatski. Sada možemo da izaberemo vrednost iz liste ili sami da unesemo željenu vrednost. Npr. odaberimo boju "Gainsboro". Sledeći atribut koji ćemo postaviti je WindowStartupLocation koji će odrediti poziciju prozora kada se prvi put kreira. Izaberimo "CenterScreen" što će postaviti prozor na sredini ekrana kada pokrenemo aplikaciju. Sada možemo da pokenemo aplikaciju i vidimo efekat propertija koje smo malopre dodali kako utiču na prozor (F5). Vidite da je prozor malo veći i da ima interesantniju boju. Takođe ćete primetiti da se kreirao na sredini ekrana.

Obzirom da se XAML koristi za definisanje drveta objekata (slično Document Object modelu u xml-u), možemo reći da je Grid dete Window elementa a da je Window roditelj Grid-a. Dete element u Grid možemo dodati između početnog i krajnjeg taga ovako: <Button></Button>. Primetićete da je Visual Studio automatski zatvorio tag i pozicionirao kursor između početnog i kranjeg taga što značajno olakšava dodavanje elemenata. Sadržaj dugmeta unosimo upravo između početnog i krajnjeg taga (ukucati Play kao sadržaj dugmeta). Dodajmo takođe dugmetu visinu i širinu:

<Button Width="100" Height="25">Play</Button>

Sada možemo da pokrenemo aplikaciju da vidimo dugme koje smo upravo kreirali.

XAML se može koristiti i za kreiranje elemenata koji nisu isključivo vizuelni, tj. elemenata koji se ne pojavljuju na ekranu ili korisničkom interfejsu. Primer takvog elementa je MediaElement. MediaElement je element koji se koristi za emitovanje audio i video sadržaja. Za naš MusicPlayer koristićemo ga za zvuk. Možemo ga dodati kao dete u Grid.

<MediaElement Name="MojMediaElement"
Source="......MusicPlayermuzikaVaya Con Dios - The Best Of6 - Vaya Con Dios - Nah Neh Nah.mp3"/>

Iako nećete moći da vidite MediaElement kada se pokrene aplikacija, moći ćete da ga čujete.

Možda ste primetili da nismo kliknuli na Play dugme, već da se muzika čula čim smo pokrenuli aplikaciju. Da bismo na ovaj način kontrolisali puštanje muzike, postavićemo LoadedBihevior property MediaElementa na Manual.

LoadedBehavior="Manual"

Takođe, treba da povežemo Play dugme sa MediaElementom koji će nam omogućiti puštanje muzike. To znači da treba da kreiramo event heandler za click event na dugmetu. Event heandler je kod koji se izvršava kao reakcija ili odgovor na događaj. Sada ćemo kreirati event heandler za click event na dugmetu:

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MojMediaElement.Play();
        }

Sada možemo pokrenuti aplikaciju i videti efekat promena.

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Kreiranje Music Player aplikacije u Visual Studiu 2008 1
  • Kreiranje Music Player aplikacije u Visual Studiu 2008 2
  • Kreiranje Music Player aplikacije u Visual Studiu 2008 3
  • Kreiranje Music Player aplikacije u Visual Studiu 2008 4
  • Kreiranje Music Player aplikacije u Visual Studiu 2008 5
  • Kreiranje Music Player aplikacije u Visual Studiu 2008 6