Som en del av vår Windows Phone opplæringsserie, nå lærer vi å opprette brukergrensesnittelementene for HelloPhone applikasjon. Søknaden er veldig enkel. Når du er ferdig, vil programmets brukergrensesnitt inneholde en bildetekst, en tekstboks og en knapp.
For å bruke programmet, legger du inn tekst i tekstboksen, og når du klikker på knappen, viser programmet et banner med teksten du skrev inn. Det vil se ut som den følgende figuren.
1. I Solution Explorer, Dobbeltklikk MainPage.xaml å åpne denne filen i designeren.
Designeren gir to separate visninger for å redigere XAML-filer, Design og XAML utsikt. I designmodus har du en emulatordesign hvor du kan dra og slippe kontroller fra verktøykassen, samt velge, endre størrelse, flytte og sett egenskaper for eksisterende kontroller. I XAML-modus har du en markeringsredigerer som lar deg redigere XAML-koden på siden. Du kan jobbe med en av modusene. Du har også en delt modus, med redigeringsvinduet som viser begge visningene samtidig.
2. I denne oppgaven fokuserer vi hovedsakelig på redigering av XAML manuelt. Når kodingsdelen er ferdig, kan du komme tilbake til designvisning for å se resultatene. Du kan også ha en fullskjerm XAML-visning.
3. I XAML-markeringen generert av standard Windows Phone-applikasjonsmal, finn Nett beholderelement kalt LayoutRoot. Hensikten er å ordne elementene på siden. Inne i sin RowDefinition eiendom, sett inn en ekstra rad mellom de to eksisterende radene og sett verdien av dens Høyde eiendom til Auto. Denne raden vil snart inkludere en tekstboks og en knapp.
4. Rot Nett element inneholder også noen nestede elementer med hver en tilordnet en annen rad i det ytre rutenettet ved å definere en Grid.Row eiendom. Finn nå gridelementet som heter TitleGrid og Sett tekstegenskapen til det første tekstblokkelementet inne i det indre ruten til " Windows Phone 7 Series ". på samme måte Hei telefon legges til neste tekstblokk.
5. Finn nå Nett element som heter ContentGrid, tilordne den til rad 1, som vanligvis er tom i utgangspunktet, og lim inn følgende XAML-markering inne i dette elementet.
6. For å fullføre utformingen av siden, legg til en tredje rad for å inneholde banneret med meldingen som er oppgitt av brukeren. For å opprette denne raden, sett inn følgende XAML-markering umiddelbart før sluttkoden til det ytre rutenettet.
7. Klikk på Design se og undersøke utformingen av kontrollene på siden.
I vår neste opplæring vil vi lære hvordan "Håndter hendelser fra brukergrensesnittet".
