Навигация между страницами в Xamarin

Xamarin — это платформа для кроссплатформенной мобильной разработки, которая позволяет писать приложения для iOS, Android, Windows и других платформ, используя C# и .NET. Однострочное определение: Xamarin позволяет разделять бизнес-логику между платформами, сохраняя доступ к нативным API.

Что вы получите из этой статьи

• Пошаговая инструкция по созданию проекта и первой страницы.
• Как добавить вторую страницу и связать её с MainPage.
• Примеры кода для XAML и C# (Navigation.PushAsync).
• Чек-лист, сценарии тестирования, распространённые ошибки и советы по отладке.

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

1. Создайте новый проект Xamarin в Visual Studio (File → New → Project → Xamarin.Forms App или подходящий шаблон).

2. В новом проекте по умолчанию есть главная страница MainPage.xaml, которая служит стартовым экраном при запуске приложения. Рядом с ней находится файл логики MainPage.xaml.cs, где вы пишете C#.

3. Откройте MainPage.xaml в редакторе.

4. В MainPage.xaml замените содержимое StackLayout на основной Label. В исходном примере код выглядел так:

Примечание: текст внутри Label можно локализовать (перевести) в зависимости от целевой аудитории. Оставляйте структуру XAML без изменений, чтобы сохранить корректность разметки.

3. Запустите проект: в верхней части окна Visual Studio нажмите зелёную кнопку запуска (Play) и выберите эмулятор или устройство.
4. Дождитесь компиляции и запуска эмулятора.

Важно: перед первым запуском убедитесь, что установлены все платформенные SDK и эмуляторы (Android SDK, Android Emulator, iOS Simulator — если вы разрабатываете на macOS).

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

Чтобы приложение имело больше одного экрана, добавьте Content Page.

1. В Solution Explorer щёлкните правой кнопкой по проекту → Add → New Item.
2. Выберите Content Page из категории Xamarin.Forms. Назовите файл SecondPage.xaml и нажмите Add.
3. В обозревателе решений появится SecondPage.xaml и связанный с ним SecondPage.xaml.cs.
4. Откройте SecondPage.xaml и отредактируйте содержимое StackLayout, например:

Совет по локализации: замените “Second Page” на «Вторая страница» или используйте ресурсные файлы для поддержки нескольких языков.

Как выполнить навигацию на вторую страницу из MainPage

Чтобы перейти со стартовой страницы на SecondPage, добавьте кнопку и обработчик нажатия.

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

2. В MainPage.xaml.cs создайте асинхронный обработчик NavigateTo:

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

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

4. Запустите приложение в эмуляторе и нажмите кнопку. Вы должны увидеть переход на SecondPage.

5. При нажатии кнопки приложение переходит на вторую страницу.

Совет: если Navigation.PushAsync выдаёт ошибку, проверьте, что ваш корневой элемент NavigationPage. В App.xaml.cs инициализируйте главный экран так:

MainPage = new NavigationPage(new MainPage());

Если забыть обернуть MainPage в NavigationPage, методы Navigation.PushAsync и PopAsync будут недоступны.

Резюмирующая методология (мини-SOP)

1. Создать проект Xamarin.Forms в Visual Studio.
2. Создать MainPage.xaml и убедиться, что App.xaml.cs использует NavigationPage.
3. Добавить Content Page (например, SecondPage.xaml).
4. Связать кнопку на MainPage с обработчиком Clicked, который вызывает Navigation.PushAsync(new SecondPage()).
5. Тестировать переходы на эмуляторе и на реальном устройстве.

Чек-лист для развертывания и тестирования

• Установлены SDK и эмуляторы для целевых платформ.
• MainPage обёрнут в NavigationPage.
• SecondPage добавлен в проект и компилируется.
• Обработчик NavigateTo помечен async при использовании PushAsync.
• Нет исключений при запуске в дебаге.
• Навигация работает на реальном устройстве.

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

• Проблема: Navigation.PushAsync выбрасывает NullReferenceException. Решение: проверьте, что MainPage = new NavigationPage(new MainPage());
• Проблема: кнопка не реагирует на нажатие. Решение: проверьте атрибут Clicked в XAML и имя метода в .xaml.cs.
• Проблема: виджеты выглядят иначе на iOS/Android. Решение: используйте платформенные стилевые ресурсы или привычные контролы, тестируйте на обеих платформах.

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

• Навигация как стек: представьте экраны как стопку карточек. PushAsync кладёт карточку сверху, PopAsync снимает её.
• Разделяйте навигационную логику и бизнес-логику: используйте ViewModel для логики и привязывайте команды к кнопкам вместо прямого вызова Page-классов.
• Для сложной навигации используйте маршрутизацию Shell в Xamarin.Forms или переход на .NET MAUI для будущих проектов.

Альтернативы и путь миграции

• Если вы начинаете новый проект, рассмотрите .NET MAUI — он объединяет и обновляет подход Xamarin.Forms с поддержкой новых API.
• Для чисто Android или iOS приложений используйте нативные фреймворки, если требуется высшая производительность и точный нативный UX.

Decision flowchart (простая схема выбора навигации)

flowchart TD
    A[Нужна простая стек-навигация?] -->|Да| B[Используйте NavigationPage]
    A -->|Нет| C[Нужна сложная маршрутизация?]
    C -->|Да| D[Используйте Shell или Router]
    C -->|Нет| E[Рассмотрите кастомную навигацию/модальные окна]

Тестовые сценарии и критерии приёмки

• При запуске приложение отображает MainPage.
• Нажатие кнопки «Navigate To Second Page» приводит к появлению SecondPage.
• Кнопка назад (в навигационной панели или системная) возвращает пользователя на MainPage.
• На реальном устройстве нет падений при навигации.

Короткий глоссарий

• XAML — язык разметки для описания UI в Xamarin.Forms.
• Navigation.PushAsync — метод для добавления страницы в стек навигации.
• NavigationPage — контейнер, обеспечивающий стековую навигацию и верхнюю панель.

Совместимость и миграция

• Xamarin.Forms поддерживает Android и iOS; для новых проектов рассмотрите .NET MAUI.
• Убедитесь, что версии пакетов Xamarin.Forms, Xamarin.Android, Xamarin.iOS и Visual Studio совместимы.

Заключение

Навигация между страницами в Xamarin реализуется просто: добавьте Content Page, создайте обработчик и используйте Navigation.PushAsync. Главная ошибка — не обернуть стартовую страницу в NavigationPage. После освоения базовой навигации стоит изучить Shell и паттерн MVVM для более масштабируемых приложений.

Важно: изучайте официальную документацию Xamarin и проверяйте платформенные зависимости перед развёртыванием.

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

• Создайте проект и MainPage.xaml.
• Добавьте SecondPage.xaml и кнопку на MainPage.
• В App.xaml.cs используйте NavigationPage.
• Примените Navigation.PushAsync для перехода.