Руководство: использование Grid и StackPanel для создания простого погодного приложения

  • Статья

Используйте XAML для создания макетов простого погодного приложения с помощью элементов Grid и StackPanel. С помощью этих средств вы можете создавать отличные приложения, которые работают на любом устройстве под управлением Windows. Работа с этим учебным материалом занимает 10–20 минут.

Важные API: класс Grid, класс StackPanel.

Предварительные условия

Шаг 1. Создайте пустое приложение

  1. В меню Visual Studio выберите Файл>Новый проект.
  2. На левой панели диалогового окна Новый проект выберите Visual C#>Windows>Universal или Visual C++>Windows>Universal.
  3. На центральной панели выберите Пустое приложение.
  4. В поле Имя введите WeatherPanel и нажмите ОК.
  5. Чтобы запустить программу, выберите Отладка>Начать отладку в меню или нажмите клавишу F5.

Шаг 2. Определите элемент Grid

В XAML элемент Grid состоит из серии строк и столбцов. Указав строку и столбец элемента в пределах элемента Grid, вы сможете размещать и разделять другие элементы в пользовательском интерфейсе. Строки и столбцы определяются элементами RowDefinition и ColumnDefinition.

Чтобы начать создание макета, откройте MainPage.xaml с помощью Обозревателя решений и замените автоматически созданный элемент Grid этим кодом.

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

Новый элемент Grid создает набор строк и столбцов, определяя таким образом макет интерфейса приложения. Первый столбец имеет ширину "3*", а второй — "5*", разделяя горизонтальное пространство между двумя столбцами в соотношении 3:5. Таким же образом, высота двух строк составляет "2*" и "*" соответственно, поэтому grid выделяет в два раза больше места для первой строки, чем для второй ("*" совпадает с "1*"). Эти соотношения сохраняются даже при изменении размера окна или смене устройства.

Узнать о других методах определения размера строк и столбцов можно узнать в разделе Определение макетов с помощью XAML.

Если запустить приложение на этом этапе, вы увидите только пустую страницу, так как ни в одной области элемента Grid нет содержимого. Чтобы отобразить элемент Grid можно придать ему цвет.

Шаг 3. Раскрасьте элемент Grid

Чтобы придать цвет элементу Grid, добавим три элемента Border, каждый из которых имеет собственный цвет фона. Каждый из них также назначается строке и столбцу в родительском элементе Grid при помощи атрибутов Grid.Row и Grid.Column. По умолчанию эти атрибуты имеют значения 0, поэтому их не нужно назначать первому элементу Border. Добавьте следующий код в элемент Grid после определений строк и столбцов.

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

Обратите внимание, что для третьего элемента Border мы используем дополнительный атрибут, Grid.ColumnSpan, который позволяет элементу Border охватить оба столбца в нижней строке. Вы можете использовать Grid.RowSpan таким же образом. Вместе эти атрибуты позволяют растягивать элемент на любое количество строк и столбцов. Верхний левый угол охватываемой области — это всегда значения Grid.Column и Grid.Row, указанные в атрибутах элемента.

Если запустить приложение, результат будет примерно таким.

Придание цвета элементу Grid

Шаг 4. Организуйте содержимое с помощью элементов StackPanel

StackPanel — это второй элемент пользовательского интерфейса, который мы будем использовать для создания нашего погодного приложения. Элемент StackPanel является одной из основных составляющих многих базовых макетов приложений, позволяя распределять элементы вертикально или горизонтально.

В следующем коде мы создаем два элемента StackPanel и заполняем каждый из них тремя элементами TextBlocks. Добавьте эти элементы StackPanel в элемент Grid под элементами Border из шага 3. Тогда элементы TextBlock будут отображаться поверх цветного элемента Grid, который мы создали ранее.

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

В первом элементе Stackpanel каждый элемент TextBlock расположен вертикально под следующим. Это стандартное поведение элемента StackPanel, поэтому нам не нужно устанавливать атрибут Orientation. Во втором элементе StackPanel нужно сделать так, чтобы дочерние элементы располагались горизонтально слева направо, поэтому мы установили атрибуту Orientation значение "Horizontal". Нам также нужно установить атрибуту Grid.ColumnSpan значение "2", чтобы текст выравнивался по центру над нижним элементом Border.

Если запустить приложение, результат будет примерно таким.

Добавление элементов StackPanel

Шаг 5. Добавьте значок изображения

Наконец, заполним пустой раздел элемента Grid изображением, символизирующим сегодняшнюю погоду — переменная облачность.

Скачайте изображение ниже и сохраните его в формате PNG с именем "partially-cloudy".

Переменная облачность

В Обозреватель решений щелкните правой кнопкой мыши папку Assets и выберите Добавить ->Существующий элемент... Найдите partially-cloudy.png в появившемся браузере, выберите его и нажмите кнопку Добавить.

Затем в MainPage.xaml добавьте следующий элемент Image ниже элементов StackPanel из шага 4.

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

Поскольку нам нужно разместить элемент Image в первой строке и столбце, нам не требуется устанавливать его атрибуты Grid.Row и Grid.Column — оставим их значения по умолчанию ("0").

Вот и все! Вы успешно создали макет для простого погодного приложения. Если запустить приложение с помощью клавиши F5, вы должны увидеть нечто подобное:

Пример погодной панели

При желании вы можете поэкспериментировать с макетом выше и изучить различные способы представления данных о погоде.