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 Tutorial dauert 10 bis 20 Minuten.

Wichtige APIs: Grid-Klasse, StackPanel-Klasse

Voraussetzungen

Schritt 1: Erstellen einer leeren App

  1. Wählen Sie im Visual Studio-Menü Datei>Neues Projekt 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 den Namen WeatherPanel ein, und wählen Sie OK aus.
  5. Um das Programm auszuführen, wählen Sie im Menü Debuggen>Debuggen starten aus, oder drücken Sie F5.

Schritt 2: Definieren eines Rasters

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

Um mit der Erstellung eines Layouts zu beginnen, öffnen Sie MainPage.xaml über den 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, wodurch der horizontale Raum zwischen den beiden Spalten im Verhältnis 3:5 aufgeteilt 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 beibehalten, auch wenn die Fenstergröße geändert oder das Gerät gewechselt 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 Ihnen nichts außer einer leeren Seite angezeigt, da keiner der Grid--Bereiche Inhalte enthält. Um das Grid anzuzeigen, verleihen wir ihm etwas Farbe.

Schritt 3: Färben des Rasters

Um das Grid einzufärben, fügen wir drei Border-Elemente hinzu, die jeweils eine andere Hintergrundfarbe aufweisen. Jedes Element wird außerdem mithilfe der Attribute Grid.Row und Grid.Column einer Zeile und Spalte im übergeordneten Grid zugewiesen. Die Werte dieser Attribute sind standardmäßig 0, sodass Sie sie dem ersten Border nicht 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 wir für das dritte Border ein zusätzliches Attribut verwenden, Grid.ColumnSpan, das bewirkt, dass dieses Border beide Spalten in der unteren Zeile überspannt. Sie können Grid.RowSpan auf die gleiche Weise verwenden, und mit diesen Attributen können Sie ein Element über beliebig viele Zeilen und Spalten hinweg erstrecken. Die obere linke Ecke einer solchen Spanne ist immer das in den Elementattributen angegebene Grid.Column und Grid.Row.

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

Färben des Rasters

Schritt 4: Organisieren von Inhalten mithilfe von StackPanel-Elementen

StackPanel ist das zweite UI-Element, mit dem wir unsere Wetter-App erstellen. Die StackPanel- ist ein grundlegender Bestandteil vieler grundlegender App-Layouts, da sie es Ihnen ermöglicht, Elemente sowohl vertikal als auch horizontal zu stapeln.

Im folgenden Code erstellen wir zwei StackPanel-Elemente und füllen jedes mit drei TextBlocks. Fügen Sie diese StackPanel-Elemente dem Grid unterhalb der Border-Elemente aus Schritt 3 hinzu. Dies führt dazu, dass die TextBlock-Elemente über dem farbigen Grid gerendert werden, das wir zuvor erstellt haben.

<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 wird jeder TextBlock vertikal unter dem nächsten gestapelt. 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, daher legen wir das Attribut Orientation auf „Horizontal“ fest. Wir müssen außerdem das Attribut Grid.ColumnSpan auf „2“ festlegen, damit der Text über dem unteren Border zentriert wird.

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

Hinzufügen von StackPanels

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 unten stehende Bild herunter und speichern Sie es als PNG mit dem Namen "teilweise bewölkt".

teilweise bewölkt

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Assets, und wählen Sie Hinzufügen –>Vorhandenes Element... aus. Suchen Sie im angezeigten Browser nach „partially-cloudy.png“, wählen Sie es 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 wir das Image in der ersten Zeile und Spalte haben möchten, müssen wir seine Attribute Grid.Row oder Grid.Column nicht festlegen, sodass sie standardmäßig auf „0“ gesetzt werden.

Und das ist es! 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:

Beispiel für Wetterbereich-Beispiel

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

  • Last updated on