Lernprogramm: Verwenden von Grid und StackPanel zum Erstellen einer einfachen Wetter-App

Verwenden Sie XAML zum Erstellen des Layouts für eine einfache Wetter-App mithilfe der Grid- und StackPanel-Elemente . Mit diesen Tools können Sie ansprechende Apps erstellen, die auf jedem Gerät unter Windows funktionieren. Dieses Lernprogramm dauert 10-20 Minuten.

Wichtige APIs: Grid-Klasse, StackPanel-Klasse

Voraussetzungen

• Windows 10 und Microsoft Visual Studio ab 2015. (Neuestes Visual Studio für aktuelle Entwicklungs- und Sicherheitsupdates empfohlen) Installieren Sie Tools für das Windows App SDK.
• Kenntnisse zum Erstellen einer einfachen "Hallo Welt"-App mithilfe von XAML und C#. Wenn du noch keine hast, klicke hier, um zu erfahren, wie eine „Hello World“-App erstellt wird.

Schritt 1: Erstellen einer leeren App

1. Wählen Sie im Menü "Visual Studio" die Option "Neues Projekt speichern>" aus.
2. Wählen Sie im linken Bereich des Dialogfelds "Neues Projekt" die Option "Visual C#>Windows>Universal" oder "Visual C++>Windows>Universal" aus.
3. Wählen Sie im mittleren Bereich " Leere App" aus.
4. Geben Sie im Feld "Name" "WeatherPanel" ein, und wählen Sie "OK" aus.
5. Um das Programm auszuführen, wählen Sie im Menü "Debuggen>starten" aus, oder wählen Sie "F5" aus.

Schritt 2: Definieren eines Rasters

In XAML besteht ein Raster aus einer Reihe von Zeilen und Spalten. Wenn Sie die Zeile und Spalte eines Elements innerhalb eines Rasters angeben, können Sie andere Elemente innerhalb einer Benutzeroberfläche platzieren und platzieren. Zeilen und Spalten werden mit den RowDefinition - und ColumnDefinition-Elementen definiert.

Um mit dem Erstellen eines Layouts zu beginnen, öffnen Sie "MainPage.xaml" mithilfe des Projektmappen-Explorer, und ersetzen Sie das automatisch generierte Grid-Element durch diesen Code.

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

Das neue Raster erstellt einen Satz von zwei Zeilen und Spalten, wodurch das Layout der App-Schnittstelle definiert wird. Die erste Spalte weist eine Breite von "3*" auf, während die zweite "5*" aufweist, wobei der horizontale Abstand zwischen den beiden Spalten bei einem Verhältnis von 3:5 geteilt wird. Auf die gleiche Weise weisen die beiden Zeilen eine Höhe von "2*" bzw. "*" auf, sodass das Raster zweimal so viel Platz für die erste Zeile zuweist wie für die zweite Zeile ("*" ist identisch mit "1*"). Diese Verhältnisse werden auch dann beibehalten, wenn die Größe des Fensters geändert wird oder das Gerät geändert wird.

Weitere Informationen zu anderen Methoden zur Größenanpassung von Zeilen und Spalten finden Sie unter Definieren von Layouts mit XAML.

Wenn Sie die Anwendung jetzt ausführen, wird nichts außer einer leeren Seite angezeigt, da keiner der Rasterbereiche Inhalte enthält. Um das Raster anzuzeigen, geben wir ihm eine Farbe.

Schritt 3: Färben des Rasters

Um das Raster zu färben, fügen wir drei Rahmenelemente hinzu, die jeweils eine andere Hintergrundfarbe aufweisen. Jede wird auch einer Zeile und Spalte im übergeordneten Raster mithilfe der Attribute "Grid.Row" und "Grid.Column" zugewiesen. Die Werte dieser Attribute sind standardmäßig 0, sodass Sie sie nicht dem ersten Rahmen zuweisen müssen. Fügen Sie dem Grid-Element nach den Zeilen- und Spaltendefinitionen den folgenden Code hinzu.

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

Beachten Sie, dass für den dritten Rahmen ein zusätzliches Attribut verwendet wird, Grid.ColumnSpan, das bewirkt, dass dieser Rahmen beide Spalten in der unteren Zeile überspannt. Sie können Grid.RowSpan auf die gleiche Weise verwenden, und zusammen mit diesen Attributen können Sie ein Element über eine beliebige Anzahl von Zeilen und Spalten erstrecken. Die obere linke Ecke einer solchen Spanne ist immer die in den Elementattributen angegebene Grid.Column und Grid.Row .

Wenn Sie die App ausführen, sieht das Ergebnis ungefähr so aus.

Schritt 4: Organisieren von Inhalten mithilfe von StackPanel-Elementen

StackPanel ist das zweite UI-Element, mit dem wir unsere Wetter-App erstellen. StackPanel ist ein grundlegender Bestandteil vieler einfacher App-Layouts, sodass Sie Elemente vertikal oder horizontal stapeln können.

Im folgenden Code erstellen wir zwei StackPanel-Elemente und füllen jeweils drei TextBlocks. Fügen Sie diese StackPanel-Elemente dem Raster unterhalb der Rahmenelemente aus Schritt 3 hinzu. Dies bewirkt, dass die TextBlock-Elemente über dem zuvor erstellten farbigen Raster gerendert werden.

<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>

Im ersten Stackpanel stapelt sich jeder TextBlock vertikal unter der nächsten. Dies ist das Standardverhalten eines StackPanel, daher müssen wir das Orientation-Attribut nicht festlegen. Im zweiten StackPanel sollen die untergeordneten Elemente horizontal von links nach rechts gestapelt werden, sodass das Orientation-Attribut auf "Horizontal" festgelegt wird. Außerdem müssen wir das Grid.ColumnSpan-Attribut auf "2" festlegen, sodass der Text über dem unteren Rahmen zentriert ist.

Wenn Sie die App jetzt ausführen, wird etwas wie folgt angezeigt.

Schritt 5: Hinzufügen eines Bildsymbols

Schließlich füllen wir den leeren Abschnitt in unserem Raster mit einem Bild, das das heutige Wetter darstellt – etwas, das "teilweise bewölkt" sagt.

Laden Sie das Bild unten herunter, und speichern Sie es als PNG mit dem Namen "teilweise cloudy".

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Objekte", und wählen Sie "Vorhandenes Element hinzufügen>" aus... Suchen Sie partially-cloudy.png im Browser, der eingeblendt wird, wählen Sie sie aus, und klicken Sie auf "Hinzufügen".

Fügen Sie als Nächstes in "MainPage.xaml" das folgende Image-Element unter den StackPanels aus Schritt 4 hinzu.

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

Da das Bild in der ersten Zeile und Spalte enthalten sein soll, müssen wir die Attribute "Grid.Row" oder "Grid.Column" nicht festlegen, sodass sie standardmäßig auf "0" festgelegt werden können.

Das war’s! Sie haben das Layout für eine einfache Wetteranwendung erfolgreich erstellt. Wenn Sie die Anwendung ausführen, indem Sie F5 drücken, sollte folgendes angezeigt werden:

Wenn Sie möchten, experimentieren Sie mit dem obigen Layout, und erkunden Sie verschiedene Möglichkeiten, wie Sie Wetterdaten darstellen können.

Verwandte Artikel

• Eine Einführung in das Entwerfen von Windows-App-Layouts finden Sie unter Silhouetten von Windows-Apps
• Informationen zum Erstellen von dynamischen Layouts, die sich an verschiedene Bildschirmgrößen anpassen, finden Sie unter Definieren von Seitenlayouts mit XAML