Windows Phone Tutorial 8: Izrada prilagođenog gumba u izrazu Blend-I

Windows Phone Tutorial 8: Izrada prilagođenog gumba u izrazu Blend-I
Windows Phone Tutorial 8: Izrada prilagođenog gumba u izrazu Blend-I

Video: Windows Phone Tutorial 8: Izrada prilagođenog gumba u izrazu Blend-I

Video: Windows Phone Tutorial 8: Izrada prilagođenog gumba u izrazu Blend-I
Video: How to resolve the issue when you get Windows® Update error 80072efd on Windows® 7 - YouTube 2024, Ožujak
Anonim

Nakon što saznate kako stvoriti i implementirati aplikaciju u Silverlightovoj verziji CTP alata, kao dio ove serijskog vodiča za Windows Phone, prelazimo se na Blagu ekspresiju. Expression Blend je sustav za stvaranje profesionalnih dizajnera za izgradnju korisničkih iskustava koja ciljaju.NET 3.0 + platformu, a posebice WPF ili Windows Presentation Foundation.

Općenito, kontrole Silverlighta imaju zasebnu logiku od vizualnog izgleda pomoću predložaka. ControlTemplate određuje vizualnu strukturu i vizualno ponašanje kontrole. Možete prilagoditi izgled većine kontrola mijenjanjem njihovih zadanih postavki ControlTemplate postavke. To vam omogućuje promjenu izgleda kontrole bez promjene njegove funkcionalnosti. Na primjer, gumbe u aplikaciji možete učiniti kružnim, a ne zadanim kvadratnim oblikom, ali gumb će i dalje povećati Klik događaj.

U ovom udžbeniku otvarate projekt Visual Studio koji ste izradili u prethodnoj vježbi u izrazu Blend i zamijenite ga ControlTemplate tipke za promjenu izgleda i dojma. Zato što stvorite a ControlTemplate u XAML, možete promijeniti izgled kontrole bez pisanja bilo kojeg koda.

1. Otvorite Microsoft Visual Studio 2010 Express za Windows Phone
1. Otvorite Microsoft Visual Studio 2010 Express za Windows Phone

2. Ako ste izvršili korake u prethodnoj vježbi, možete nastaviti s rješenjem koje ste izradili za tu vježbu.

3. Otvorite trenutačno rješenje u kombinaciji s izrazom. Da biste to učinili iz Visual Studio, desnom tipkom miša kliknite MainPage.xaml u Solution Explorer, a zatim odaberite Open in Blend Expression. Ako ova opcija nije dostupna- najvjerojatniji je razlog da vaša trenutačna inačica Izrazi Blend ne podržava potrebnu vrstu projekta - slijedite sljedeće korake da biste stvorili privremeni projekt koji možete urediti upotrebom Mješavine za izraze

4. Otvorite Microsoft Expression Blend

5. Izradite novi projekt aplikacije koji privremeno zadržava svoju dizajnnu opremu. Da biste to učinili, otvorite Datoteka zatim odaberite Novi projekt

6. U Novi projekt dijalog, odaberite Silverlight tip projekta, a zatim odaberite Silverlight 3 primjena predložak. Postavite naziv DesignHelloPhone, odaberite odgovarajuću lokaciju i zadržite jezik kao Vizualni C #, a zatim kliknite u redu.

Image
Image

7. U Visual Studiou dvokliknite App.xaml u Solution Explorer da biste otvorili tu datoteku u uređivaču. Sada otvorite XAML prikaz, a zatim odaberite i kopirajte cijeli Application.Resources u međuspremnik

8. Ponovno otvorite Blend Expression Blend, proširite DesignHelloPhone projekt u Projekti i dvaput kliknite App.xaml za otvaranje datoteke

9. Ukazati na Prikaz aktivnog dokumenta u Pogled izbornik i odaberite XAML View.

10. Pronađite Application.Resources u toj datoteci - ona bi trebala biti prazna - a zatim zalijepite sadržaj međuspremnika da biste je zamijenili.

11. Sada pronađite odjeljak u novom umetnutom tekstu koji je razgraničen komentarom ***** POPIS LISTBOX / LISTBOXITEM ***** „; sadrži stilove koji nisu kompatibilni s projektom Silverlight 3. Izbrišite cijeli odjeljak između početnih i krajnjih graničnika.

Image
Image

12. Sada pronađite primjena element na vrhu datoteke i umetnite novu deklaraciju nazivnika za referencu sistem nazivni prostor u mscorlib kao što je prikazano u nastavku.

xmlns:system='clr-namespace:System;assembly=mscorlib' > # FF1F1F1F Crno ?> var13 ->

13. Sada spremite promijenjeno App.xaml u ekspresijskoj mješavini.

14. Dalje otvorite Visual Studio i otvorite MainPage.xaml datoteku u XAML prikazu. Zatim odaberite i kopirajte rešetka element nazvan LayoutRoot uključujući i svoju djecu u međuspremnik.

15. Vratite se na mješavinu izraza, otvorite MainPage.xaml datoteku u XAML prikazu, a zatim zalijepite sadržaj međuspremnika da biste zamijenili prazno LayoutRootrešetka element u ovoj datoteci.

16. U mjestu MainPage.xaml pronađite korijen UserControl element i promijenite vrijednosti Visina pripisati 800 i Širina pripisati 480.

17. Vratite se na Visual Studio, desnom tipkom miša MainPage.xaml.cs u Solution Explorer i odaberite Prikaz koda, Zatim kopirajte ClickMeButton_Click rukovatelj događaj u međuspremnik.

18. Konačno, vratite se na mješavinu izražavanja, proširite MainPage.xaml čvor u Projekti dvaput kliknite na MainPage.xaml.cs da biste otvorili datoteku u uređivaču i zalijepite ga u međuspremnik u Glavna stranica klase.

Sada smo uspjeli replicirati naš projekt u mješavinu izraza. Da biste izradili dizajn za prilagođeni gumb, pročitajte sljedeći vodič koji će biti objavljen sutra.

Preporučeni: