Sdílet prostřednictvím

Kurz: Vytvoření jednoduché aplikace pro počasí pomocí Gridu a StackPanelu

Pomocí XAML můžete vytvořit rozložení pro jednoduchou aplikaci pro počasí pomocí Gridu a Element StackPanel. Pomocí těchto nástrojů můžete vytvářet skvělé aplikace, které fungují na jakémkoli zařízení s Windows. Tento kurz trvá 10 až 20 minut.

důležitá rozhraní API: třída Grid, třída StackPanel

Požadavky

Krok 1: Vytvoření prázdné aplikace

  1. V nabídce sady Visual Studio vyberte Soubor>nový projekt.
  2. V levém podokně dialogového okna Nový projekt vyberte Visual C#>Windows>Universal nebo Visual C++>Windows>Universal.
  3. V prostředním podokně vyberte Prázdná aplikace.
  4. Do pole Název zadejte WeatherPanela vyberte OK.
  5. Chcete-li program spustit, vyberte Ladění>Spustit ladění z nabídky nebo stiskněte F5.

Krok 2: Definování mřížky

Ve XAMLu je Mřížka složená z řady řádků a sloupců. Pomocí zadání řádku a sloupce prvku v Gridmůžete umístit a rozmístit další prvky v uživatelském rozhraní. Řádky a sloupce jsou definovány pomocí RowDefinition, a ColumnDefinition elementy.

Pokud chcete začít vytvářet rozložení, otevřete MainPage.xaml pomocí Průzkumníka řešení a nahraďte automaticky vygenerovaný element Grid tímto kódem.

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

Nová mřížka vytvoří sadu dvou řádků a sloupců, která definuje rozložení rozhraní aplikace. První sloupec má Šířku "3*", zatímco druhý má "5*", přičemž vodorovný prostor mezi oběma sloupci v poměru 3:5. Stejně tak mají dva řádky výšku 2* a "*", takže mřížka přiděluje dvakrát tolik místa pro první řádek jako pro druhý ("*" je stejná jako "1*"). Tyto poměry se zachovají i v případě, že se okno přizpůsobí velikosti nebo dojde ke změně zařízení.

Další informace o dalších metodách určení velikosti řádků a sloupců najdete v tématu Definování rozložení pomocí XAML.

Pokud teď spustíte aplikaci, neuvidíte nic kromě prázdné stránky, protože žádná z oblastí mřížky nemá žádný obsah. Abychom zobrazili mřížku , dejte jí nějakou barvu.

Krok 3: Barva mřížky

Pokud chcete mřížku obarvit, přidáme tři prvky ohraničení , z nichž každá má jinou barvu pozadí. Každý z nich je také přiřazen k řádku a sloupci v nadřazené Mřížka pomocí atributů Grid.Row a Grid.Column. Hodnoty těchto atributů mají výchozí hodnotu 0, takže je nemusíte přiřazovat k prvnímu ohraničení. Za definice řádků a sloupců přidejte následující kód do elementu Grid .

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

Všimněte si, že pro třetí Border používáme další atribut, Grid.ColumnSpan, který způsobí, že tento Border zahrnuje oba sloupce v dolním řádku. Grid.RowSpan můžete použít stejným způsobem a společně tyto atributy umožňují přesahovat prvek na libovolný počet řádků a sloupců. Levý horní roh takového rozsahu je vždy Grid.Column a Grid.Row, zadané v atributech elementu.

Pokud aplikaci spustíte, výsledek bude vypadat přibližně takto.

zbarvení mřížky

Krok 4: Uspořádání obsahu pomocí elementů StackPanel

StackPanel je druhý prvek uživatelského rozhraní, který použijeme k vytvoření naší aplikace pro počasí. StackPanel je základní součástí mnoha základních rozložení aplikací, které umožňují naskládat prvky svisle nebo vodorovně.

V následujícím kódu vytvoříme dva elementy StackPanel a každý z nich vyplníme třemi TextBlocks. Přidejte tyto prvky StackPanel do Grid pod prvky Border z kroku 3. To způsobí, že prvky TextBlock se vykreslují nad barevnou mřížkou , kterou jsme vytvořili dříve.

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

V prvním Stackpaneluje každý TextBlock svisle umístěn pod dalším. Toto je výchozí chování objektu StackPanel, takže atribut Orientace nemusíme nastavit. Ve druhém StackPanelu chceme, aby se podřízené elementy skládaly zleva doprava vodorovně, takže nastavíme atribut Orientace na "Horizontálně". Musíme také nastavit atribut Grid.ColumnSpan na "2", aby byl text vycentrován nad dolní hranicí.

Pokud teď aplikaci spustíte, zobrazí se něco podobného.

Přidání StackPanels

Krok 5: Přidání ikony obrázku

Nakonec vyplníme prázdnou sekci v naší mřížce obrázkem, který představuje dnešní počasí – něco, co naznačuje "částečně zataženo".

Stáhněte si níže uvedený obrázek a uložte ho jako PNG s názvem "částečně cloudy".

částečně oblačno

VPrůzkumníka řešení klikněte pravým tlačítkem na složku Prostředky a vyberte Přidat –Existující položka... Najít partially-cloudy.png v prohlížeči, který se zobrazí, vyberte ji a klikněte na Přidat.

Dále v MainPage.xaml přidejte následující Image prvek pod StackPanels z kroku 4.

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

Vzhledem k tomu, že chceme obrázek v prvním řádku a sloupci, nemusíme nastavit jeho atributy Grid.Row nebo Grid.Column , což jim umožňuje výchozí hodnotu 0.

A to je vše! Rozložení pro jednoduchou aplikaci počasí jste úspěšně vytvořili. Pokud aplikaci spustíte stisknutím klávesy F5, měli byste vidět něco takového:

Ukázka podokna počasí

Pokud chcete, zkuste experimentovat s rozložením výše a prozkoumejte různé způsoby, jak můžete vyjádřit data o počasí.

  • Last updated on