Samouczek: tworzenie prostej aplikacji pogodowej przy użyciu grid i StackPanel

Użyj języka XAML, aby utworzyć układ prostej aplikacji pogodowej przy użyciu elementów Grid i StackPanel . Dzięki tym narzędziom możesz tworzyć doskonałe aplikacje, które działają na dowolnym urządzeniu z systemem Windows. Ten poradnik trwa od 10 do 20 minut.

ważne interfejsy API: Grid class, StackPanel, klasa

Wymagania wstępne

• Windows 10 i Microsoft Visual Studio 2015 lub nowszy. (Najnowsza wersja programu Visual Studio zalecana w przypadku bieżących aktualizacji programowania i zabezpieczeń) Zainstaluj narzędzia dla Windows App SDK.
• Znajomość sposobu tworzenia podstawowej aplikacji "Hello World" przy użyciu języka XAML i C#. Jeśli jeszcze tego nie masz, kliknij tutaj, aby dowiedzieć się, jak utworzyć aplikację "Hello World".

Krok 1. Tworzenie pustej aplikacji

1. W menu programu Visual Studio wybierz pozycję Plik>nowy projekt.
2. W lewym okienku okna dialogowego Nowy projekt wybierz Visual C#>Windows>Universal lub Visual C++>Windows>Universal.
3. W środkowym okienku wybierz pozycję Pusta aplikacja.
4. W polu Nazwa wprowadź WeatherPaneli wybierz pozycję OK.
5. Aby uruchomić program, wybierz pozycję Debuguj>rozpocznij debugowanie z menu lub wybierz pozycję F5.

Krok 2. Definiowanie siatki

W języku XAML siatka składa się z serii wierszy i kolumn. Określając wiersz i kolumnę elementu w Grid, można rozmieszczać i ustawiać inne elementy w interfejsie użytkownika. Wiersze i kolumny są definiowane za pomocą elementów RowDefinition i ColumnDefinition.

Aby rozpocząć tworzenie układu, otwórz plik MainPage.xaml przy użyciu Eksploratora rozwiązań i zastąp automatycznie wygenerowany element Grid tym kodem.

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

Nowa siatka tworzy zestaw dwóch wierszy i kolumn, który definiuje układ interfejsu aplikacji. Pierwsza kolumna ma Szerokość "3*", podczas gdy druga ma wartość "5*", dzieląc przestrzeń poziomą między dwie kolumny w stosunku 3:5. W ten sam sposób dwa rzędy mają wysokość Height "2*" i "*" odpowiednio, więc Grid przydziela dwa razy więcej miejsca dla pierwszego wiersza niż dla drugiego (gdzie "*" oznacza to samo co "1*"). Te współczynniki są zachowywane nawet w przypadku zmiany rozmiaru okna lub zmiany urządzenia.

Aby dowiedzieć się więcej o innych metodach określania rozmiaru wierszy i kolumn, zobacz Definiowanie układów przy użyciu języka XAML.

Jeśli uruchomisz aplikację, nie zobaczysz żadnych elementów poza pustą stroną, ponieważ żadne z obszarów siatki nie ma żadnej zawartości. Aby wyświetlić siatkę , nadajmy mu jakiś kolor.

Krok 3. Kolor siatki

Aby kolorować Siatka dodamy trzy elementy Obramowanie, z których każdy ma inny kolor tła. Każdy jest również przypisywany do wiersza i kolumny w nadrzędnej Grid przy użyciu atrybutów Grid.Row i Grid.Column. Wartości tych atrybutów są domyślnie równe 0, więc nie trzeba przypisywać ich do pierwszego obramowania. Dodaj następujący kod do elementu Grid po definicjach wierszy i kolumn.

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

Zwróć uwagę, że w przypadku trzeciego obramowania używamy dodatkowego atrybutu Grid.ColumnSpan, co powoduje, że to obramowanie obejmuje oba kolumny w dolnym rzędzie. Można użyć Grid.RowSpan w ten sam sposób, a te atrybuty umożliwiają rozciąganie elementu przez dowolną liczbę wierszy i kolumn. Lewy górny róg takiego zakresu to zawsze Grid.Column i Grid.Row określone w atrybutach elementu.

Jeśli uruchomisz aplikację, wynik będzie wyglądać mniej więcej tak.

Krok 4. Organizowanie zawartości przy użyciu elementów StackPanel

StackPanel to drugi element interfejsu użytkownika, który użyjemy do utworzenia naszej aplikacji pogodowej. StackPanel jest kluczowym elementem wielu prostych układów aplikacji, pozwalając na układanie elementów w pionie lub w poziomie.

W poniższym kodzie tworzymy dwa elementy StackPanel i wypełniamy je trzema blokami TextBlocks. Dodaj te elementy StackPanel do siatki poniżej elementów obramowania z kroku 3. Powoduje to renderowanie elementów TextBlock na wierzchu kolorowej Grid, którą utworzyliśmy wcześniej.

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

W pierwszym Stackpanelkażdy TextBlock układa się pionowo jeden pod drugim. Jest to domyślne zachowanie obiektu StackPanel, dlatego nie musimy ustawiać atrybutu orientacji. W drugim StackPanel chcemy, aby elementy podrzędne układały się poziomo od lewej do prawej, dlatego ustawiamy atrybut Orientacja na "Poziomo". Musimy również ustawić atrybut Grid.ColumnSpan na wartość "2", aby tekst był wyśrodkowany nad dolną Obramowanie.

Jeśli teraz uruchomisz aplikację, zobaczysz coś takiego.

Krok 5. Dodawanie ikony obrazu

Na koniec wypełnijmy pustą sekcję w naszej Grid obrazem reprezentującym dzisiejszą pogodę — coś, co mówi "częściowo pochmurne".

Pobierz poniższy obraz i zapisz go jako plik PNG o nazwie "partially-cloudy".

W eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder Zasoby, a następnie wybierz Dodaj —>istniejący element... Znajdź partially-cloudy.png w wyświetlonej przeglądarce, zaznacz ją i kliknij Dodaj.

Następnie w pliku MainPage.xaml dodaj następujący element Image poniżej StackPaneli z kroku 4.

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

Ponieważ chcemy, aby obraz był w pierwszym wierszu i kolumnie, nie musimy ustawiać jego Grid.Row ani atrybutów Grid.Column, co pozwala na ustawienie domyślne wartości "0".

I to wszystko! Pomyślnie utworzono układ dla prostej aplikacji pogodowej. Jeśli uruchomisz aplikację, naciskając F5, powinna zostać wyświetlona zawartość podobna do następującej:

Jeśli chcesz, spróbuj eksperymentować z powyższym układem i zapoznaj się z różnymi sposobami reprezentowania danych pogodowych.

Powiązane artykuły

• Aby zapoznać się z wprowadzeniem do projektowania układów aplikacji systemu Windows, zobacz Sylwetki aplikacji systemu Windows
• Aby dowiedzieć się więcej o tworzeniu dynamicznych układów, które dostosowują się do różnych rozmiarów ekranu, zobacz Definiowanie układów stron przy użyciu języka XAML