.NET Maui命令导航场景问题：按钮绑定无响应如何排查？

核心问题：命令是字段而非属性 #

XAML数据绑定仅支持绑定属性（Property），而你的MainPlayerViewModel中，NavigateToEditPageCommand和ChangeSecondLabelTextCommand是字段（Field），这直接导致绑定失效，按钮点击无响应。

修改方案：将命令改为属性 #

有两种方式修复：

方式1：手动将字段改为属性

修改MainPlayerViewModel.cs中的命令定义，从字段改为带get访问器的属性：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MySolution.Client.Core.Navigation;

namespace MySolution.Client.Core.ViewModels
{
    public partial class MainPlayerViewModel : ObservableObject
    {
        [ObservableProperty]
        private String _identifier = "Just to make sure the BindingContext is set properly...";

        private readonly INavigationService navigationService;

        // 改为属性（添加get访问器）
        public IAsyncRelayCommand NavigateToEditPageCommand { get; }
        public AsyncRelayCommand ChangeSecondLabelTextCommand { get; }

        public MainPlayerViewModel(INavigationService navigationService)
        {
            this.navigationService = navigationService;
            NavigateToEditPageCommand = new AsyncRelayCommand(NavigateToEditPage);
            ChangeSecondLabelTextCommand = new AsyncRelayCommand(ChangeSecondLabelText);
        }

        private Task NavigateToEditPage()
            => navigationService.GoToEdit();

        private Task ChangeSecondLabelText()
        {
            Identifier = "And now we change the text of the second label...";
            return Task.CompletedTask;
        }
    }
}

方式2：使用CommunityToolkit的[RelayCommand]特性（更简洁推荐）

利用MVVM Toolkit的特性自动生成命令属性，无需手动实例化：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MySolution.Client.Core.Navigation;

namespace MySolution.Client.Core.ViewModels
{
    public partial class MainPlayerViewModel : ObservableObject
    {
        [ObservableProperty]
        private String _identifier = "Just to make sure the BindingContext is set properly...";

        private readonly INavigationService navigationService;

        public MainPlayerViewModel(INavigationService navigationService)
        {
            this.navigationService = navigationService;
        }

        // 自动生成NavigateToEditPageCommand属性
        [RelayCommand]
        private Task NavigateToEditPage()
            => navigationService.GoToEdit();

        // 自动生成ChangeSecondLabelTextCommand属性
        [RelayCommand]
        private Task ChangeSecondLabelText()
        {
            Identifier = "And now we change the text of the second label...";
            return Task.CompletedTask;
        }
    }
}

其他优化点 #

1. 移除命令绑定的Mode=TwoWay：命令绑定默认是OneWay，不需要显式设置Mode=TwoWay，修改XAML中的按钮绑定：

   <Button Text="Change Text on Second Label"
           FontAttributes="Bold"
           FontSize="36"
           Margin="5,20,5,5"
           Command="{Binding ChangeSecondLabelTextCommand}">
   </Button>
   

2. 确认Shell路由的初始页面：确保AppShell的初始路由指向MainPlayerPage，如果默认不是，可以在AppShell.xaml中设置：

   <ShellContent Route="MainPlayerPage" ContentTemplate="{DataTemplate local:MainPlayerPage}" />
   

完成以上修改后，命令绑定应该能正常生效，按钮点击会触发导航和标签文本修改操作。

内容的提问来源于stack exchange，提问作者Skyraider