Windows Phone Tutorial 8: Opprette en egendefinert knapp i Expression Blend-I

Windows Phone Tutorial 8: Opprette en egendefinert knapp i Expression Blend-I
Windows Phone Tutorial 8: Opprette en egendefinert knapp i Expression Blend-I

Video: Windows Phone Tutorial 8: Opprette en egendefinert knapp i Expression Blend-I

Video: Windows Phone Tutorial 8: Opprette en egendefinert knapp i Expression Blend-I
Video: UNLIMITED Exotics / Ren / Re-specs / Level 60's & More in Icarus! Replace Your Lost Icarus Character - YouTube 2024, April
Anonim

Etter å ha lært om hvordan du lager og distribuerer et program i Silverlight-versjonen av CTP-verktøy, som en del av denne Windows Phone-opplæringsserien, går vi videre til Expression Blend. Expression Blend er et forfattersystem for profesjonelle designere å bygge opp brukeropplevelser som retter seg mot.NET 3.0 + -plattformen, og nærmere bestemt WPF eller Windows Presentation Foundation.

Generelt har Silverlight kontroller en egen logikk fra deres visuelle utseende ved hjelp av maler. EN ControlTemplate angir visuell struktur og visuell oppførsel av en kontroll. Du kan tilpasse utseendet til de fleste kontroller ved å endre standardinnstillingen ControlTemplate innstillinger. Dette gjør at du kan endre utseendet på kontrollen uten å endre funksjonaliteten. For eksempel kan du lage knappene i søknadsrunden din i stedet for standard firkantform, men knappen vil fortsatt øke Klikk begivenhet.

I denne opplæringen åpner du Visual Studio-prosjektet du opprettet i forrige øvelse i Expression Blend, og erstatter ControlTemplate av knappen for å endre utseende og utseende. Fordi du lager en ControlTemplate i XAML kan du endre en kontroll utseende uten å skrive noen kode.

1. Åpne Microsoft Visual Studio 2010 Express for Windows Phone
1. Åpne Microsoft Visual Studio 2010 Express for Windows Phone

2. Hvis du har fullført trinnene i forrige øvelse, kan du fortsette med løsningen du opprettet for øvelsen.

3. Åpne den nåværende løsningen i Expression Blend. For å gjøre dette fra Visual Studio, høyreklikk MainPage.xaml i Solution Explorer, og velg deretter Open in Expression Blend. Hvis dette alternativet ikke er tilgjengelig-Sannsynligste årsaken er at din nåværende versjon av Expression Blend ikke støtter den nødvendige prosjekttypen - følg de neste trinnene for å opprette et midlertidig prosjekt som du kan redigere ved hjelp av Expression Blend

4. Åpne Microsoft Expression Blend

5. Opprett et nytt applikasjonsprosjekt for å holde designelementene midlertidig. For å gjøre dette, åpne Fil menyen og velg deretter Nytt prosjekt

6. I Nytt prosjekt dialogboksen, velg Silverlight prosjekttype og velg deretter Silverlight 3 Application mal. Angi navnet til DesignHelloPhone, velg et passende sted, og hold språket som Visual C #, og klikk deretter OK.

Image
Image

7. Dobbeltklikk på Visual Studio App.xaml i Solution Explorer for å åpne denne filen i redigeringsprogrammet. Nå åpner du XAML-visningen, og velger og kopierer hele Application.Resources delen til utklippstavlen

8. Åpne Expression Blend igjen, utvider DesignHelloPhone prosjekt i prosjekter panelet, og dobbeltklikk App.xaml for å åpne filen

9. Pek på Aktiv dokumentvisning i Utsikt menyen og velg XAML View.

10. Finn Application.Resources delen i denne filen - den skal være tom - og deretter lim inn innholdet i utklippstavlen for å erstatte det.

11. Finn nå delen i den nylig innførte teksten som er avgrenset av kommentaren ***** LISTBOX / LISTBOXITEM TEMPLATES ***** “; den inneholder stiler som ikke er kompatible med et Silverlight 3-prosjekt. Slett hele delen mellom start- og sluttgrensene.

Image
Image

12.Nå finner du applikasjon element øverst på filen og sett inn en ny navneplassdeklarasjon for å referere til System namespace i mscorlib montering, som vist nedenfor.

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

13. Lagre det endrede App.xaml i uttrykksblanding.

14. Åpne deretter Visual Studio igjen og åpne MainPage.xaml fil i XAML-visning. Deretter velger du og kopierer Nett element som heter LayoutRoot inkludert sine barn til utklippstavlen.

15. Gå tilbake til Expression Blend, åpne MainPage.xaml fil i XAML-visning, og lim deretter inn innholdet i utklippstavlen for å erstatte det tomme LayoutRootNett element i denne filen.

16. I MainPage.xaml fil, finn roten UserControl element og endre verdiene til Høyde tilskrive 800 og Bredde tilskrive 480.

17. Gå tilbake til Visual Studio, høyreklikk MainPage.xaml.cs i Solution Explorer og velg Vis kode. Deretter kopierer du ClickMeButton_Click hendelse handler til utklippstavlen.

18. Til slutt, gå tilbake til Expression Blend, utvide MainPage.xaml node i prosjekter panel, dobbeltklikk på MainPage.xaml.cs for å åpne filen i editoren, og lim inn koden i utklippstavlen i Hovedside klasse.

Nå har vi suksessivt kopiert prosjektet til uttrykksblanding. For å lage et design for den egendefinerte knappen, vennligst les den neste opplæringen som skal publiseres i morgen.

Anbefalt: