Esercitazione: Usare Grid e StackPanel per creare una semplice app meteo

Usa XAML per creare il layout per una semplice app meteo usando gli elementi Grid e StackPanel . Con questi strumenti è possibile creare app di grande aspetto che funzionano su qualsiasi dispositivo che esegue Windows. Questa esercitazione richiede 10-20 minuti.

API importanti: classe Grid, classe StackPanel

Prerequisiti

• Windows 10 e Microsoft Visual Studio 2015 o versione successiva. (Visual Studio più recente consigliato per gli aggiornamenti correnti per lo sviluppo e la sicurezza) Installare gli strumenti per il Windows App SDK.
• Conoscenza di come creare un'app "Hello World" di base usando XAML e C#. Se non l'hai ancora fatto, clicca qui per scoprire come creare un'app "Hello World".

Passaggio 1: Creare un'app vuota

1. Nel menu di Visual Studio selezionare File>Nuovo progetto.
2. Nel riquadro sinistro della finestra di dialogo Nuovo progetto selezionare Visual C#>Windows>Universale o Visual C++>Windows>Universale.
3. Nel riquadro centrale, selezionare Applicazione vuota.
4. Nella casella Nome, immettere WeatherPanele selezionare OK.
5. Per eseguire il programma, selezionare Debug>Avvia debug dal menu o selezionare F5.

Passaggio 2: Definire una griglia

In XAML una griglia è costituita da una serie di righe e colonne. Specificando la riga e la colonna di un elemento all'interno di un oggetto Grid, è possibile posizionare e spaziare altri elementi all'interno di un'interfaccia utente. Le righe e le colonne vengono definite con gli elementi RowDefinition e ColumnDefinition.

Per iniziare a creare un layout, aprire MainPage.xaml usando Esplora Soluzionie sostituire l'elemento Grid generato automaticamente con questo codice.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

La nuova griglia crea un set di due righe e colonne, che definisce il layout dell'interfaccia dell'app. La prima colonna ha una larghezza pari a "3*", mentre la seconda ha "5*", dividendo lo spazio orizzontale tra le due colonne con un rapporto di 3:5. Allo stesso modo, le due righe hanno rispettivamente un valore Height pari a "2*" e "*", quindi grid alloca due volte più spazio per la prima riga come per il secondo ("*" è uguale a "1*"). Questi rapporti vengono mantenuti anche se la finestra viene ridimensionata o il dispositivo viene modificato.

Per informazioni su altri metodi di ridimensionamento di righe e colonne, vedere Definire layout con XAML.

Se esegui l'applicazione ora, vedrai solo una pagina vuota, perché nessuna delle aree della "Griglia" contiene contenuti. Per visualizzare la Griglia , aggiungiamo un po' di colore.

Passaggio 3: Colora la griglia

Per colorare la griglia aggiungiamo tre elementi Border , ognuno con un colore di sfondo diverso. Ogni oggetto viene assegnato anche a una riga e a una colonna nella griglia padre Grid utilizzando gli attributi Grid.Row e Grid.Column. I valori di questi attributi per impostazione predefinita sono 0, quindi non è necessario assegnarli al primo border. Aggiungere il codice seguente all'elemento Grid dopo le definizioni di riga e colonna.

<Border Background="#2f5cb6"/>
<Border Grid.Column ="1" Background="#1f3d7a"/>
<Border Grid.Row="1" Grid.ColumnSpan="2" Background="#152951"/>

Si noti che per il terzo Border si utilizza un attributo aggiuntivo, Grid.ColumnSpan, che fa estendere questo Border su entrambe le colonne nella riga inferiore. È possibile usare Grid.RowSpan nello stesso modo e, insieme, questi attributi consentono di estendere un elemento su un numero qualsiasi di righe e colonne. L'angolo superiore sinistro di tale intervallo è sempre il Grid.Column e Grid.Row specificato negli attributi dell'elemento.

Se si esegue l'app, il risultato avrà un aspetto simile al seguente.

Passaggio 4: Organizzare il contenuto usando gli elementi StackPanel

StackPanel è il secondo elemento dell'interfaccia utente che useremo per creare l'app meteo. StackPanel è una parte fondamentale di molti layout di app di base, consentendo di impilare gli elementi verticalmente o orizzontalmente.

Nel codice seguente, vengono creati due elementi StackPanel e ciascuno viene riempito con tre TextBlocks. Aggiungere questi elementi StackPanel al Grid sotto gli elementi Border del passaggio 3. In questo modo gli elementi TextBlock vengono visualizzati sopra la griglia colorata precedentemente creata.

<StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="Today - 64° F"/>
    <TextBlock Foreground="White" FontSize="25" Text="Partially Cloudy"/>
    <TextBlock Foreground="White" FontSize="25" Text="Precipitation: 25%"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal"
            HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="High: 66°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Feels like: 63°"/>
</StackPanel>

Nel primo Stackpanel, ogni TextBlock stack verticalmente sotto il successivo. Questo è il comportamento predefinito di uno StackPanel, quindi non è necessario impostare l'attributo Orientation. Nel secondo StackPanel, vogliamo che gli elementi figlio vengano disposti orizzontalmente da sinistra a destra, quindi impostiamo l'attributo Orientation su "Horizontal". È inoltre necessario impostare l'attributo Grid.ColumnSpan su "2", in modo che il testo sia centrato sul Border inferiore.

Se si esegue l'app ora, verrà visualizzata una schermata simile alla seguente.

Passaggio 5: Aggiungere un'icona di immagine

Compilare infine la sezione vuota nel Grid con un'immagine che rappresenta il tempo di oggi, ovvero qualcosa che dice "parzialmente nuvoloso".

Scarica l'immagine seguente e salvala come PNG denominata "parzialmente nuvoloso".

Nell'Esplora Soluzioni , fare clic con il pulsante destro del mouse sulla cartella Assets, e selezionare Aggiungi ->elemento esistente... Trova partially-cloudy.png nel browser visualizzato, selezionarlo e quindi fare clic su Aggiungi.

Quindi, in MainPage.xamlaggiungere l'elemento Image seguente sotto i StackPanels del passaggio 4.

<Image Margin="20" Source="Assets/partially-cloudy.png"/>

Poiché si vuole che l'oggetto Image sia nella prima riga e nella prima colonna, non è necessario impostare i relativi attributi Grid.Row o Grid.Column, consentendo di mantenere l'impostazione predefinita a "0".

E questo è tutto! Hai creato con successo il layout per una semplice applicazione meteo. Se si esegue l'applicazione premendo F5, verrà visualizzato un risultato simile al seguente:

Se vuoi, prova a sperimentare con il layout precedente ed esplora i diversi modi in cui potresti rappresentare i dati meteo.

Articoli correlati

• Per un'introduzione alla progettazione di layout di app di Windows, vedi silhouette delle app di Windows
• Per informazioni sulla creazione di layout reattivi che si adattano a diverse dimensioni dello schermo, vedi Definire layout di pagina con XAML