Un piccolo serpente ci conduce attraverso le principali caratteristiche del Windows Phone 7
Introduzione Core UI & Design Conclusione Premi Discussioni
Marcosroom.it Didatticando

Pulsante rotondo e luminoso

Comunque, è giunto il momento di tornare al nostro gioco. Iniziamo dal menu principale!

Main menu of the game

Come puoi vedere, questo è un menu composto da 3 elementi (gli altri sono inutili): il primo, "Continua", è utilizzato per ripristinare il gioco corrente; "Nuovo gioco" cancella tutti i dati e riavvia un nuovo gioco; "Impostazioni", invece, naviga nella pagina di modifica delle configurazioni.

Ogni elemento è un Button che ho ritemplato per modificarne l'aspetto. Ho utilizzato Microsoft Expression Blend 4 For Windows Phone per raggiungere questo risultato (questo strumento è incluso nei Windows Phone 7 Developer Tools), e questo è il procedimento che ho utilizzato. Premetto che non sono un designer, sono solo un programmatore che racconta le proprie esperienze con Blend, quindi, se vuoi suggerirmi come migliorare le mie capacità di designer, ogni consiglio è il benvenuto!

Se non riesci a leggere tutto nelle immagini, clicca su di esse per ingrandirle.

  1. Crea un nuovo progetto e aggiungi un nuovo Button alla pagina principale. Fai click con il tasto destro del mouse sul bottone e seleziona Edit Template > Create Empty

    Making a rounded glowing button with Blend

  2. Nella finestra seguente, crea un nuovo dizionario con il nome "RoundedGlowingButton.xaml" e imposta il nome della risorsa a  "RoundedGlowingButton".

    Making a rounded glowing button with Blend

  3. Ora, stai modificando il template del bottone. Aggiungi un nuovo ellisse che riempia tutta l'area disponibile, poi rimuovi il bordo e collega la sua proprietà Fill alla proprietà Background del templated parent (Template binding > Background).

    Making a rounded glowing button with Blend

  4. Duplica l'ellisse e cambia la sua proprietà Fill: imposta un radial brush da bianco a trasparente.

    Making a rounded glowing button with Blend

  5. Seleziona lo strumento Gradient e modifica il brush per ottenere qualcosa simile a questo (deve sembrare che la luce venga dal basso).

    Making a rounded glowing button with Blend

  6. Duplica nuovamente l'ellisse e cambia Fill a bianco, e Opacity a 20%.

    Making a rounded glowing button with Blend

  7. Clicca con il tasto destro sull'ultimo ellisse e convertilo in una Path (Path > Convert to Path).

    Making a rounded glowing button with Blend

  8. Seleziona lo strumento Direct Selection e cambia i punti della path per farli somigliare a questi.

    Making a rounded glowing button with Blend

  9. Ora è il momento di visualizzare il contenuto del bottone: fra gli altri assets, scrivi "content" nella casella di ricerca e seleziona il controllo ContentPresenter.

    Making a rounded glowing button with Blend

  10. Aggiungi un nuovo ContentPresenter e centralo orizzontalmente e verticalmente, poi collega la proprietà Content alla proprietà Content del templated parent.

    Making a rounded glowing button with Blend

  11. Duplica ancora una volta il primo ellisse e posizionalo sullo sfondo (dietro tutti gli altri), poi ingrandiscilo leggermente con una scalatura di 1.5.

    Making a rounded glowing button with Blend

  12. Cambia lo sfondo in una sfumatura radiale da bianco a trasparente, poi seleziona lo strumento Gradient e imposta l'interruzione bianca sul bordo del bottone, a l'altra un po' più lontana.

    Making a rounded glowing button with Blend

  13. Ora, la parte più complessa è finita! Ma cosa accadrebbe se volessimo aggiungere delle animazioni? Non penso sia una brutta idea! Quindi seleziona la scheda States e imposta la durata della transizione di default a 0.1 secondi; clicca sulla freccia vicino "Pressed" e seleziona * > Pressed.

    Making a rounded glowing button with Blend

  14. Ora clicca "Pressed". Come puoi vedere l'intera area di disegno ha acquisito un bordo rosso: ciò significa che Blend sta registrando i cambiamenti da trasformare in storyboard, cioè, in questo modo, ogni cambiamento che facciamo, viene trasformato in storyboard, la quale inizia quando il bottone viene messo nello stato selezionato ("Pressed" nel nostro caso). In altre parole, quando clicchiamo sul bottone, viene riprodotta una storyboard che riapplica tutti i cambiamenti che abbiamo fatto utilizzando Blend. Se vuoi vedere un'anteprima di questa storyboard, puoi attivare l'opzione Transition preview e selezionare diversi stati: Blend automaticamente avvia queste storyboard e puoi vedere i loro effetti direttamente nell'area di disegno. Comunque, ora che hai selezionato lo stato Pressed, seleziona l'ellisse InnerGlow e cambia il primo gradient stop del riempimento a #FF3D71D8 (o qualunque altro colore).

    Making a rounded glowing button with Blend

 

Condividi
Indietro Tutti i webmaster che volessero segnalare, non copiare,
il contenuto di questa pagina sul proprio sito, possono farlo liberamente.
E' gradito un preavviso tramite mail all'autore e l'iserimento,
nella pagina di citazione, di un link verso la pagina corrente.
© Copyright    Marco's Room
Avanti
Download SnakeMobile

Scaricato 115 volte

Navigazione Transizioni Pulsante rotondo luminoso Trigger Un piccolo ripasso di matematica Selettore circolare Isolated storage: file e impostazioni Impostazioni Build action: Content o Resource? Audio & XNA