Applica lo stile e la risorsa tema ai controlli: Esercitazione sullo sviluppo delle app di Windows Phone - Parte 20

Nell`ultimo tutorial abbiamo imparato come applicare lo stile e la risorsa tema ai nostri controlli. Ora in questa parte della nostra serie di tutorial , continueremo a lavorare con stili e risorse e impareremo come applicare le risorse di colore di nostra scelta.

Cominciamo a lavorare con lo stesso progetto che abbiamo creato nell`ultimo tutorial con un pulsante. Seleziona quel pulsante e vai verso la finestra delle proprietà. Quando fai clic sul piccolo tasto freccia situato vicino alla proprietà in primo piano noterai che un`altra piccola finestra si apre con riquadri e linguette di colore diversi su di essa. Ci sono quattro piccole schede su quella piccola finestra vale a dire Pennello nullo, Pennello tinta unita, Pennello sfumato e Pennello immagine. Di default è impostato su pennello solido con colore bianco (RGB: 0,0,0 e canale trasparenza alfa impostato su 255). È possibile scegliere il colore desiderato spostando il cursore lungo la barra verticale e quindi il cursore circolare per selezionare la tonalità esatta. Puoi anche scegliere iDropper usando il quale puoi adottare il colore di uno qualsiasi degli strumenti disponibili. Ci sono molti modi per ottenere la modifica del colore su questo pennello a tinta unita.

Lo stesso vale per il Pennello sfumato. Svolge attività simili a quelle del pennello a tinta unita, ma offre poche opzioni aggiuntive. Ti dà una serie di fermate. È possibile utilizzare queste fermate in modo creativo per ottenere sfumature diverse tra il colore scelto. Puoi anche cambiare la trama del colore usando opzioni come il gradiente orizzontale e il gradiente verticale. Il pennello immagine ti consente di scegliere un`immagine come nostra risorsa. Puoi aggiungere un`immagine proprio come abbiamo aggiunto un`immagine nel controllo immagine.

Per ora, usa il pennello sfumato usando uno stop come l`ho fatto io (vedi immagine). Ora se vedi la finestra XAML, vedrai che un certo codice viene aggiunto alla finestra XAML per il pulsante.

Ora supponiamo, se vogliamo aggiungere lo stesso colore sfumato aggiunto per il nostro pulsante a tutti gli altri controlli sulla nostra pagina, Come lo facciamo? Per quello vai in foreground property dove impostiamo il funky color gradient brush e fai clic con il tasto destro su di esso e seleziona "Extract value to resource". Si aprirà una piccola finestra popup "Crea risorsa". Puoi nominare la risorsa come vuoi o puoi lasciare così com`è. Quindi puoi scegliere dove vuoi salvarlo, a seconda di dove vuoi usare questa risorsa. Se vuoi usarlo su una singola pagina, seleziona MainPage.xaml altrimenti scegli App.xaml e fai clic su Ok.

Ora trascina un altro pulsante sulla superficie del designer e vai alla proprietà in primo piano. Ora troverai la nostra risorsa personalizzata sotto il nome di risorse locali. Una volta cliccato, vedrai il secondo pulsante con lo stesso colore del primo. Cosa succede se ci sono più proprietà che vogliamo applicare al nostro controllo? Possiamo farlo usando gli stili. Uno stile è una collezione di coloni. Cerchiamo di creare un nuovo stile ora. Prima cancella tutte le modifiche che abbiamo fatto nell`ultimo esempio e ottieni un nuovo pulsante per un nuovo inizio. Incolla il seguente codice sotto le dichiarazioni xmlsns.

In questo codice, abbiamo creato due proprietà setter per cambiare il colore del bordo e del primo piano. Successivamente, vai al codice del pulsante e aggiungi questo bit di codice:

Style = "{StaticResource myStyle}".

Noterai che il colore del bordo del pulsante e il colore di primo piano diventano rossi.

Ora se vuoi per applicare questo stile all`intera applicazione, tagliare il codice tra il. Apri il file App.xaml e incollalo tra i tag delle risorse dell`applicazione. Ora, se torni indietro e controlli il pulsante, vedrai che quel pulsante mostra ancora il colore rosso.

Quindi questo è tutto su Stili e risorse in Windows Phone 7.5. Nel prossimo capitolo impareremo come navigare tra le pagine xaml.