Руководство. Создание простого приложения погоды с помощью Grid и StackPanel

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

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

Необходимые компоненты

• Windows 10 и Microsoft Visual Studio 2015 или более поздней версии. (Рекомендуется использовать Visual Studio для текущих обновлений разработки и безопасности) Установите средства для пакета SDK для приложений Windows.
• Узнайте, как создать базовое приложение Hello World с помощью XAML и C#. Щелкните здесь, чтобы узнать, как создать приложение "Hello World", если у вас его еще нет.

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

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

Шаг 2. Определение сетки

В XAML сетка состоит из ряда строк и столбцов. Указав строку и столбец элемента в сетке, можно разместить и поместить другие элементы в пользовательский интерфейс. Строки и столбцы определяются элементами 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>

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

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

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

Шаг 3. Цвет сетки

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

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

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

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

Шаг 4. Упорядочение содержимого с помощью элементов StackPanel

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

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

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

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

Если вы запускаете приложение сейчас, вы увидите что-то подобное.

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

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

Скачайте приведенное ниже изображение и сохраните его в формате PNG с именем "частично облачный".

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

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

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

Так как мы хотим, чтобы изображение в первой строке и столбце, нам не нужно задавать атрибуты Grid.Row или Grid.Column , что позволяет им по умолчанию иметь значение "0".

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

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

Связанные статьи

• Общие сведения о проектировании макетов приложений Windows см. в разделе "Силуэты приложений Windows"
• Сведения о создании адаптивных макетов, которые адаптируются к разным размерам экрана, см. в разделе "Определение макетов страниц с помощью XAML"