Share
I denne opplæringen vil jeg vise deg hvordan du lager en kule ser klokke app for Windows Phone 7. Expression Blend vil bli brukt til å designe denne appen som det er et veldig kraftig verktøy for raskt å lage overbevisende animasjoner.
For å følge opplæringen må du laste ned og installere Windows Phone 7 SDK. Etter ferdigstillelse av installasjonen vil du ende opp med Visual Studio Express for Windows Phone 7, Expression Blend for Windows Phone 7 og Windows Phone Emulator.
Det første trinnet er å laste ned og installere Windows Phone 7.5 SDK.
Før vi starter, er her det endelige bildet av hva vi skal bygge.
Selve appen er en veldig enkel klokke app som viser tid og dato. Vi bruker animasjon for å ta inn elementene når programmet starter. Hoveddelen av arbeidet blir å sette sammen skjermelementene og tilpasse dem ordentlig og opprette oppstartsanimasjonen. Vi vil også legge til litt kode for å oppdatere datoen og tidsintervallet.
Først må du opprette et prosjekt i Expression Blend. For dette må du velge File> New Project in Expression Blend og velge Windows Phone Application Project-malen.
Gi et navn på prosjektet ditt. jeg vil bruke MinimalClock for prosjektet mitt.
Når prosjektet er opprettet, velg Prosjekt> Kjør prosjekt å kjøre prosjektet ditt. Du vil legge merke til at prosjektet kompilerer og deretter Blend lanserer Windows Phone 7-emulatoren. Før eller senere vil du se at appen din kjører i emulatoren. Trykk på Hjem-knappen på emulatoren for å avslutte appen din. Hvis du gjør det, stopper feilsøkingsøkten og kommer deg til startskjermen på emulatoren din. Når du er ferdig med å se deg rundt i emulatoren, bytt tilbake til Expression Blend.
Nå skal vi sette sammen brukergrensesnittet for MinimalClock-appen. Etter at prosjektet er opprettet, vil du se dette i uttrykksblandingen din:
Først må vi fjerne alle kontrollene som ble opprettet av prosjektmalen for oss. I Objekter og tidslinje, høyreklikk på TitlePanel og velg Slett for å fjerne kontrollen.
Vi må også endre layouttypen til lerret i stedet for Grid, så vi kan fritt bevege oss rundt våre kontroller. For å gjøre dette, høyreklikk på ContentPanel og velg Lerret i Endre oppsetttype Meny.
Når du er ferdig, din Objekter og tidslinje skal se slik ut.
Og søknadssiden din bør være tom slik:
alt = "Tom applikasjonsside"Nå har vi den tomme applikasjonssiden, og vi er klare til å begynne å legge til kontroller på den.
På verktøylinjemenyen velger du Tekstverktøy og TextBlock. Tegn et rektangel på din applikasjonsside i hvilken som helst størrelse. Vi vil fikse størrelsen senere.
Dette blir TextBlock som vi skal bruke for å vise timen en del av tiden, så vi må endre navnet på TimeHour. Vi må også endre dette for å være litt større.
På høyre side finner du egenskapsvinduet. Pass på at tekstblocket du nettopp har opprettet er valgt og endre navn til TimeHour og treffer Tast inn.
Deretter må du endre innholdet i TimeHour kontroll, så naviger til tekstegenskapen og endre verdien til 12. Deretter treffer du Tast inn. En raskere måte å finne eiendom på egenskapsfanen er å bruke søkeområdet og begynne å skrive inn navnet på eiendommen. Vær forsiktig med å fjerne søkefeltet etter at du har endret din eiendom, da alle andre egenskaper forblir gjemt av søket.
Deretter skal vi lage en stil for vår TimeHour-kontroll. Stiler er en samling av visuelle egenskaper som kan brukes på en gitt kontrolltype. Vi vil spare mye arbeid med stiler. Dette kan gjøres ved å høyreklikke på kontrollen selv i Objekter og tidslinje palett og naviger til Rediger stil menyen og velg Lag tom
Deretter må vi gi navnet på stilen: TimeTextStyle, og vær så sikker på å velge Dette dokumentet hvor stilen vil bli definert.
Etter å ha skapt stilen, finner vi oss i stilredaktøren. Du vil gjenkjenne det ved å se på redigeringsvinduet
I egenskapsruten endrer du følgende. Gjør et søk etter Font i Eiendomsøk feltet, men ikke glem å fjerne det senere for å avdekke de andre egenskapene.
Du må også endre Høyde og Bredde til Auto i vår stil, ved å klikke på pilen med liten kryss pil rett ved siden av størrelsesfeltet.
Nå er vi ferdige med å redigere vår stil, så vi kan la stilredigeringsmodus klikke på TimeHours-etiketten på toppen av designflaten vår.
Nå trenger vi en annen TextBlock for å vise minuttene for den nåværende tiden og en annen for å vise prikkene mellom dem. For dette, velg TimeHours på Objekter og tidslinje og trykk Ctrl-C for å kopiere og trykk Ctrl-V to ganger for å lage to kopier. Du vil ende opp med dette i din Objekter og tidslinje panel.
Du må gjøre følgende endringer:
Nå har vi alle tekstblokker som vi trenger for å vise tiden. Alt vi trenger er å justere dem og plassere dem litt lenger unna hverandre.
Først må du velge alle tre kontrollene i Objekter og tidslinje palett og høyreklikk på dem, velg Rette inn og Vertikale sentre.
Du må legge litt avstand mellom tidselementene. For å flytte elementene nøyaktig, kan du bruke piltastene. Hvis du bruker piltastene, vil kontrollen flytte en piksel i den angitte retningen, og hvis du bruker pilen med shift-tasten, vil kontrollen flyttes med 10 piksler.
Velg TimeHours-tekstblocket på paletten Ojects og Timeline og flytt det 5 piksler igjen. Velg TimeMinutes tekstblokken og trykk på høyre pil fem ganger for å flytte den til høyre 5 piksler. Når du er ferdig, vil du ende opp med noe slikt.
Til slutt må vi kombinere elementene i en enkelt kontroll, slik at det blir enklere å manipulere senere.
For å gjøre dette må du velge alt TimeHours, TimeDots og TimeMinutes på Objekter og tidslinje palett. Høyreklikk på de valgte elementene og velg Gruppe inn i og Lerret.
Dobbeltklikk på den nyopprettede [Lerret] element og gi nytt navn til det TimeText. Nå må objektstrukturen se slik ut.
Til slutt vil vi legge til to barer. En vertikal og en horisontal for å gjøre brukergrensesnittet litt mer interessant. Vi vil også legge til navnet på appen.
Først må du kontrollere at ContentPanel er valgt på Objekter og tidslinje palett, velg deretter Rektangel på verktøylinjen eller bruk kortnummeret M. Tegn et horisontalt rektangel rett over TimeText-kontrollen. Deretter må du endre egenskapene til dette rektangelet. Pass på at rektangelet er valgt og på Eiendommer paletten endrer følgende:
Nå skal vi endre fyllingsegenskapen til HorizontalSpearator til en av de innebygde stilene som kalles PhoneAccentBrush. Dette vil gjenbruke aktuell valgt temaets aksentfarge. Med denne modifikasjonen vil applikasjonen gjenbruke den primære fargen til det aktuelle temaet.
For å endre fyllingen, velg HorizontalSeparator og finn den siste kategorien på fargeditoren som heter Pensle ressurser. Velg deretter PhoneAccentBrush fra listen.
Også, vi må sette Stroke tilhører HorizontalSeparator til Ingen pensel. Du kan gjøre dette ved å velge Stroke eiendom like rett under av Børste eiendom, og velg deretter den første kategorien på fargeditoren.
Vi trenger en andre linje kalt horisontal bar. For dette, velg en gang til Rektangel verktøy eller hit M for å velge det. Tegn et rektangel like under TimeText kontroller og sett inn følgende egenskaper.
Disse separatorene vil gå over grensene til skjermen, men dette er ment. Du må plassere separatorene rundt Time-delen slik:
Nå må vi legge til programtittelen. Velg TextBlock verktøy fra Verktøy palett eller trykk T. Tegn en TextBlock like over HorizontalSeparator og endre følgende egenskaper.
Slik ser det ut nå:
For å lage sekunder må du legge til en ny TextBlock på applikasjonssiden. Velg TextBlock-verktøyet fra paletten Verktøy, eller trykk T-tasten.
Tegn en TextBlock like under tiden, og sett følgende egenskaper:
Deretter skal vi definere en stil for dette elementet, og senere vil vi bruke denne stilen til å formatere dagens etiketter også.
For å opprette en ny stil velger du SecondsLabel På designflaten, høyreklikk på den og i Rediger stil meny, velg Lag tom.
Gi SmallTextStyle som navnet på stilen og klikk på OK-knappen for å lage stilen.
Deretter finner du deg selv i stilredaktøren. Endre følgende eiendom:
Sett også topp- og bunnmarginen til 2 piksler.
Du kan gå stilredigeringsmodus ved å klikke på SecondsLabel øverst til venstre på designflaten.
Tegn et sekund TextBlock under SecondsLabel og endre egenskapene slik:
Med alle endringene skal telefonprogrammets side se slik ut:
Nå er vi klare til å lage den delen som vil vise dagens dato. For dette velg igjen TextBlock verktøyet eller trykk på T nøkkel for å få tilgang til den raskt.
Tegn en TextBlock rett over HorizontalSeparator-kontrollen og endre dens egenskaper som følgende:
Slik ser applikasjonssiden seg etter at du har lagt til DateText.
Endelig vil vi opprette kontrollen som er ansvarlig for visning av dagene. Vi trenger 7 TextBlock for å vise hver dag i uken. Du må legge til m en for en. Velg TextBlock Verktøy fra Verktøy-paletten eller trykk på T tast og legg alle TextBlocks på høyre side av VerticalSeparator.
mandag
tirsdag
onsdag
Torsdag
fredag
lørdag
søndag
For hver av dagene endrer tekstblokken stilen ved å høyreklikke på kontrollene en etter en, velg Rediger stil menyen og velg deretter Bruk ressurs. Velg stil SmallTextStyle som vi definerte tidligere.
alt = "Velger SmallTextStyle" title = "Velger SmallTextStyle" /> Etter dette må vi ordne tekstblockene som vist på skjermbildet nedenfor.
Hvis dagene ikke er riktig justert, velg dem alle i Objekter og tidslinje palett, høyreklikk og velg Venstre kantene fra Rette inn Meny.
Deretter må vi kombinere dagene til en ny container, slik at vi kan manipulere dem lettere senere. Med alle de valgte dagene, høyreklikk på dem og velg StackPanel fra Gruppe inn i Meny.
Dobbeltklikk på newlz opprettet [StackPanel] element og endre det navnet til hver~~POS=TRUNC.
Vi har ett siste skritt for å fullføre UI-designfasen og for å komme til det planlagte utseendet på søknaden vår. Vi må litt rotere hele vårt brukergrensesnitt.
For dette, velg ContentPanel i Objekter og tidslinje palett og deretter gå til Eiendommer og endre og i Forvandle eiendomsgruppe, endre Rotasjonsvinkel til -30 grader.
Etter å ha sett på den roterte skjermen ser vi at skjermelementene er litt av. De må reposisjoneres for å se bedre ut når de roteres.
Vi må endre posisjonen til DateText og ApplicationTitle. Du må endre følgende egenskaper:
Du kan også velge kontrollen du vil plassere og bruke piltastene for å bevege deg litt rundt kontrollpunktene piksel med piksel og bruke Shift-tasten med piltastene for å flytte dem rundt 10 piksler om gangen.
Nå som alle kontrollene er på plass, er brukergrensesnittet gjort og animasjonene kan legges til.
### Device Tab
I det første skjermbildet kan du se at separatorlinjene er røde, men i skjermbildet er de blå. Dette skjer, fordi enheten har forskjellig fargeoppsett. Du kan endre enhetstemaet ved å klikke på Enhet kategorien like ved siden av Prosjekt fane. Her kan du endre retningen til enheten, bruke forskjellig aksentfarge og se hvordan applikasjonen ser ut om det mørke eller lyse temaet er valgt. Jeg oppfordrer deg til å spille litt rundt med innstillingene.
Deretter skal vi opprette den første animasjonen som skal spilles når programmet startes. Animasjonen vil flytte TimeText, WeekDays, TimeSeconds, DateText kontroller til deres opprinnelige plassering.
Animasjoner i Expression Blend er basert på å lage nøkkelrammer og deretter endre bestemte egenskaper i den nasjonale rammen. Dette vil fortelle animasjonssystemet at eiendommen skal animeres og verdien skal være som angitt i nøkkelrammen. Hvis du for eksempel lager en nøkkelramme på 1 sekund for TimeText og deretter endrer plasseringen av og opaciteten til kontrollen, vil disse egenskapene bli animert.
Først må du opprette et nytt historiebrett i Objekter og tidslinje palett ved å trykke på + knapp.
Gi navnet InitialAnimation for din nye storyboard og klikk ok å lage den.
Nå som vi har opprettet storyboardet, vil du se noe slikt i paletten Objekter og Tidslinje. På venstre side vil du se at vår storyboard heter InitialAnimation er valgt, og den lille røde ledningen indikerer at opptaket er på. Dette betyr at hvis vi endrer noen egenskaper av hvilken som helst kontroll, vil det være en del av storyboardet i stedet for å endre brukergrensesnittet.
På venstre side av paletten kan du se tidslinjedelen. Her kan du bevege deg fremover eller bakover i tide, og du kan legge til keyframes. Deretter vil vi animere TimeText og dens Opacity-egenskap. Vi vil animere Opacity-eiendommen fra 0 prosent til 100 prosent i 1 sekund. For å gjøre dette, velg TimeText i Objekt og Tidslinje-paletten og kontroller at avspillingshode er på 0 sekunder og klikk på Ta opp Keyframe knapp.
Resultatet blir at en ny keyframe blir lagt til Tidsskrift på 0 sekunder. Du vil også legge merke til at en liten rød prikk er lagt til TimeText, dette betyr at InitialAnimation endrer denne kontrollen.
Nå må du gå til Eiendommer palett og endre opacity av TimeText å være 0 prosent.
Deretter må du flytte spillehodet til 1 sekund og klikke på Record Keyframe.
Så igjen, gå til Eiendommer palett og endre opacity av TimeText til 100 prosent.
Animasjonen er nå klar, og du kan observere den ved å klikke på Play-knappen:
Du kan flytte rundt keyframes, hvis du vil tweak animasjonen.
Velg 0 sekund keyframe fra TimeText. Forandre midlertidig tilbake opacity eiendom til 95 prosent, slik at du kan se hva du gjør. Deretter treffe et par ganger Skift og venstre pil tastekombinasjon. Med dette vil du flytte ut TimeText fra skjermen. Dette vil være startposisjonen til bevegelsen vår. Ikke glem å bytte tilbake opacity eiendom til 0 prosent.
Velg 1 sekund keyframe av TimeText så må du gjøre følgende. Treffer en gang på høyre pil nøkkel på tastaturet ditt - flytter kontrollen 1 piksel til høyre - og deretter treffer venstre piltast en gang - flytter kontrollen 1 piksel til venstre. Med denne endringen vil vi i hovedsak registrere gjeldende posisjon for TimeText-kontrollen og instruere storyboardet for å flytte den til dette stedet uavhengig av startposisjonen.
Prøv å spille animasjonen. Hvis alt fungerte, så burde du se TimeText beveger seg inn på skjermen og vises gradvis samtidig.
En ting vi kan gjøre for å spice opp animasjonen er å konfigurere lettelsen for animasjonen. Dette vil gjøre animasjonen mer naturlig. For dette, velg 1s nøkkelramme av animasjonen vår. Endre deretter Easing Funksjon eiendom til Tilbake InOut på Eiendom palett.
Spill animasjonen enda en gang for å vise hvordan animasjonen oppfører seg nå. Hvis du vil, kan du endre lettelsen for å se hvordan hver lettelsefunksjon oppfører deg.
Deretter skal vi animere TimeSeconds, kontrollen ble brukt til å vise sekunder-delen av gjeldende tid. For dette, velg TimeSeconds og legg til keyframes til tidslinjen på 0 sekunder og på 1 sekunder. Gjør deretter følgende:
Velg den andre nøkkelrammen til TimeSeconds
Til slutt må vi animere kontrollene som er ansvarlige for å vise dagens dato og dager i søknaden. Disse animasjonene vil være enkle de vil animere opaciteten av disse kontrollene fra 0 prosent til 100 prosent.
. Endre opaciteten til 100 prosent.
Velg DateText kontrollen i Objekter og tidslinje palett og legg til en keyframe på 0 sekunder.
. En siste ting som trengs for å gjøre, er å avslutte animasjonsmodusen og endre opaciteten til 0 for alle kontroller som vi animerer i InitialAnimation historiebrett. Lukk storyboardet i Objekter og tidslinje palett ved å klikke på X knappen ved siden av historiebrettetavnet.
Deretter velger du hver av kontrollene som er animert og setter deres opasitetsegenskaper til 0 prosent.
Nå som animasjonen er ferdig, er alt nødvendig for å legge til litt kode for å gjøre skjermoppdateringen, slik at innholdet på skjermen vår oppdateres hvert sekund og for å starte vår første animasjon når programskjermbildet er lastet inn.
Nå er applikasjonen nesten ferdig. Alt vi trenger å gjøre er å legge til litt kode for å oppdatere skjermen hvert halve sekund og å spille vår første animasjon.
For å oppdatere skjermen periodisk, a DispatchTimer må opprettes når siden er ferdig lasting. For dette må en hendelsesbehandler for siden lastet hendelse opprettes.
Velg først søknadssiden fra Objekter og tidslinje palett.
Så på Eiendommer palett velg arrangementer tab.
I listen over hendelser velger du loaded hendelse og Dobbeltklikk å opprette hendelseshandleren. Et nytt vindu med koden bak for vår søknadsside.
Først må forsendelsestimeren defineres i klassefilen (MainPage.xaml.cs). En "bruk" -oppgave må legges til etter det siste ved hjelp av stement øverst i klassefilen.
Accentsconagua
bruker System.Windows.Threading; Legg deretter til følgende linje rett etter klassen definisjon:
privat DispatcherTimer _timer; I den lastede hendelsen legger du til følgende kodelinjer:
RefreshUI (dette null); Storyboard sb = (Storyboard) this.Resources ["IntialAnimation"]; sb.BeginTime = TimeSpan.FromSeconds (0.1); sb.Begin (); _timer = ny DispatcherTimer (); _timer.Interval = TimeSpan.FromSeconds (0.4); _timer.Tick + = RefreshUI; _timer.Start (); Hva dette koden vil gjøre, er først å ringe en metode som vil oppdatere brukergrensesnittet til nåværende tid og dag før den første animasjonen er satt opp til å kjøre om 0,4 sekunder og vil koble opp timeren til å løpe hvert halve sekund og ringe til RefreshUI metode.
Deretter må en ny metode legges til for å stoppe timeren når vi forlater programmet. Metoden som heter OnNavigatedFrom ser slik ut:
beskyttet overstyring ugyldig OnNavigatedFrom (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedFrom (e); hvis (_timer! = null) _timer.Stop (); Ett siste stykke mangler: RefreshUI metode som oppdaterer brukergrensesnittet.
offentlig ugyldig RefreshUI (objekt sender, EventArgs e) DateTime dt = DateTime.Now; int sekunder = dt.Sekund; int minutter = dt.Minute; int time = dt.Hour; int år = dt.år // Tid hvis (TimeHours.Text! = Dt.Hour.ToString ()) TimeHours.Text = dt.Hour.ToString (); hvis (TimeMinutes.Text! = dt.Minute.ToString ("D2")) TimeMinutes.Text = dt.Minute.ToString ("D2"); hvis (TimeSeconds.Text! = dt.Second.ToString ("D2")) TimeSeconds.Text = dt.Second.ToString ("D2"); Den endelige koden vil se slik ut:
Hvis alt gikk bra, så etter å ha trykket Ctrl-Shift-B eller velg meny, Prosjekt, Bygg Prosjekt, Prosjektet skal bygge uten feil. Hvis prosjektet er bygget uten problem, velg deretter Prosjekt, Kjør prosjekt å kjøre programmet.
Denne artikkelen bare riper overflaten av det som er mulig ved å bruke Blend for å lage Windows Phone 7-apper. Jeg vil oppfordre deg til å ta denne appen og eksperimentere med å animere brukergrensesnittet eller endre appen på andre måter. Det er moro!
Hvis du har noen spørsmål eller trenger hjelp med appen. Vær så snill, ikke nøl med å kontakte meg på twitter (@gyurisc) eller besøk bloggen min på www.littlebigtomatoes.com. Jeg vil gjerne svare på dine spørsmål eller hjelpe deg med dine problemer.
