Создание многостраничного мобильного приложения на Xamarin

О чём статья

Эта инструкция поможет быстро создать простое многостраничное приложение на Xamarin.Forms в Visual Studio. Вы получите рабочий пример с MainPage и SecondPage, кнопку для перехода и примеры тестовых сценариев. Подойдёт для разработчиков, начинающих с кроссплатформенной разработки на C#.

Ключевые термины

• Xamarin.Forms — библиотека для общего UI между платформами. Одной строкой: позволяет писать интерфейс один раз и запускать на iOS, Android и Windows.
• XAML — декларативный язык разметки интерфейса. Одной строкой: описывает визуальные элементы и их свойства.
• Navigation.PushAsync — метод стековой навигации в Xamarin.Forms.

Как настроить проект Xamarin

1. Запустите Visual Studio и создайте новый проект типа “Mobile App (Xamarin.Forms)”.
2. В корне основного проекта вы найдёте файл MainPage.xaml и связанный с ним MainPage.xaml.cs. Это стартовый экран приложения.

Главная идея: MainPage.xaml содержит разметку UI, а MainPage.xaml.cs — код-обработчик и логика на C#.

1. Откройте MainPage.xaml.

2. Замените содержимое элемента StackLayout на простую метку. Пример XAML-разметки ниже — вставьте его вместо текущего StackLayout.

3. Нажмите зелёную кнопку “Запуск” (Play) в верхней части окна Visual Studio, чтобы собрать проект и запустить эмулятор.

4. Дождитесь компиляции и запуска эмулятора. Это может занять некоторое время при первом запуске.

Важно: убедитесь, что выбран правильный целевой эмулятор/устройство в списке запуска.

Как добавить вторую страницу в проект

По умолчанию проект содержит одну страницу. Чтобы добавить вторую:

1. В Solution Explorer правой кнопкой мыши щёлкните по проекту, выберите Add → New Item.

2. В категории Xamarin.Forms выберите Content Page, назовите файл SecondPage.xaml и нажмите Add.

3. Во втором файле вы увидите две части: SecondPage.xaml и SecondPage.xaml.cs. XAML отвечает за UI, .cs — за логику.

4. Откройте SecondPage.xaml и замените содержимое StackLayout на метку с текстом “Вторая страница”:

Сохраните файл.

Как организовать навигацию с MainPage на SecondPage

Ниже показано, как добавить кнопку на MainPage и вызвать навигацию по нажатию.

1. Откройте MainPage.xaml и добавьте кнопку под меткой:

2. В файле MainPage.xaml.cs добавьте асинхронную функцию-обработчик, которая выполняет Navigation.PushAsync с новой страницей:

async void NavigateTo(object sender, EventArgs e)
{
    await Navigation.PushAsync(new SecondPage());
}

3. Вернитесь в MainPage.xaml и привяжите обработчик к атрибуту Clicked у кнопки:

4. Запустите приложение в эмуляторе. При нажатии на кнопку произойдёт переход на SecondPage.

Критерии приёмки

• Приложение собирается и запускается в эмуляторе.
• На MainPage отображается заголовок и кнопка.
• По нажатию кнопки открывается SecondPage.
• Навигация не вызывает исключений и возвращение назад работает (стрелка эмулятора или Navigation.PopAsync).

Полезные советы по архитектуре и UX

• Всегда оборачивайте стартовую страницу в NavigationPage, если планируете стековую навигацию:

MainPage = new NavigationPage(new MainPage());

• Разделяйте представление (XAML) и логику (ViewModel) с помощью MVVM — так легче тестировать и масштабировать.
• Не храните тяжёлые операции в коде UI-потока; используйте async/await и фоновые задачи.

Когда Xamarin не подходит

• Если вам нужны анимированные или очень нативные интерфейсы с тонкой настройкой платформенных API, лучше рассмотреть нативную разработку.
• Для очень простых UI без доступа к нативным API возможно переизбыточен. Аналогично, если проект требует максимальной скорости и веса APK/IPA должен быть минимален — нативные решения могут дать преимущество.

Альтернативные подходы

• Flutter — высокопроизводительный фреймворк с единой декларативной моделью UI (Dart).
• React Native — JS/TypeScript и мост к нативным компонентам; быстрый цикл разработки.
• Нативная разработка (Swift/Kotlin) — максимальная эффективность и доступ к платформенным возможностям.

Сравнительная подсказка: выбирайте Xamarin, если у команды сильный опыт C#/.NET и вы хотите переиспользовать код бизнес-логики между платформами.

Ментальные модели и эвристики

• Правило 70/30: 70% кода можно сделать кроссплатформенным, 30% — специфично для платформы.
• Разделение ответственностей: UI — XAML, логика — ViewModel, доступ к устройству — сервисы с интерфейсами и реализациями для каждой платформы.
• Модель навигации: думайте о страницах как о состоянии в стеке; PushAsync добавляет новый экран, PopAsync возвращает.

Чеклист по ролям

Разработчик:

• Настроил проект и эмуляторы.
• Добавил страницы и обработчики.
• Поместил стартовую страницу в NavigationPage.

Тестировщик:

• Проверил запуск на Android и iOS (если доступно).
• Протестировал навигацию и сценарии возврата.
• Проверил работу при смене ориентации экрана.

Продукт-менеджер:

• Подтвердил основные экраны и сценарии навигации.
• Согласовал тексты и локализацию.

Тестовые сценарии и приёмо-сдаточные тесты

• Сценарий 1: Открытие приложения → отображается MainPage с заголовком и кнопкой.
• Сценарий 2: Нажать кнопку → приложение переходит на SecondPage.
• Сценарий 3: Нажать кнопку “Назад” → возвращение на MainPage.
• Сценарий 4: Переключение ориентации экрана → UI корректно адаптируется.

Критерии приёмки: все сценарии выполняются без падений, задержек более 2 секунд нет при обычных действиях.

Модель зрелости проекта (пример)

• Уровень 1 — Proof of Concept: одна-две страницы, ручное тестирование.
• Уровень 2 — MVP: навигация, базовый MVVM, CI сборка.
• Уровень 3 — Производство: автоматические тесты, аналитика, релизные пайплайны.

Безопасность и приватность

• Не храните чувствительные данные в открытом виде в приложении. Используйте Secure Storage (криптованное хранилище).
• При работе с пользовательскими данными заранее продумайте согласия и уведомления (GDPR/локальные требования).

Короткая методология развертывания

1. Локально проверить сборку и навигацию.
2. Настроить CI, который собирает Debug и Release для каждой платформы.
3. Прогнать Smoke-тесты на эмуляторах/физических устройствах.
4. Подготовить релизные артефакты и метаданные.

Частые ошибки и как их избежать

• Ошибка: Navigation.PushAsync не работает → причина: стартовая страница не в NavigationPage. Решение: обернуть стартовую страницу в NavigationPage.

• Ошибка: UI блокируется при длительной операции → решение: выполнять в фоне через Task.Run или async метод.

• Ошибка: ресурсы не подгружаются на iOS → убедитесь, что файлы добавлены в проект с правильным Build Action.

Короткое резюме

Xamarin даёт эффективный путь создать кроссплатформенное приложение, используя C# и .NET. Простые шаги — создать проект, добавить Content Page и вызвать Navigation.PushAsync — позволяют быстро реализовать многостраничную навигацию. При выборе технологии учитывайте требования к производительности, нативной функциональности и опыту команды.

Важно: если цель — единый современный UI с высокой производительностью, сравните Xamarin с Flutter и React Native перед выбором.

Заметки

• Для реального проекта рекомендую применять MVVM, DI и модульные тесты.
• На сайте Microsoft и в официальной документации Xamarin.Forms есть примеры и шаблоны для более сложной навигации и аутентификации.