Share
In questo tutorial ti mostrerò come creare un'app di orologio dall'aspetto interessante per Windows Phone 7. Expression Blend verrà utilizzato per progettare questa app in quanto è uno strumento molto potente per la creazione rapida di animazioni coinvolgenti.
Per seguire il tutorial è necessario scaricare e installare l'SDK di Windows Phone 7. Dopo aver terminato l'installazione, si finirà con Visual Studio Express per Windows Phone 7, Expression Blend per Windows Phone 7 e Windows Phone Emulator.
Il primo passo è scaricare e installare l'SDK di Windows Phone 7.5.
Prima di iniziare, ecco l'immagine finale di ciò che costruiremo.
L'app stessa è un'app di orologio molto semplice che mostra l'ora e la data. Useremo l'animazione per introdurre gli elementi all'avvio dell'applicazione. La maggior parte del lavoro sarà mettere insieme gli elementi dello schermo e allinearli correttamente e creare l'animazione di avvio. Aggiungiamo anche un po 'di codice per aggiornare periodicamente la data e l'ora.
Innanzitutto, è necessario creare un progetto in Expression Blend. Per fare ciò, sarà necessario selezionare File> Nuovo progetto in Expression Blend e selezionare il modello di progetto dell'applicazione Windows Phone.
Fornisci un nome per il tuo progetto. userò MinimalClock per il mio progetto.
Una volta creato il progetto, selezionare Progetto> Esegui progetto per eseguire il tuo progetto. Si noterà che il progetto viene compilato e quindi Blend avvia l'emulatore di Windows Phone 7. Prima o poi, vedrai la tua app in esecuzione nell'emulatore. Premi il pulsante home sull'emulatore per uscire dalla tua app. In questo modo si interrompe la sessione di debug e si arriva alla schermata principale del proprio emulatore. Una volta che hai finito di guardarti intorno nell'emulatore, torna a Expression Blend.
Ora metteremo l'interfaccia utente per l'app MinimalClock. Dopo che il progetto è stato creato, lo vedrai nel tuo Expression Blend:
Per prima cosa, dobbiamo rimuovere tutti i controlli che sono stati creati dal modello di progetto per noi. Nel Oggetti e cronologia, tasto destro del mouse sul TitlePanel e scegliere Elimina rimuovere il controllo.
Abbiamo anche bisogno di cambiare il tipo di layout in Canvas anziché Grid, in modo da poter spostare liberamente i nostri controlli. Per fare ciò, fare clic con il tasto destro del mouse su ContentPanel e selezionare Tela nel Cambia il tipo di layout menu.
Una volta finito, il tuo Oggetti e cronologia dovrebbe assomigliare a questo.
E la pagina dell'applicazione dovrebbe essere vuota in questo modo:
alt = "Pagina applicazione vuota"Ora abbiamo la pagina dell'applicazione vuota e siamo pronti per iniziare ad aggiungere controlli ad essa.
Nel menu della barra degli strumenti, selezionare il Strumento di testo e TextBlock. Disegna un rettangolo sulla pagina dell'applicazione in qualsiasi dimensione. Fisseremo la dimensione più tardi.
Questo sarà il TextBlock che useremo per visualizzare l'ora parte del tempo, quindi dovremo rinominarlo in TimeHour. Dovremo anche cambiarlo leggermente più grande.
Sul lato destro, trova la finestra delle proprietà. Assicurati che il TextBlock appena creato sia selezionato e modifichi il suo nome in TimeHour e colpisci accedere.
Successivamente, sarà necessario modificare il contenuto del file TimeHour controllo, quindi vai alla proprietà Text e modifica il suo valore a 12. Quindi premi accedere. Un modo più rapido per trovare qualsiasi proprietà nella scheda delle proprietà è utilizzare l'area di ricerca e iniziare a digitare il nome della proprietà. Fai attenzione a cancellare la casella di ricerca dopo aver completato la modifica della proprietà, poiché tutte le altre proprietà rimarranno nascoste dalla ricerca.
Successivamente, creeremo uno stile per il nostro controllo TimeHour. Gli stili sono una raccolta di proprietà visive che possono essere applicate a un determinato tipo di controllo. Salveremo molto lavoro con gli stili. Questo può essere fatto facendo clic con il tasto destro sul controllo stesso nel Oggetti e cronologia tavolozza e navigare verso Modifica stile menu e selezionare Crea vuoto
Successivamente, dobbiamo dare il nome dello stile: TimeTextStyle, e quindi assicurati di selezionare Questo documento dove verrà definito lo stile.
Dopo aver creato lo stile, ci ritroveremo nell'editor di stile. Lo riconoscerai guardando la finestra dell'editor
Nel riquadro delle proprietà, modificare quanto segue. Fai una ricerca Font nel Ricerca di proprietà campo, ma non dimenticare di cancellarlo in seguito per mostrare le altre proprietà.
Dovrai anche modificare il file Altezza e Larghezza a Auto nel nostro stile, facendo clic sul piccolo simbolo della freccia incrociata accanto al campo delle dimensioni.
Ora abbiamo finito di modificare il nostro stile, quindi possiamo lasciare la modalità di modifica dello stile cliccando sull'etichetta TimeHours sulla parte superiore della nostra superficie di progettazione.
Ora, abbiamo bisogno di un altro TextBlock per mostrare i minuti per l'ora corrente e un altro per mostrare i punti tra loro. Per questo, selezionare il TimeHours sul Oggetti e cronologia e premere Ctrl-C per copiare e premere due volte Ctrl-V per creare due copie. Finirai con questo nel tuo Oggetti e cronologia pannello.
Dovrai apportare le seguenti modifiche:
Ora abbiamo tutti i blocchi di testo di cui abbiamo bisogno per visualizzare il tempo. Tutto ciò di cui abbiamo bisogno è di allinearli e metterli un po 'più lontano l'uno dall'altro.
Innanzitutto, dovrai selezionare tutti e tre i controlli nel Oggetti e cronologia tavolozza e fare clic destro su di loro, selezionare Allineare e Centri verticali.
Dovrai inserire un bit di spaziatura tra gli elementi del tempo. Per spostare gli elementi con precisione, puoi usare i tasti freccia. Se si utilizzano i tasti freccia, il controllo si sposterà di un pixel nelle direzioni specificate e se si utilizza la freccia con il tasto Maiusc, il controllo verrà spostato di 10 pixel.
Seleziona il blocco di testo TimeHours nella tavolozza Ojects and Timeline e spostalo di 5 pixel a sinistra. Seleziona il riquadro di testo TimeMinutes e premi la freccia destra cinque volte per spostarlo a destra di 5 pixel. Una volta, hai finito, finirai con qualcosa di simile.
Infine, avremo bisogno di combinare gli elementi in un unico controllo, quindi sarà più facile manipolarli in seguito.
Per fare questo è necessario selezionare tutto TimeHours, TimeDots e TimeMinutes sul Oggetti e cronologia tavolozza. Fare clic con il tasto destro sugli elementi selezionati e scegliere Gruppo in e Tela.
Fare doppio clic sul nuovo creato [Tela] elemento e rinominarlo TimeText. Ora la struttura dell'oggetto dovrebbe essere simile a questa.
Infine, aggiungeremo due barre. Uno verticale e uno orizzontale per rendere l'interfaccia utente un po 'più interessante. Aggiungeremo anche il nome dell'app.
Innanzitutto, assicurati che ContentPanel è selezionato su Oggetti e cronologia tavolozza, quindi selezionare il Rettangolo sulla barra degli strumenti o utilizzare il suo shortcode M. Disegna un rettangolo orizzontale appena sopra il controllo TimeText. Successivamente, sarà necessario modificare le proprietà di questo rettangolo. Assicurati che il tuo rettangolo sia selezionato e sul Proprietà tavolozza cambia il seguente:
Ora stiamo andando a modificare la proprietà di riempimento del HorizontalSpearator a uno degli stili integrati chiamati PhoneAccentBrush. Questo riutilizzerà il colore dell'accento del tema selezionato corrente. Con questa modifica l'applicazione riutilizzerà il colore primario del tema corrente.
Per cambiare il riempimento, selezionare HorizontalSeparator e individuare l'ultima scheda sull'editor dei colori chiamato Spazzolare le risorse. Quindi selezionare il PhoneAccentBrush dalla lista.
Inoltre, abbiamo bisogno di impostare il Ictus proprietà di HorizontalSeparator a Nessun pennello. Puoi farlo selezionando Ictus proprietà appena sotto il Spazzola proprietà e quindi selezionare la prima scheda sull'editor dei colori.
Abbiamo bisogno di una seconda barra chiamata barra orizzontale. Per questo, ancora una volta selezionare il Rettangolo strumento o hit M per selezionarlo. Disegna un rettangolo appena sotto il TimeText controllare e impostare le seguenti proprietà.
Questi separatori supereranno i limiti dello schermo, ma questo è inteso. Dovrai posizionare i separatori attorno alla parte Time in questo modo:
Ora dobbiamo aggiungere il titolo dell'applicazione. Seleziona il TextBlock strumento dal Utensili tavolozza o stampa T. Disegnare un TextBlock appena sopra il HorizontalSeparator e modificare le seguenti proprietà.
Questo è come dovrebbe essere ora:
Per creare i secondi è necessario aggiungere un nuovo TextBlock alla pagina dell'applicazione. Seleziona lo strumento TextBlock dalla palette Strumenti o premi il tasto T.
Disegna un TextBlock appena sotto il Tempo e imposta le seguenti proprietà:
Quindi definiremo uno stile per questo elemento e in seguito riutilizzeremo questo stile per la formattazione delle etichette del giorno.
Per creare un nuovo stile seleziona il SecondsLabel sulla superficie del disegno, fare clic con il tasto destro su di esso e in Modifica stile menu, scegliere Crea vuoto.
Dare SmallTextStyle come nome dello stile e fai clic sul pulsante OK per creare lo stile.
Successivamente, ti troverai nell'editor di stile. Modifica la seguente proprietà:
Inoltre, imposta il margine superiore e inferiore su 2 pixel.
È possibile abbandonare la modalità di modifica dello stile facendo clic su SecondsLabel nell'area in alto a sinistra sulla superficie del disegno.
Disegna un secondo TextBlock sotto SecondsLabel e cambia le proprietà in questo modo:
Con tutte le modifiche la pagina dell'applicazione del telefono dovrebbe assomigliare a questa:
Ora siamo pronti per creare la parte che visualizzerà la data corrente. Per questo selezionare nuovamente il TextBlock strumento o premere il T chiave per accedervi rapidamente.
Disegna un TextBlock appena sopra il controllo HorizontalSeparator e modifica le sue proprietà come segue:
Ecco come appare la pagina dell'applicazione dopo aver aggiunto DateText.
Infine, creeremo il controllo responsabile della visualizzazione dei giorni. Avremo bisogno di sette TextBlock per visualizzare ogni giorno della settimana. Sarà necessario aggiungere il m uno per uno. Seleziona il TextBlock strumento dalla tavolozza degli strumenti o premere il tasto T chiave e posizionare tutti i blocchi di testo sul lato destro di VerticalSeparator.
Lunedi
martedì
mercoledì
giovedi
Venerdì
Sabato
Domenica
Per ciascun blocco di testo del giorno cambia lo stile facendo clic con il pulsante destro del mouse su uno dei controlli, uno alla volta, quindi seleziona Modifica stile menu e quindi scegliere il Applica risorsa. Seleziona stile SmallTextStyle che abbiamo definito in precedenza.
alt = "Selezione di SmallTextStyle" title = "Selezione di SmallTextStyle" /> Dopo questo dobbiamo organizzare i blocchi di testo come mostrato nello screenshot qui sotto.
Se i giorni non sono allineati correttamente, selezionali tutti nel Oggetti e cronologia tavolozza, fare clic destro e selezionare Bordi Sinistri a partire dal Allineare menu.
Quindi dobbiamo combinare i giorni in un nuovo contenitore, in modo che possiamo manipolarli più facilmente in seguito. Con tutti i giorni selezionati, fai clic con il tasto destro su di essi e seleziona StackPanel dal Gruppo in menu.
Fare doppio clic sul newlz creato [StackPanel] elemento e cambiare il suo nome in giorni feriali.
Abbiamo un ultimo passaggio per completare la fase di progettazione dell'interfaccia utente e per ottenere l'aspetto pianificato della nostra applicazione. Abbiamo bisogno di ruotare leggermente la nostra intera interfaccia utente.
Per questo, selezionare il ContentPanel nel Oggetti e cronologia tavolozza e poi vai al Proprietà e cambiare e nel Trasformare gruppo di proprietà, modificare il Angolo di rotazione a -30 gradi.
Dopo aver guardato lo schermo ruotato, notiamo che gli elementi dello schermo sono leggermente spenti. Devono essere riposizionati per sembrare più belli quando ruotati.
Abbiamo bisogno di cambiare la posizione del DateText e il ApplicationTitle. Dovrai modificare le seguenti proprietà:
Puoi anche selezionare il controllo che desideri riposizionare e utilizzare i tasti freccia per spostarti leggermente tra i controlli pixel per pixel e utilizzare il tasto Maiusc con i tasti freccia per spostarli di circa 10 pixel alla volta.
Ora che tutti i controlli sono a posto, l'interfaccia utente è completa e le animazioni possono essere aggiunte.
### Scheda Dispositivo
Nello screenshot iniziale puoi vedere che le linee di separazione sono rosse, ma nel mio screenshot sono blu. Questo accade perché il dispositivo ha un diverso colore di accento. È possibile modificare il tema del dispositivo, facendo clic su Dispositivo scheda proprio accanto al Progetto scheda. Qui potrai modificare l'orientamento del dispositivo, applicare diversi colori di accento e vedere come appare l'applicazione se viene selezionato il tema scuro o chiaro. Ti incoraggio a giocare un po 'con le impostazioni.
Successivamente, creeremo l'animazione iniziale che verrà riprodotta all'avvio dell'applicazione. L'animazione sposta i controlli TimeText, WeekDays, TimeSeconds, DateText nella posizione iniziale.
Le animazioni in Expression Blend si basano sulla creazione di fotogrammi chiave e quindi sulla modifica di determinate proprietà in tale fotogramma chiave. Questo dirà al sottosistema di animazione che la proprietà deve essere animata e il valore dovrebbe essere specificato nel frame chiave. Ad esempio, se crei un fotogramma chiave a 1 secondo per TimeText e quindi cambi la posizione e l'opacità del controllo, queste proprietà verranno animate.
Innanzitutto, è necessario creare un nuovo storyboard nel Oggetti e cronologia tavolozza premendo il + pulsante.
Fornisci il nome InitialAnimation per il tuo nuovo storyboard e clicca Ok per crearlo.
Ora che abbiamo creato lo storyboard, vedrai qualcosa di simile nella tavolozza Oggetti e Timeline. Sul lato sinistro vedrai che il nostro storyboard chiamato InitialAnimation è selezionato e il piccolo led rosso indica che la registrazione è attiva. Ciò significa che se modifichiamo qualsiasi proprietà di qualsiasi controllo farà parte dello storyboard invece di cambiare l'interfaccia utente.
Sul lato sinistro della palette è possibile vedere la parte della timeline. Qui puoi andare avanti o indietro nel tempo e puoi aggiungere fotogrammi chiave. Successivamente, animeremo TimeText e la sua proprietà Opacity. Animeremo la proprietà Opacity dallo 0 percento al 100 percento in 1 secondo. Per fare ciò, seleziona TimeText nella palette Oggetti e Timeline e assicurati che l'indicatore di riproduzione sia a 0 secondi e fai clic sul Registra fotogramma chiave pulsante.
Il risultato sarà che un nuovo fotogramma chiave viene aggiunto per Timetext a 0 secondi. Noterai anche che un piccolo punto rosso viene aggiunto a TimeText, questo significa che InitialAnimation sta cambiando questo controllo.
Ora, dovrai andare al Proprietà tavolozza e cambia il Opacità di TimeText essere 0 per cento.
Successivamente, dovrai spostare l'indicatore di riproduzione a 1 secondo e fare clic sul fotogramma chiave Registra.
Poi di nuovo, vai al Proprietà tavolozza e cambia il Opacità di TimeText a 100 per cento.
L'animazione è ora pronta e puoi osservarla facendo clic sul pulsante Riproduci:
È possibile spostarsi tra i fotogrammi chiave, se si desidera modificare l'animazione.
Seleziona il 0 secondo fotogramma chiave a partire dal TimeText. Cambia temporaneamente il Opacità proprietà al 95 percento, così puoi vedere cosa stai facendo. Poi un paio di volte ha colpito il Maiusc e freccia sinistra combinazione chiave. Con questo, ti trasferirai TimeText dallo schermo. Questa sarà la posizione di partenza del nostro movimento. Non dimenticare di cambiare il Opacità proprietà a 0 per cento.
Seleziona i 1 secondi fotogramma chiave di TimeText allora dovrai fare quanto segue. Hit una volta il freccia destra tasto sulla tastiera - spostando il controllo di 1 pixel verso destra - e poi premete il tasto freccia sinistra una volta - spostando il controllo di 1 pixel verso sinistra. Con questo cambiamento registreremo essenzialmente la posizione corrente del nostro controllo TimeText e istruiremo lo storyboard a spostarlo in questa posizione, indipendentemente dalla posizione iniziale.
Prova a riprodurre l'animazione. Se tutto ha funzionato, dovresti vedere il TimeText entrare nello schermo e apparire gradualmente allo stesso tempo.
Un'altra cosa che possiamo fare per rendere più vivace l'animazione è configurare l'andamento per l'animazione. Ciò renderà l'animazione più naturale. Per questo, selezionare il 1s cornice chiave della nostra animazione. Quindi cambia il Funzione di alleggerimento proprietà a Indietro InOut sul Proprietà tavolozza.
Riproduci l'animazione ancora una volta per mostrare come si comporta ora l'animazione. Se lo desideri, modifica l'andamento per vedere come si comporta ciascuna funzione di andamento.
Successivamente, animeremo TimeSeconds, il controllo utilizzato per visualizzare la parte dei secondi dell'ora corrente. Per questo, selezionare TimeSeconds e aggiungi i fotogrammi chiave alla timeline a 0 secondi e a 1 secondi. Quindi fai quanto segue:
Seleziona il secondo fotogramma chiave di TimeSeconds
Infine, avremo bisogno di animare i controlli che sono responsabili della visualizzazione della data e dei giorni correnti nell'applicazione. Queste animazioni saranno semplici e animeranno l'opacità di questi controlli dallo 0 percento al 100 percento.
. Cambia l'opacità al 100 percento.
Seleziona il controllo DateText nel Oggetti e cronologia tavolozza e aggiungi un fotogramma chiave a 0 secondi.
. Un'ultima cosa da fare è uscire dalla modalità di animazione e cambiare l'opacità a 0 per tutti i controlli che stiamo animando nel InitialAnimation storyboard. Chiudi lo storyboard in Oggetti e cronologia tavolozza facendo clic sul X pulsante accanto al nome della scheda dello storyboard.
Quindi seleziona ciascuno dei controlli animati e imposta le loro proprietà di opacità a 0 percento.
Ora che l'animazione è terminata, è necessario aggiungere un po 'di codice per aggiornare lo schermo, quindi il contenuto del nostro schermo viene aggiornato ogni secondo e per avviare la nostra animazione iniziale quando viene caricata la schermata dell'applicazione.
Ora l'applicazione è quasi finita. Tutto quello che dobbiamo fare è aggiungere un po 'di codice per aggiornare lo schermo ogni mezzo secondo e riprodurre la nostra animazione iniziale.
Per aggiornare periodicamente lo schermo, a DispatchTimer deve essere creato al termine del caricamento della pagina. Per questo, è necessario creare un gestore eventi per l'evento caricato pagina.
Per prima cosa, seleziona la pagina dell'applicazione da Oggetti e cronologia tavolozza.
Quindi sul Proprietà tavolozza selezionare il eventi linguetta.
Nell'elenco degli eventi, selezionare il Caricato evento e doppio click per creare il gestore di eventi. Una nuova finestra con il codice dietro per la nostra pagina dell'applicazione.
Innanzitutto, il timer di spedizione deve essere definito nel file di classe (MainPage.xaml.cs). Un'istruzione "using" deve essere aggiunta subito dopo l'ultimo utilizzo di stement nella parte superiore del file di classe.
Accentsconagua
using System.Windows.Threading; Quindi aggiungi la riga seguente subito dopo la definizione della classe:
private DispatcherTimer _timer; Nell'evento Loaded aggiungi le seguenti linee di codice:
RefreshUI (questo, null); Storyboard sb = (Storyboard) this.Resources ["IntialAnimation"]; sb.BeginTime = TimeS
