Come parte della nostra serie di tutorial per Windows Phone, ora impareremo a creare gli elementi dell'interfaccia utente per HelloPhone applicazione. L'applicazione è molto semplice. Al termine, l'interfaccia utente dell'applicazione conterrà una didascalia, una casella di testo e un pulsante.
Per utilizzare l'applicazione, inserisci del testo nella casella di testo e poi, quando fai clic sul pulsante, l'applicazione visualizza un banner con il testo che hai digitato. Assomiglierà alla figura seguente.
1. In Esploratore di soluzioni, doppio click MainPage.xaml per aprire questo file nel designer.
Il progettista fornisce due viste separate per modificare i file XAML, Design e XAML vista. In modalità Progettazione, si dispone di un progetto di emulazione in cui è possibile trascinare i controlli dalla casella degli strumenti, nonché selezionare, ridimensionare, spostare e impostare le proprietà per i controlli esistenti. In modalità XAML, hai un editor di markup che ti consente di modificare il codice XAML nella pagina. Puoi lavorare con una delle due modalità. Hai anche una modalità divisa, con la finestra dell'editor che mostra entrambe le viste contemporaneamente.
2. In questo compito ci concentriamo principalmente sulla modifica manuale di XAML. Una volta terminata la parte di codifica, puoi tornare alla vista del designer per vedere i risultati. Puoi anche avere una vista XAML a schermo intero.
3. Nel markup XAML generato dal modello di applicazione Windows Phone predefinito, individuare il file Griglia elemento del contenitore chiamato LayoutRoot. Il suo scopo è di organizzare gli elementi sulla pagina. Al suo interno RowDefinition proprietà, inserire una riga aggiuntiva tra le due righe esistenti e impostarne il valore Altezza proprietà a Auto. Questa riga includerà presto una casella di testo e un pulsante.
4. Radice Griglia l'elemento contiene anche alcuni elementi nidificati con ognuno assegnato a una diversa riga della griglia esterna definendo a Grid.Row proprietà. Ora trova l'elemento Grid chiamato TitleGrid e Impostare la proprietà text del primo elemento di blocco di testo all'interno della griglia interna su " Windows Phone 7 Series ". allo stesso modo Ciao telefono viene aggiunto al prossimo blocco di testo.
5. Ora, trova il Griglia elemento chiamato ContentGrid, assegnalo alla riga 1, che in genere è inizialmente vuoto e incolla il seguente markup XAML all'interno di questo elemento.
6. Per completare il design della pagina, aggiungi una terza riga per contenere il banner con il messaggio inserito dall'utente. Per creare questa riga, inserisci il seguente markup XAML immediatamente prima del tag di fine della griglia esterna.
7. Fare clic sul Design visualizzare ed esaminare il layout dei controlli sulla pagina.
Nel nostro prossimo tutorial impareremo come "Gestisci gli eventi dall'interfaccia utente".
