З підходом до створення мобільних додатків на базі .NET Maui виникає багато нових запитань і проблем. Однією з них є ефективне використання навігації та команд. В цій статті ми розглянемо простий сценарій навігації та використання команд з .NET Maui та з’ясуємо, що може йти не так.
Розглянемо сценарій: ми маємо дві візуалізовані сторінки та відповідні до них ViewModel. Задача полягає в тому, щоб перейти з головної сторінки на сторінку редагування і повернутися назад. Для цього на головній сторінці ми розміщуємо кнопку, щоб перейти на сторінку редагування, а на сторінці редагування – кнопку для повернення назад.
Проблема полягає в тому, що, хоча код компілюється та запускається, кнопки не працюють. Коли ми клікаємо на кнопку для переходу на сторінку редагування, нічого не відбувається. Здається, ми щось зробили неправильно з прив’язкою команд до кнопок або навігацією.
Давайте розглянемо код, який відповідає за навігацію з головної сторінки на сторінку редагування:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MySolution.Mobile.MainPlayerPage" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" Title="MainPlayerPage"> <VerticalStackLayout> <Label Text="Welcome to Main Player Page!" FontAttributes="Bold" FontSize="24" VerticalOptions="Center" HorizontalOptions="Center" /> <Button Text="Navigate To Edit Page" FontAttributes="Bold" FontSize="36" Margin="5,20,5,5" Command="{Binding NavigateToEditPageCommand}"> </Button> ... </VerticalStackLayout> </ContentPage> |
Подібно до коду, який відповідає за навігацію зі сторінки редагування назад на головну сторінку, проблема може бути пов’язана з правильністю прив’язок команд або з невірною настройкою навігації.
Ми також розглянемо код ViewModel та навігаційного сервісу, щоб переконатися, що вони налаштовані правильно.
1 2 3 4 5 6 7 8 9 10 |
// ViewModel namespace MySolution.Client.Core.ViewModels { public partial class MainPlayerViewModel : ObservableObject { ... } } |
1 2 3 4 5 6 7 8 9 10 |
// Навігаційний сервіс namespace MySolution.Mobile.Navigation { public class NavigationService : INavigationService { ... } } |
Детальне розглядання коду та виявлення можливих помилок допоможе нам знайти рішення для нашої проблеми з навігацією та командами в .NET Maui.