martedì 26 luglio 2011

Layout di pagina cambiando Utilizzando stati visivi

Nick Randolph passeggiate attraverso l'utilizzo stati visivi per modificare dinamicamente il layout delle pagine nella propria applicazione Windows Phone.

Una tipica applicazione Windows Phone è costituita da una serie di pagine attraverso le quali l'utente naviga. Tuttavia, ci sono momenti in cui non necessariamente vogliono passare a una nuova pagina in risposta ad una interazione con l'utente. Per esempio si potrebbe avere una pagina che visualizza le informazioni del profilo sull'utente, che include un pulsante di modifica. Quando l'utente fa clic sul pulsante edit, piuttosto che navigare a una pagina separata di modifica, l'applicazione potrebbe scambiare i controlli del display con controlli di modifica (ad esempio, sostituire gli elementi TextBlock con elementi TextBox che consentono all'utente di modificare il testo). Tale pagina ha due stati: uno per la visualizzazione di informazioni, l'altro per la modifica delle informazioni. Questi stati possono essere espresse come VisualStates in XAML e poi passato tra l'utilizzo del VisualStateManager.

In questa colonna, useremo un semplice esempio di una pagina che visualizza una foto. Quando l'utente clicca la foto sarà capovolto, rivelando informazioni sulla foto. Il codice XAML rilevanti per la foto e le informazioni corrispondenti sono le seguenti:

 immagine    

Attualmente questo XAML sovrappone le informazioni sulla foto, quindi abbiamo bisogno di creare due VisualStates che mostra sia la foto o delle informazioni. In Expression Blend aprire la pagina nella finestra di progettazione e di individuare la finestra Stati. Fare clic sul pulsante Aggiungi gruppo stato nell'angolo in alto a destra della finestra Stati PhotoStates e il nome del gruppo. Un VisualStateGroup è usato per VisualStates gruppo si escludono a vicenda.

Se guardate il controllo Button che ha in realtà due gruppi VisualState, CommonStates e FocusStates. Un pulsante può essere negli stati pressato e mirate, dato che questi stati appartengono a gruppi diversi. Tuttavia un pulsante non può essere in stato sia il normale e pressato, dal momento che entrambi questi stati appartengono al gruppo CommonStates.

Creeremo due VisualStates, foto e informazioni, facendo clic sul pulsante Aggiungi a fianco della statale appena creato VisualStateGroup e assegnando il VisualState un nome. Come si crea un nuovo VisualState noterete che la superficie progettista ottiene un bordo rosso (Figura 1). Questo indica che vi sono attualmente in modalità di registrazione a stato.Tutte le modifiche apportate al layout si applicherà solo allo stato che è attualmente selezionata. Lo stato selezionato è un proiettile rosso a fianco nella finestra Stati.

Figura 1.

Per uscire dalla modalità di registrazione dello stato, è possibile selezionare lo stato Base dalla finestra Stati o potete cliccare il puntino rosso in alto a sinistra dell'area di progettazione. Nella figura 1 si può anche vedere che il nodo PhotoInfoText ha un punto rosso contro di essa. Ciò indica che una o più proprietà su questo controllo sono stati modificati nello stato selezionato. In questo caso è la proprietà Visibility (indicato dal nodo figlio visibilità) che è stato impostato su Collapsed al fine di nascondere le informazioni di testo nello stato Photo. Al contrario, nello stato dell'informazione, l'elemento PhotoImage sarebbe crollata.

Se si esamina il codice XAML vedrete che le due VisualStates esistono e che costituiscono uno storyboard. Lo Storyboard definisce quali caratteristiche dovrebbe essere cambiato, il nuovo valore di queste proprietà e il tempo, o fotogramma chiave, a cui il cambiamento deve essere effettuato.

     < KeyTime DiscreteObjectKeyFrame = "0">   Collapsed         Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PhotoImage">    Collapsed         

Di transizione tra i due VisualStates, tutto quello che dovete fare è chiamare il metodo statico GoToState sulla classe VisualStateManager. I fili seguente codice di un gestore di eventi, l'evento MouseLeftButtonDown sul controllo PhotoImage, al fine di richiamare il metodo GoToState specificando il VisualState informazioni. Sovrascrive anche il metodo OnBackKeyPress al fine di intercettare l'hardware schiena tasto premuto, tornando al VisualState foto se l'è PhotoImage Collapsed (che si verifica quando la pagina è in stato di informazione).

Corso Visual Studio - Corsi Visual Studio
Corso .Net- Corso Dot.Net - Corso Vb.net
Corso C# - Corso PHP - Corso Joomla


MainPage pubblico () {InitializeComponent (); PhotoImage.MouseLeftButtonDown + = PhotoClick;} private void PhotoClick (o

Nessun commento:

Posta un commento