.NET MAUI Flyout页面Command数据绑定失效问题求助

问题核心 #

开发.NET MAUI Flyout页面时，CollectionView的ItemTemplate中Button的Command绑定失效，报错：'No property, BindableProperty, or event found for "Command", or mismatching type between value and property.'，Title和IconSource绑定正常，仅Command无法触发。

错误原因 #

1. 类型不匹配：Flyout模型的Command属性定义为string类型，但Button的Command属性要求ICommand类型，类型不兼容导致绑定失败。
2. XAML绑定无效：在x:Array中直接通过{Binding ...}给Flyout的Command赋值是错误的，因为x:Array中的元素是直接实例化的对象，此处的Binding表达式不会被解析，无法关联到ViewModel中的RelayCommand。
3. 冗余的RelativeSource绑定：ItemTemplate的DataTemplate上下文本身就是单个Flyout对象，无需使用RelativeSource，反而会增加绑定复杂度。

修复步骤 #

1. 修改Flyout模型类 #

将Command属性类型改为ICommand，匹配Button的Command要求：

namespace Realizer.Models
{
    internal class Flyout
    {
        public string Title { get; set; }
        public string IconSource { get; set; }
        public ICommand Command { get; set; }     
    }
}

2. 在ViewModel中创建Flyout集合 #

将菜单数据逻辑移到ViewModel中，直接把RelayCommand赋值给每个Flyout项的Command属性：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Realizer.Models;
using System.Collections.Generic;

namespace Realizer.ViewModels
{
    public partial class MainPageViewModel : ObservableObject
    {
        public List<Flyout> FlyoutItems { get; set; }

        public MainPageViewModel()
        {
            // 初始化Flyout菜单集合，直接关联ViewModel中的命令
            FlyoutItems = new List<Flyout>
            {
                new Flyout { Title = "Home", IconSource = "home.png", Command = GoHomeCommand },
                new Flyout { Title = "Clients", IconSource = "person.png", Command = GoToClientsPageCommand },
                new Flyout { Title = "Products", IconSource = "medicine_bag.png", Command = GoToProductsPageCommand }
            };
        }

        [RelayCommand]
        private void GoToClientsPage()
        {
            Console.WriteLine("hi");
        }

        [RelayCommand]
        private void GoHome()
        {
            Console.WriteLine("hi home");
        }

        [RelayCommand]
        private void GoToProductsPage()
        {
            Console.WriteLine("hi pro");
        }
    }
}

3. 修改MainPage.xaml #

让CollectionView绑定ViewModel的FlyoutItems集合，简化ItemTemplate的绑定，去掉不必要的RelativeSource：

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:vm="clr-namespace:Realizer.ViewModels"
            xmlns:models="clr-namespace:Realizer.Models"
            xmlns:local="clr-namespace:Realizer.Pages"
            x:Class="Realizer.Pages.MainPage"
            x:DataType="vm:MainPageViewModel"
            Title="Home">

    <FlyoutPage.Flyout>
        <ContentPage Title="Home page" BackgroundColor="LightGrey">
            <VerticalStackLayout>
                <!-- 绑定ViewModel中的FlyoutItems集合 -->
                <CollectionView ItemsSource="{Binding FlyoutItems}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:Flyout">
                            <Grid Padding="20, 5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image Source="{Binding IconSource}" Scale="1.5"/>
                                <Button Grid.Column="1"
                                        Margin="5"
                                        Text="{Binding Title}"
                                        Command="{Binding Command}"
                                        FontSize="16"
                                        FontAttributes="Bold"
                                        TextColor="Black"
                                        HeightRequest="60"
                                        Padding="0,0,110,0"
                                        BackgroundColor="ForestGreen"/>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <Label Text="this is it" Margin="20"/>
            </VerticalStackLayout>
        </ContentPage>
    </FlyoutPage.Flyout>

    <FlyoutPage.Detail>
        <NavigationPage BarBackgroundColor="Navy"
                        BarTextColor="Black"
                        Title="Home">
            <x:Arguments>
                <ContentPage Title="Home" BackgroundColor="White">
                    <VerticalStackLayout>
                        <Label Text="this is detail" Margin="20"/>
                    </VerticalStackLayout>
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>

</FlyoutPage>

验证效果 #

修改完成后，运行应用，点击Flyout菜单中的按钮，对应的RelayCommand会被触发，控制台会输出对应的日志信息，绑定生效。

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