Share
În acest tutorial vă voi arăta cum să creați o aplicație de ceas rece pentru Windows Phone 7. Expression Blend va fi utilizată pentru proiectarea acestei aplicații deoarece este un instrument foarte puternic pentru crearea rapidă de animații convingătoare.
Pentru a urmări tutorialul, va trebui să descărcați și să instalați Windows Phone 7 SDK. După terminarea instalării, veți termina cu Visual Studio Express pentru Windows Phone 7, Expression Blend pentru Windows Phone 7 și Windows Phone Emulator.
Primul pas este să descărcați și să instalați Windows Phone 7.5 SDK.
Înainte de a începe, aici este imaginea finală a ceea ce vom construi.
Aplicația în sine este o aplicație ceas foarte simplă care arată ora și data. Vom folosi animația pentru a aduce elementele când începe aplicația. Cea mai mare parte a lucrării va contura elementele ecranului și alinierea lor corectă și crearea animației de pornire. De asemenea, vom adăuga un pic de cod pentru a actualiza periodic data și ora.
În primul rând, va trebui să creați un proiect în Expression Blend. Pentru aceasta, va trebui să selectați File> New Project în Expression Blend și să selectați șablonul Project Phone Application Project.
Furnizați un nume pentru proiectul dvs. voi folosi MinimalClock pentru proiectul meu.
Odată ce proiectul este creat, selectați Proiect> Proiect Run pentru a vă derula proiectul. Veți observa că proiectul se compilează și apoi Blend lansează emulatorul Windows Phone 7. Mai devreme sau mai târziu, veți vedea că aplicația dvs. rulează în emulator. Apăsați butonul de pornire de pe emulator pentru a vă închide aplicația. Procedând astfel, veți opri sesiunea de depanare și veți ajunge la ecranul de pornire al emulatorului. Odată ce ați terminat să priviți în jurul emulatorului, reveniți la Expression Blend.
Acum vom pune împreună UI pentru aplicația MinimalClock. După crearea proiectului, veți vedea acest lucru în Expression Blend:
În primul rând, trebuie să eliminăm toate controalele create de șablonul de proiect pentru noi. În Obiectele și cronologia, faceți clic dreapta pe TitlePanel și alegeți Șterge pentru a scoate comanda.
De asemenea, trebuie să schimbăm tipul layout-ului la Canvas în loc de Grid, astfel încât să ne mișcăm în mod liber în jurul controalelor noastre. Pentru a face acest lucru, faceți clic dreapta pe ContentPanel și selectați pânză în Schimbați tipul de aspect meniul.
Odată terminat, dvs. Obiectele și cronologia Ar trebui să arate așa.
Pagina de aplicație trebuie să fie goală astfel:
alt = "Pagina de aplicare goală"Acum, avem pagina de aplicație goală și suntem gata să începem să adăugăm controale.
În meniul barei de instrumente, selectați Instrument de text și TextBlock. Desenați un dreptunghi pe pagina dvs. de aplicare cu orice dimensiune. Vom rezolva dimensiunea mai târziu.
Acesta va fi TextBlock-ul pe care îl vom folosi pentru afișarea orei din acea parte a timpului, deci va trebui să îl redenumim cu TimeHour. De asemenea, va trebui să schimbăm acest lucru ușor mai mare.
În partea dreaptă, găsiți fereastra de proprietăți. Asigurați-vă că ați selectat TextBlock-ul pe care tocmai l-ați creat și că îi schimbați numele TimeHour și lovit introduce.
Apoi, va trebui să modificați conținutul TimeHour controlați, astfel că navigați la proprietatea Text și modificați valoarea la 12. Apăsați apoi introduce. O modalitate mai rapidă de a găsi orice proprietate în fila proprietăți este să utilizați zona de căutare și să începeți să introduceți numele proprietății. Aveți grijă să ștergeți caseta de căutare după ce ați terminat modificarea proprietății, deoarece toate celelalte proprietăți vor rămâne ascunse de căutarea dvs..
Apoi, vom crea un stil pentru controlul nostru TimeHour. Stilurile sunt o colecție de proprietăți vizuale care pot fi aplicate pe un anumit tip de control. Vom economisi o mulțime de lucruri cu stiluri. Acest lucru se poate face prin clic dreapta pe controlul în sine Obiectele și cronologia și navigați la Editați stilul meniu și selectați Creați gol
Apoi, trebuie să dăm numele stilului: TimeTextStyle, și apoi asigurați-vă că ați selectat Acest document unde stilul va fi definit.
După crearea stilului, ne aflăm în editorul de stil. Veți fi recunoscut-o privindu-vă fereastra editorului
În panoul de proprietăți, schimbați următoarele. Faceți o căutare Font în Căutare proprietate dar nu uitați să îl ștergeți mai târziu pentru a descoperi celelalte proprietăți.
De asemenea, va trebui să schimbați Înălţime și Lăţime la Auto în stilul nostru, făcând clic pe simbolul cu săgeată încrucișată mică, chiar lângă câmpul de dimensiune.
Acum, am terminat editarea stilului nostru, astfel încât să putem lăsa modul de editare a stilului făcând clic pe eticheta TimeHours din partea de sus a suprafeței noastre de design.
Acum, avem nevoie de un alt TextBlock pentru a afișa minutele pentru ora curentă și altul pentru afișarea punctelor între ele. Pentru aceasta, selectați TimeHours pe Obiectele și cronologia și apăsați pe Ctrl-C pentru a copia și apăsați de două ori pe Ctrl-V pentru a crea două copii. Veți sfârși cu asta în dvs. Obiectele și cronologia panou.
Va trebui să faceți următoarele modificări:
Acum, avem toate blocurile de text de care avem nevoie pentru afișarea Timpului. Tot ce avem nevoie este să le aliniem și să le așezăm un pic mai departe unul de celălalt.
În primul rând, va trebui să selectați toate cele trei comenzi din Obiectele și cronologia paleta și faceți clic dreapta pe ele, selectați Alinia și Centre verticale.
Va trebui să puneți un mic spațiu între elementele de timp. Pentru a deplasa precis elementele, puteți utiliza tastele săgeți. Dacă utilizați tastele săgeată, comanda va muta un pixel în direcțiile date și dacă utilizați săgeata cu tasta Shift, atunci comanda va fi mutată cu 10 pixeli.
Selectați bara de text TimeHours din paleta Ojects and Timeline și mutați-o cu 5 pixeli în stânga. Selectați bara de text TimeMinutes și apăsați săgeata dreapta de cinci ori pentru ao muta cu 5 pixeli dreapta. Odată ce ați terminat, veți ajunge la ceva asemănător.
În cele din urmă, va trebui să combinăm elementele într-un singur control, astfel încât să fie mai ușor de manipulat mai târziu.
Pentru a face acest lucru va trebui să selectați toate TimeHours, TimeDots și TimeMinutes pe Obiectele și cronologia paletă. Faceți clic dreapta pe elementele selectate și alegeți Grup în și pânză.
Faceți dublu clic pe nou creat [Canvas] element și redenumiți-l la TimeText. Structura obiectului dvs. ar trebui să arate astfel.
În cele din urmă, vom adăuga două bare. O verticala si una orizontala pentru a face UI un pic mai interesant. De asemenea, vom adăuga numele aplicației.
În primul rând, asigurați-vă că ContentPanel este selectat pe Obiectele și cronologia paletă, apoi selectați Dreptunghi pe bara de instrumente sau folosiți codul scurt M. Desenați un dreptunghi orizontal chiar deasupra butonului TimeText. Apoi, va trebui să modificați proprietățile acestui dreptunghi. Asigurați-vă că dreptunghiul dvs. este selectat și pe Proprietăți paleta modificați următoarele:
Acum vom schimba proprietatea de umplere a HorizontalSpearator la unul dintre stilurile construite numite PhoneAccentBrush. Aceasta va reutiliza culoarea de accent curentă a temei selectate. Cu această modificare, aplicația va reutiliza culoarea primară a temei curente.
Pentru a modifica umplerea, selectați HorizontalSeparator și localizați ultima filă din editorul de culoare numit Resurse perie. Apoi selectați PhoneAccentBrush din listă.
De asemenea, trebuie să setăm Accident vascular cerebral proprietatea HorizontalSeparator la Nu există perie. Puteți face acest lucru selectând Accident vascular cerebral proprietate doar în conformitate cu Perie proprietate și apoi selectați prima filă din editorul de culori.
Avem nevoie de oa doua bară numită bară orizontală. Pentru aceasta, selectați încă o dată Dreptunghi instrument sau lovit M pentru ao selecta. Desenați un dreptunghi chiar sub TimeText controlați și setați următoarele proprietăți.
Aceste separatoare vor trece peste limitele ecranului, dar acest lucru este destinat. Va trebui să poziționați separatoarele în jurul părții Time astfel:
Acum trebuie să adăugăm titlul aplicației. Selectează TextBlock instrument de la Unelte paletă sau presă T. Desenează un TextBlock chiar deasupra HorizontalSeparator și modificați următoarele proprietăți.
Asa ar trebui sa arate ca acum:
Pentru a crea secundele, va trebui să adăugați un nou TextBlock pe pagina aplicației. Selectați instrumentul TextBlock din paleta de instrumente sau apăsați tasta T.
Desenați un TextBlock chiar sub Ora și setați următoarele proprietăți:
Apoi vom defini un stil pentru acest element și mai târziu vom reuși să folosim acest stil pentru a formata și etichetele zilei.
Pentru a crea un stil nou, selectați SecondsLabel pe suprafața de proiectare, faceți clic dreapta pe ea și în Editați stilul meniu, alegeți Creați gol.
Da SmallTextStyle ca nume de stil și faceți clic pe butonul OK pentru a crea stilul.
Apoi, te vei regăsi în editorul de stil. Schimbați următoarea proprietate:
De asemenea, setați marginea de sus și de jos la 2 pixeli.
Puteți să părăsiți modul de editare a stilului făcând clic pe secțiunea SecondsLabel din zona din stânga sus a suprafeței de proiectare.
Trageți o secundă TextBlock de mai jos SecondsLabel și modificați proprietățile astfel:
Cu toate modificările, pagina de aplicații pentru telefon ar trebui să arate astfel:
Acum suntem gata să creăm partea care va afișa data curentă. Pentru aceasta selectați din nou TextBlock sau apăsați butonul T cheie pentru a accesa rapid.
Desenați un TextBlock chiar deasupra butonului HorizontalSeparator și schimbați proprietățile acestuia după cum urmează:
Iată cum privește pagina de aplicație după adăugarea textului DateText.
În cele din urmă, vom crea controlul responsabil pentru afișarea zilelor. Vom avea nevoie de șapte blocuri de text pentru a afișa în fiecare zi a săptămânii. Va trebui să adăugați m unul câte unul. Selectează TextBlock instrument din paleta de instrumente sau apăsați butonul T și plasați toate Blocurile de Text din partea dreaptă a VerticalSeparatorului.
luni
marţi
miercuri
joi
vineri
sâmbătă
duminică
Pentru fiecare bloc de text din zi schimbați stilul făcând clic dreapta pe unul dintre ele, apoi selectați Editați stilul meniu și apoi alegeți Aplicați resursele. Selectați stilul SmallTextStyle pe care am definit-o mai devreme.
alt = "Selectarea SmallTextStyle" title = "Selectarea SmallTextStyle" /> După aceasta, trebuie să aranjăm blocurile text așa cum se arată în imaginea de mai jos.
Dacă zilele nu sunt aliniate corect, selectați-le pe toate în Obiectele și cronologia palete, faceți clic dreapta și selectați Marginile stângi din Alinia meniul.
Apoi trebuie să combinăm zilele într-un container nou, astfel încât să le putem manipula mai ușor mai târziu. Cu toate zilele selectate, faceți clic dreapta pe ele și selectați StackPanel de la Grup în meniul.
Faceți dublu clic pe noul creat [StackPanel] element și schimbați numele lui Zilele saptamanii.
Avem un ultim pas pentru a termina faza de proiectare UI și pentru a ajunge la aspectul planificat al aplicației noastre. Trebuie să ne rotim puțin întreaga interfață.
Pentru aceasta, selectați ContentPanel în Obiectele și cronologia paletă și apoi mergeți la Proprietăți și schimbarea și în Transforma grup de proprietate, schimbați Unghi de rotație la -30 grade.
După ce ne uităm la ecranul rotit, observăm că elementele ecranului sunt ușor oprite. Ele trebuie repoziționate pentru a arăta mai bine atunci când se rotește.
Trebuie să schimbăm poziția DateText și titlul de aplicare. Va trebui să modificați următoarele proprietăți:
De asemenea, puteți selecta comanda pe care doriți să o repoziționați și utilizați tastele săgeată pentru a vă mișca puțin în jurul pixelilor de control cu ajutorul pixelilor și utilizați tasta Shift cu tastele săgeți pentru a le deplasa în jurul a 10 pixeli în același timp.
Acum, că toate controalele sunt în loc, UI este făcut și animațiile pot fi adăugate.
### Tab Tabă dispozitiv
În captura de ecran inițială puteți vedea că liniile de separare sunt roșii, dar pe ecranul meu sunt albastre. Acest lucru se întâmplă deoarece dispozitivul are culori de accent diferite. Puteți schimba tema dispozitivului făcând clic pe Dispozitiv fila chiar lângă Proiect tab. Aici veți putea schimba orientarea aparatului, aplicând culori diferite de accente și veți vedea cum arată aplicația dacă este selectată tema întunecată sau lumină. Vă încurajez să jucați puțin în setări.
Apoi, vom crea animația inițială care va fi redată când aplicația a fost lansată. Animația va muta comenzile TimeText, WeekDays, TimeSeconds, DateText în locația lor inițială.
Animațiile din Expression Blend se bazează pe crearea cadrelor cheie și apoi modificarea anumitor proprietăți în acel cadru cheie. Aceasta va spune subsistemului de animație că proprietatea trebuie animată și valoarea trebuie să fie cea specificată în cadrul cheii. De exemplu, dacă creați un cadru cheie la 1 secundă pentru TimeText și apoi modificați locația și opacitatea controlului, atunci aceste proprietăți vor fi animate.
În primul rând, trebuie să creați un nou tablou de povestiri în Obiectele și cronologia paletei prin apăsarea butonului + buton.
Furnizați numele InitialAnimation pentru noul dvs. scenariu și faceți clic pe O.K pentru ao crea.
Acum, când avem scripturile create, veți vedea ceva de genul acesta în paleta Obiecte și Cronologie. În partea stângă, veți vedea că tabloul de bord numit InitialAnimation este selectat și micul indicator roșu indică faptul că înregistrarea este activată. Aceasta înseamnă că, dacă schimbăm orice proprietăți ale oricărui control, acesta va face parte din tabloul de bord, în loc să schimbe interfața utilizator.
În partea stângă a paletei puteți vedea partea de cronologie. Aici puteți trece în timp și înapoi și puteți adăuga cadre cheie. Apoi, vom anima TimeText și proprietatea Opacity. Vom anima proprietatea Opacity de la 0% la 100% în 1 secundă. Pentru a face acest lucru, selectați TimeText din paleta Obiecte și Cronologie și asigurați-vă că capul de redare este la 0 secunde și faceți clic pe Înregistrați cadrul cheie buton.
Rezultatul va fi că un nou keyframe este adăugat pentru Timetext la 0 secunde. De asemenea, veți observa că un punct roșu mic este adăugat la TimeText, ceea ce înseamnă că InitialAnimation schimbă acest control.
Acum, va trebui să mergeți la Proprietăți și modificați paleta Opacitate de TimeText a fi 0 la sută.
Apoi, va trebui să mutați capul de redare la 1 secundă și să faceți clic pe Record Keyframe.
Apoi, din nou, du-te la Proprietăți și modificați paleta Opacitate de TimeText la 100 la sută.
Animația este acum pregătită și o puteți observa făcând clic pe butonul Redare:
Puteți să vă mișcați în jurul cadrelor cheie, dacă doriți să optimizați animația.
Selectați 0 secundă cadru cheie din TimeText. Schimbă temporar înapoi Opacitate proprietate la 95%, astfel încât să puteți vedea ce faceți. Apoi, de câteva ori a lovit Shift și săgeată stânga combinație de taste. Cu aceasta, vă veți muta TimeText de pe ecran. Aceasta va fi poziția de plecare a mișcării noastre. Nu uitați să schimbați Opacitate proprietate la 0 la sută.
Selectați 1 secundă cadru cheie de TimeText atunci va trebui să faceți următoarele. Apăsați o dată sageata dreapta tasta de pe tastatură - mișcarea butonului de control 1 pixel spre dreapta - și apoi apăsarea tastei săgeată stânga o dată - mutarea controlului 1 pixel spre stânga. Cu această schimbare vom înregistra în mod esențial poziția actuală a controlului TimeText și vom instrui tabloul de bord să îl deplaseze în această locație, indiferent de poziția inițială.
Încercați să jucați animația. Dacă totul a ieșit, atunci ar trebui să vezi TimeText trecând pe ecran și apărând treptat în același timp.
Un lucru mai mult pe care îl putem face pentru a obține o mișcare de animație este de a configura relaxarea pentru animație. Acest lucru va face animația mai naturală. Pentru aceasta, selectați 1s cadru cheie al animatiei noastre. Apoi schimbați Funcția de relaxare proprietate la Înapoi InOut pe Proprietate paletă.
Redați din nou animația pentru a arăta modul în care animația se comportă acum. Dacă doriți, schimbați relaxarea pentru a vedea cum se comportă fiecare funcție de relaxare.
Apoi, vom fi animați TimeSeconds, comanda utilizată pentru afișarea secțiunii secunde a timpului curent. Pentru aceasta, selectați TimeSeconds și adăugați cadre cheie la cronologie la 0 secunde și la 1 secundă. Apoi faceți următoarele:
Selectați cel de-al doilea cadru al cheii TimeSeconds
În cele din urmă, va trebui să animăm controalele care sunt responsabile pentru afișarea datei și zilelor curente din aplicație. Aceste animații vor fi simple și vor anima opacitatea acestor controale de la 0 la 100 la sută.
. Schimbați opacitatea la 100%.
Selectați controlul DateText în Obiectele și cronologia paletă și adăugați o cheie cheie la 0 secunde.
. Un ultim lucru ce trebuie făcut este să părăsiți modul de animație și să modificați opacitatea la 0 pentru toate controalele pe care le animăm în InitialAnimation poveste bord. Închideți tabloul de bord în Obiectele și cronologia paletei făcând clic pe X butonul de lângă numele panoului povestirii.
Apoi selectați fiecare dintre comenzile animate și setați proprietățile opacității la 0%.
Acum, când animația este terminată, totul este necesar pentru a adăuga un pic de cod pentru actualizarea ecranului, astfel încât conținutul ecranului nostru să fie actualizat la fiecare secundă și să pornim animația inițială atunci când se încarcă ecranul aplicației.
Aplicația este aproape finalizată. Tot ce trebuie să facem este să adăugăm un pic de cod pentru a reîmprospăta ecranul la fiecare jumătate de secundă și pentru a ne juca animația inițială.
Pentru a actualiza periodic ecranul, a DispatchTimer trebuie să fie create atunci când pagina termină încărcarea. Pentru aceasta, trebuie să fie creat un handler de evenimente pentru evenimentul încărcat de pagină.
Mai întâi, selectați pagina de aplicație din Obiectele și cronologia paletă.
Apoi, pe Proprietăți selectați paleta Evenimente fila.
În lista evenimentelor, selectați Încărcat eveniment și dublu click pentru a crea un handler de evenimente. O fereastră nouă cu codul din spatele paginii noastre de aplicare.
În primul rând, cronometrul de expediere trebuie definit în fișierul de clasă (MainPage.xaml.cs). O instrucțiune "utilizată" trebuie adăugată imediat după ultima utilizare a stementului din partea de sus a fișierului de clasă.
Accentsconagua
folosind System.Windows.Threading; Apoi adăugați următoarea linie imediat după definiția clasei:
private DispatcherTimer _timer; În evenimentul Loaded adăugați următoarele linii de cod:
RefreshUI (acest lucru, null); Storyboard sb = (Storyboard) aceasta.Resurse ["IntialAnimation"]; sb.BeginTime = TimeSpan.FromSeconds (0.1); sb.Begin (); _timer = nou DispatcherTimer (); _timer.Interval = TimeSpan.FromSeconds (0,4); _timer.Tick + = RefreshUI; _timer.Start (); Ceea ce va face această comandă este să apelați mai întâi o metodă care va actualiza interfața de utilizator la ora și ziua curente, înainte ca animația inițială să fie setată să ruleze în 0,4 secunde și să ne conecteze cronometrul la fiecare jumătate de secundă și să sunăm la RefreshUI metodă.
Apoi, trebuie adăugată o nouă metodă pentru a opri temporizatorul când părăsim aplicația. Metoda numită OnNavigatedFrom arată astfel:
protejat suprascriere void OnNavigatedFrom (System.Windows.Navigation.NavigationEventArgs e) base.OnNavigatedFrom (e); dacă (_timer! = null) _timer.Stop (); Nu există o ultimă piesă: RefreshUI care actualizează interfața utilizator.
public void RefreshUI (expeditor obiect, EventArgs e) DateTime dt = DateTime.Now; int secunde = dt.În al doilea rând; int minute = dt.Minute; int hour = dt.Hour; int year = dt.Year; // Timp dacă
