Windows Phone 7: bruker ListBoxes with Style

ListBoxes er brød og smør fra Metro-visualene som har vært pioner for Windows Phone 7 (WP7).

Spesielt i et tekstdrevet miljø med få grafiske ledetråder, vil en applikasjon måtte presentere dataene sine i en eller annen form for rekkefølge.

Windows Phone-rammeverket krever at ordren vil flyte i en vertikal retning, og at widgeten som skal brukes er en ListBox. OK, OK, det er litt av et strekk, men for det store flertallet av tiden ved bruk av WP7, er det slik det kommer til å bli.

Hvis du ikke aner hva jeg snakker om med ListBoxes, er den beste måten å forklare det på via en demo-app.

Ta ditt Microsoft-sanksjonerte WP7-miljø, start opp din versjon av Visual Studio, og lag et nytt prosjekt fra en Silverlight for Windows Phone-mal som er et Windows Phone Panorama-program.

Når du har valgt versjonen av Windows Phone du vil målrette mot, får du standard Panorama-applikasjonen. En stilig blå applikasjon som inneholder to Panorama-elementer - dette er beholderne for ListBoxes, og har overskriftene som sier "første vare" og "andre vare" - som begge inneholder en ListBox, som hver inneholder seksten elementer.

Skulle vi ønske det, kan vi legge til elementer i denne listen ad infinitum. Men å legge til en annen widget; Vel, det er en hest i en annen farge helt.

For å legge til en knapp på slutten av listen, må vi endre stilen som ListBox bruker. Det betyr at vi må høyreklikke på filen MainPage.xaml og åpne den i Expression Blend.

Enten via en forankret rute eller via Vindus-menyen, gå til "Objekter og tidslinje" -panelet, høyreklikk på det første ListBox-objektet og velg Rediger mal> Rediger en kopi.

Hvis du bytter til XAML-visningen av filen, legger du merke til hvordan Blend har lagt til en stilblokk i starten som inneholder vår tilpassede stil for ListBox. Jeg synes det er lettere å legge til elementer i XAML-visningen i stedet for via GUI, men du kan være forskjellig.

For å legge til mer enn ett objekt til Scrollviewer, må vi først pakke innholdet i Scrollviewer (ItemsPresenter) i en StackPanel - det viktigste av alle layoutkontroller i WP7 - og deretter legge til et knappelement inne i StackPanel-objektet, men etter elementene ItemsPresenter. ItemsPresenter inneholder den gjeldende ListBox-presentasjonen. Vi ønsker ikke å fjerne dette, bare legge til det.

XAML for maloppsettet skal se slik ut:

Blend vil også automatisk legge til stilen vi har opprettet i ListBox vi redigerte.

La oss nå gjøre den knappen nyttig.

For å få tilgang til knappen i koden vår ga vi den navnet "Clear", ga den etiketten "Clear All" og satte hendelsen Clear_Tap til å bli påkalt når du trykker på knappen.

For å enkelt kunne bruke ListBox, må vi gi den et navn. Vi har nettopp endret definisjonen av den første ListBox til:

Det er alt med XAML; på tide å bytte C #.

I filen MainPage.xaml.cs, alt vi trenger å gjøre er å legge til følgende behandler:

 private void Clear_Tap(object sender, GestureEventArgs e) 

{

ObservableCollection itemsSource = FirstLB.ItemsSource as ObservableCollection;

itemsSource.Clear ();

}

Denne metoden får en henvisning til samlingen av elementer i FirstLB ListBox, og tømmer deretter samlingen.

Siden den samme ItemSource brukes mellom begge ListBoxes, når vi trykker på tømningsknappen, sletter den faktisk elementene fra begge listene.

Kjør simulatoren med F5 og se appen i aksjon.

Dette er ikke den mest komplekse applikasjonen som noen gang er laget, men forhåpentligvis hjelper den deg ut av et bind.

© Copyright 2021 | pepebotifarra.com