Kao dio našeg Windows Phone udžbenika serija, sada ćemo naučiti stvoriti UI elemente za HelloPhone primjena. Aplikacija je vrlo jednostavna. Kada završite, korisničko sučelje aplikacije sadrži opis, tekstualni okvir i gumb.
Da biste koristili program, u tekstni okvir unosite neki tekst, a kada kliknete na gumb, aplikacija će prikazati natpis s tekstom koji ste upisali. Izgledat će nešto slično sljedećoj slici.
1. U Solution Explorer, dvostruki klik MainPage.xaml za otvaranje ove datoteke u dizajneru.
Dizajner nudi dva odvojena prikaza za uređivanje XAML datoteka, Dizajn i XAML pogled. U načinu Dizajn, imate dizajn emulatora gdje možete povući i ispustiti kontrole iz alata, kao i odabrati, promijeniti veličinu, premjestiti i postaviti svojstva postojećih kontrola. U XAML modu imate uređivač oznaka koji vam omogućuje uređivanje XAML koda na stranici. Možete raditi s bilo kojim od načina rada. Također imate način podijeljen, a prozor urednika istovremeno prikazuje oba prikaza.
2. U ovom zadatku uglavnom se fokusiramo na ručno editiranje XAML-a. Jednom kada se vrši kôd, možete se vratiti na prikaz dizajna kako biste vidjeli rezultate. Možete pogledati XAML na cijelom zaslonu.
3. U oznaci XAML koje generira zadani predložak aplikacije sustava Windows Phone, pronađite rešetka element spremnika s imenom LayoutRoot, Njegova je svrha organizirati elemente na stranici. Unutar svoje RowDefinition unesite dodatni redak između dva postojeća retka i postavite njegovu vrijednost Visina imovina na Auto, Ovaj će red uskoro uključiti tekstualni okvir i gumb.
4. Korijen rešetka element također sadrži neke ugniježđene elemente s svakim dodijeljenim različitim redom vanjske rešetke definiranjem a Grid.Row nekretnine. Sada pronađite Grid element nazvan TitleGrid i Postavite tekstni element prvog elementa tekstualnog bloka unutar unutarnje rešetke na " Windows Phone 7 Series ". slično Pozdrav telefon dodaje se u sljedeći blok teksta.
5. Sada pronađite rešetka element nazvan ContentGrid, dodijeliti ga redom 1, što je u početku obično prazno, i zalijepite sljedeću XAML oznaku unutar ovog elementa.
6. Da biste dovršili oblik stranice, dodajte treći redak koji će sadržavati banner s porukom koju je korisnik unio. Da biste izradili ovaj redak, umetnite sljedeću XAML oznaku neposredno ispred završne oznake vanjske rešetke.
7. Pritisnite gumb Dizajn pregled i pregled izgleda kontrola na stranici.
U našem sljedećem udžbeniku saznat ćemo kako "Upravljanje događajima s korisničkog sučelja".