Проблема навігації та команд в .NET Maui: розбираємося детально

7 Березня 2024 в 19:50 25

З підходом до створення мобільних додатків на базі .NET Maui виникає багато нових запитань і проблем. Однією з них є ефективне використання навігації та команд. В цій статті ми розглянемо простий сценарій навігації та використання команд з .NET Maui та з’ясуємо, що може йти не так.

Розглянемо сценарій: ми маємо дві візуалізовані сторінки та відповідні до них ViewModel. Задача полягає в тому, щоб перейти з головної сторінки на сторінку редагування і повернутися назад. Для цього на головній сторінці ми розміщуємо кнопку, щоб перейти на сторінку редагування, а на сторінці редагування – кнопку для повернення назад.

Проблема полягає в тому, що, хоча код компілюється та запускається, кнопки не працюють. Коли ми клікаємо на кнопку для переходу на сторінку редагування, нічого не відбувається. Здається, ми щось зробили неправильно з прив’язкою команд до кнопок або навігацією.

Давайте розглянемо код, який відповідає за навігацію з головної сторінки на сторінку редагування:

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

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

<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 та навігаційного сервісу, щоб переконатися, що вони налаштовані правильно.


// ViewModel
namespace MySolution.Client.Core.ViewModels
{
    public partial class MainPlayerViewModel : ObservableObject
    {
        ...
    }
}

// ViewModel

namespace MySolution.Client.Core.ViewModels

{

public partial class MainPlayerViewModel : ObservableObject

{

...

}


// Навігаційний сервіс
namespace MySolution.Mobile.Navigation
{
    public class NavigationService : INavigationService
    {
        ...
    }
}

// Навігаційний сервіс

namespace MySolution.Mobile.Navigation

{

public class NavigationService : INavigationService

{

...

}

Детальне розглядання коду та виявлення можливих помилок допоможе нам знайти рішення для нашої проблеми з навігацією та командами в .NET Maui.

Останні новини

Затримано підозрюваного у вчиненні умисного заподіяння тілесних ушкоджень патрульному поліцейському в Вознесенському районі

14 Серпня 2023 в 14:49

Підвищення цін на проїзд в приміському автотранспорті

20 Липня 2023 в 20:26

Прем’єри тижня: “Барбі” та “Оппенгеймер”

17 Липня 2023 в 21:15

Читайте також

Як отримати від 100 грн за реєстрацію в ПУМБ

14 Серпня 2023 в 15:14

Як отримати від 100 грн за реєстрацію в Sense SuperApp (Альфа-Банк)

3 Липня 2023 в 13:22

Як економити на онлайн-покупках с кешбек-сервісом LetyShops

3 Липня 2023 в 13:04