Dela via

Självstudie: Använda Grid och StackPanel för att skapa en enkel väderapp

Använd XAML för att skapa layouten för en enkel väderapp med hjälp av elementen Grid och StackPanel . Med dessa verktyg kan du skapa snygga appar som fungerar på alla enheter som kör Windows. Den här självstudien tar 10–20 minuter.

Viktiga API:er: Grid-klass, StackPanel-klass

Förutsättningar

Steg 1: Skapa en tom app

  1. I Visual Studio-menyn väljer du Arkiv>Nytt projekt.
  2. I den vänstra rutan i dialogrutan Nytt projekt väljer du Visual C#>Windows>Universal eller Visual C++>Windows>Universal.
  3. I mittenfönstret väljer du Tom app.
  4. I rutan Namn anger du WeatherPanel och väljer OK.
  5. Om du vill köra programmet väljer du Felsöka>Starta felsökning på menyn eller väljer F5.

Steg 2: Definiera ett rutnät

I XAML består ett rutnät av en serie rader och kolumner. Genom att ange raden och kolumnen för ett element i ett rutnät kan du placera och placera andra element i ett användargränssnitt. Rader och kolumner definieras med elementen RowDefinition och ColumnDefinition .

Börja skapa en layout genom att öppna MainPage.xaml med hjälp av Solution Explorer och ersätta det automatiskt genererade Grid-elementet med den här koden.

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

Det nya rutnätet skapar en uppsättning med två rader och kolumner, som definierar layouten för appgränssnittet. Den första kolumnen har bredden "3*", medan den andra har "5*", vilket delar det vågräta utrymmet mellan de två kolumnerna med förhållandet 3:5. På samma sätt har de två raderna höjden "2*" respektive "*", så rutnätet allokerar två gånger så mycket utrymme för den första raden som för den andra ("*" är samma som "1*"). Dessa förhållanden bibehålls även om fönstret storleksändras eller om enheten byts ut.

Mer information om andra metoder för att ändra storlek på rader och kolumner finns i Definiera layouter med XAML.

Om du kör programmet nu ser du inget annat än en tom sida eftersom inget av rutnätsområdena har något innehåll. För att visa rutnätet ska vi ge det lite färg.

Steg 3: Färga rutnätet

För att färglägga Grid lägger vi till tre kant-element, med varsin olika bakgrundsfärg. Var och en tilldelas också till en rad och kolumn i det överordnade Grid- med hjälp av attributen Grid.Row och Grid.Column. Värdena för dessa attribut är som standard 0, så du behöver inte tilldela dem till den första kantlinjen. Lägg till följande kod i Grid-elementet efter rad- och kolumndefinitionerna.

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

Observera att för den tredje kantlinje använder vi ett extra attribut, Grid.ColumnSpan, vilket gör denna kantlinje sträcker sig över båda kolumnerna på den nedre raden. Du kan använda Grid.RowSpan på samma sätt, och tillsammans med dessa attribut kan du sträcka dig över ett element över valfritt antal rader och kolumner. Det övre vänstra hörnet i ett sådant spann är alltid rutnät.kolumn och rutnät.rad som anges i elementattributen.

Om du kör appen ser resultatet ut ungefär så här.

Färgläggning av rutnätet

Steg 4: Ordna innehåll med hjälp av StackPanel-element

StackPanel är det andra användargränssnittselementet som vi använder för att skapa vår väderapp. StackPanel är en grundläggande del av många grundläggande applayouter, så att du kan stapla element lodrätt eller vågrätt.

I följande kod skapar vi två StackPanel-element och fyller var och en med tre TextBlocks. Lägg till dessa StackPanel-element i rutnätet under kantlinjeelementen från steg 3. Detta gör att elementen TextBlock återges ovanpå den färgade Grid vi skapade tidigare.

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

I den första Stackpanelstaplas varje TextBlock lodrätt under det föregående. Det här är standardbeteendet för en StackPanel, så vi behöver inte ange attributet Orientering . I den andra StackPanel vill vi att de underordnade elementen ska staplas horisontellt från vänster till höger, så vi anger attributet Orientation till "Horizontal". Vi måste också ange attributet Grid.ColumnSpan till "2", så att texten centreras över den nedre kantlinjen.

Om du kör appen nu ser du något liknande.

Lägga till StackPanels

Steg 5: Lägg till en bildikon

Slutligen fyller vi det tomma avsnittet i vårt rutnät med en bild som representerar dagens väder – något som säger "delvis molnigt".

Ladda ned bilden nedan och spara den som en PNG med namnet "delvis molnigt".

Delvis molnigt

Högerklicka på mappen Tillgångar i Solution Explorer och välj Lägg till befintligt>objekt... Hitta partially-cloudy.png i webbläsaren som visas, välj den och klicka på Lägg till.

Lägg sedan till följande bildelement under StackPanels från steg 4 i MainPage.xaml.

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

Eftersom vi vill ha bilden i den första raden och kolumnen behöver vi inte ange dess Grid.Row eller Grid.Column attribut, vilket gör att de får standardvärdet "0".

Och det är allt! Du har skapat layouten för ett enkelt väderprogram. Om du kör programmet genom att trycka på F5 bör du se något liknande:

väderfönstersexempel

Om du vill kan du prova att experimentera med layouten ovan och utforska olika sätt att representera väderdata.