Delen via

Zelfstudie: Grid en StackPanel gebruiken om een eenvoudige weer-app te maken

Gebruik XAML om de indeling voor een eenvoudige weer-app te maken met behulp van de elementen Grid en StackPanel . Met deze hulpprogramma's kunt u geweldige apps maken die op elk apparaat met Windows werken. Deze zelfstudie duurt 10-20 minuten.

Belangrijke API's: Grid-klasse, StackPanel-klasse

Vereiste voorwaarden

Stap 1: Een lege app maken

  1. Selecteer bestand>nieuw project in het menu van Visual Studio.
  2. Selecteer in het linkerdeelvenster van het dialoogvenster Nieuw project, Visual C#>Windows>Universal of Visual C++>Windows>Universal.
  3. Selecteer in het middelste deelvenster Lege app.
  4. Typ WeatherPanel in het vak Naam en selecteer OK.
  5. Als u het programma wilt uitvoeren, selecteert u Debuggen>Debuggen starten in het menu of selecteert u F5.

Stap 2: Een raster definiëren

In XAML bestaat een raster uit een reeks rijen en kolommen. Door de rij en kolom van een element in een raster op te geven, kunt u andere elementen binnen een gebruikersinterface plaatsen en ruimte geven. Rijen en kolommen worden gedefinieerd met de elementen RowDefinition en ColumnDefinition .

Als u een indeling wilt maken, opent u MainPage.xaml met behulp van Solution Explorer en vervangt u het automatisch gegenereerde rasterelement door deze code.

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

Het nieuwe raster maakt een set van twee rijen en kolommen, waarmee de indeling van de app-interface wordt gedefinieerd. De eerste kolom heeft een breedte van '3*', terwijl de tweede '5*' heeft, waarbij de horizontale ruimte tussen de twee kolommen wordt verdeeld met een verhouding van 3:5. Op dezelfde manier hebben de twee rijen respectievelijk een hoogte van '2*' en '*', dus het raster wijst twee keer zoveel ruimte toe voor de eerste rij als voor de tweede ("*" is hetzelfde als "1*"). Deze verhoudingen worden gehandhaafd, zelfs als het venster wordt aangepast of het apparaat wordt veranderd.

Zie Indelingen definiëren met XAML voor meer informatie over andere methoden voor het aanpassen van de grootte van rijen en kolommen.

Als u de toepassing nu uitvoert, ziet u niets behalve een lege pagina, omdat geen van de rastergebieden inhoud bevat. Als u het raster wilt weergeven, geven we het wat kleur.

Stap 3: Het raster kleuren

Als u het raster wilt kleuren, voegen we drie randelementen toe, elk met een andere achtergrondkleur. Elk element wordt ook toegewezen aan een rij en kolom in het ouder Raster met behulp van de kenmerken Grid.Row en Grid.Column. De waarden van deze kenmerken zijn standaard ingesteld op 0, dus u hoeft ze niet toe te wijzen aan de eerste rand. Voeg de volgende code toe aan het rasterelement na de rij- en kolomdefinities.

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

Let op: voor de derde rand gebruiken we een extra kenmerk , Grid.ColumnSpan, waardoor deze rand beide kolommen in de onderste rij omvat. U kunt Grid.RowSpan op dezelfde manier gebruiken en met deze kenmerken kunt u een element over een willekeurig aantal rijen en kolommen strekken. De linkerbovenhoek van een dergelijk bereik is altijd de Grid.Column en Grid.Row die zijn opgegeven in de elementkenmerken.

Als u de app uitvoert, ziet het resultaat er ongeveer als volgt uit.

Het raster kleuren

Stap 4: Inhoud organiseren met behulp van StackPanel-elementen

StackPanel is het tweede UI-element dat we gaan gebruiken om onze weer-app te maken. StackPanel is een fundamenteel onderdeel van veel eenvoudige app-indelingen, zodat u elementen verticaal of horizontaal kunt stapelen.

In de volgende code maken we twee StackPanel-elementen en vullen we elk met drie TextBlocks. Voeg deze StackPanel-elementen toe aan het Raster onder de Kader-elementen uit stap 3. Dit zorgt ervoor dat de TextBlock elementen bovenop de gekleurde rooster dat we eerder hebben gemaakt worden weergegeven.

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

In de eerste Stackpanelstapelt elk TextBlock zich verticaal onder de volgende. Dit is het standaardgedrag van een StackPanel, dus we hoeven het kenmerk Oriëntatie niet in te stellen. In het tweede StackPanel willen we dat de onderliggende elementen horizontaal van links naar rechts worden gestapeld, dus stellen we het kenmerk Oriëntatie in op "Horizontaal". We moeten ook het kenmerk Grid.ColumnSpan instellen op '2', zodat de tekst wordt gecentreerd over de onderrand.

Als u de app nu uitvoert, ziet u zoiets als dit.

StackPanels toevoegen

Stap 5: Een afbeeldingspictogram toevoegen

Ten slotte vullen we de lege sectie in ons raster met een afbeelding die het weer van vandaag weer voorstelt, iets dat 'gedeeltelijk bewolkt' zegt.

Download de onderstaande afbeelding en sla deze op als een PNG-bestand met de naam gedeeltelijk bewolkt.

Gedeeltelijk bewolkt

Klik in Solution Explorermet de rechtermuisknop op de map Assets en selecteer Toevoegen ->Bestaand item... Zoek partially-cloudy.png in de browser die wordt weergegeven, selecteer deze en klik op Toevoegen.

Voeg vervolgens in MainPage.xamlhet volgende Afbeeldingselement toe onder de StackPanels uit stap 4.

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

Omdat we de afbeelding in de eerste rij en kolom willen, hoeven we de kenmerken Grid.Row of Grid.Column niet in te stellen, zodat ze standaard 0 zijn.

Dat is alles. Je hebt met succes de indeling voor een eenvoudige weerapplicatie gemaakt. Als u de toepassing uitvoert door op F5 te drukken, ziet u ongeveer het volgende:

Weervenster voorbeeld

Probeer desgewenst te experimenteren met de bovenstaande indeling en verken verschillende manieren waarop u weergegevens kunt weergeven.

  • Last updated on