Дизайн приложения
Этот урок описывает дизайн приложения. Функциональная часть будет реализована в следующем уроке. Для дизайна используется файл MainPage.xaml. Лишний код удален, оставлен только ContentPage.
Основной интерфейс
Основной контейнер — StackLayout. Ему задается цвет фона (BackgroundColor) в формате HEX, выбранный с помощью онлайн-инструмента выбора цвета (например, Google «Color Picker»).
Текстовая надпись «Погода»
Добавляется Label с текстом «Погода», центрированный горизонтально (HorizontalOptions="Center"). Внешние отступы задаются с помощью Margin="50, 15, 0, 15" (верх, право, низ, лево в пикселях). Также устанавливаются размер текста (FontSize="30") и цвет (TextColor).
Изображение
Добавляется Image (например, изображение солнца). Отступ снизу задается с помощью Margin="0, 0, 0, 45". В свойство Source вставляется URL изображения (например, с сайта Flaticon.com).
Вложенный StackLayout
Создается вложенный StackLayout для размещения Label и Image на отдельном фоне с другим цветом. Для текста Label устанавливается жирность (FontAttributes="Bold").
Поле ввода города и кнопка
Для ввода города используется Entry, обернутый в Frame для фона, скругления углов и отступов. Задаются цвет фона, отступы (Margin и Padding), скругление углов (CornerRadius), ширина (WidthRequest="200") и текст-заполнитель (Placeholder="Город").
Размещение элементов с помощью RelativeLayout
Блок с полем ввода и кнопкой размещается с помощью RelativeLayout для смещения относительно других элементов. Frame смещается вверх с помощью свойства YConstraint.
Кнопка «Получить погоду»
Добавляется Button с текстом, цветом фона (BackgroundColor), цветом текста (TextColor) и жирным шрифтом (FontAttributes="Bold").
Лейбл для вывода результата
Добавляется Label для вывода информации о погоде. Задаются размер текста (FontSize), горизонтальное центрирование (HorizontalOptions="Center"), цвет текста (TextColor) и отступ снизу (Margin).
XAML-имена элементов
Для работы с элементами в коде (в следующем уроке) к Entry, Button и Label добавляются XAML-имена через атрибут x:Name. Например, x_Name="GetWeather" для кнопки.
Дизайн приложения завершен. В следующем уроке будет добавлена функциональность получения данных о погоде.