弹出页面的数据绑定“未找到“Command”的属性、BindableProperty 或事件，或者值和属性之间的类型不匹配。”

Question

我正在使用 .Net MAUI 开发移动应用程序，但在 XAML 中进行数据绑定时遇到问题。我有

MainPage.xaml

从

MainPageViewModel.cs

接收数据，它继承自

ObservableObject

。

在

Flyout.cs

中，我有

Title

、

IconSource

和

Command

，并将它们放入

<DataTemplate>

中的

Mainpage.xaml

中。我将值传递给

<CollectionView.ItemSource>

中的每个属性，并且仅传递给

Command

，我正在传递

MainPageViewModel.xaml.cs

中定义的方法字符串。

我对如何在这里执行数据绑定感到困惑。

Title

和

IconSource

的值已正确绑定且可见，但只有

Command

不起作用。

我怎样才能让它发挥作用？

MainPage.xaml：

<?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>
                <CollectionView>
                    <CollectionView.ItemsSource>
                        <x:Array Type="{x:Type models:Flyout}">
                            <models:Flyout Title="Home"
                                       IconSource="home.png"
                                       Command="{Binding GoHomeCommand}"/>
                            <models:Flyout Title="Clients"
                                        IconSource="person.png"
                                        Command="{Binding GoToClientsPageCommand}"/>
                            <models:Flyout Title="Products"
                                        IconSource="medicine_bag.png"
                                       Command="{Binding GotoProductsPageCommand}"/>
                        </x:Array>
                    </CollectionView.ItemsSource>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="20, 5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image Source="{Binding IconSource, Source={RelativeSource AncestorType={x:Type models:Flyout}}}"
                                   Scale="1.5"/>
                                <Button Grid.Column="1"
                                    Margin="5"
                                    Text="{Binding Title, Source={RelativeSource AncestorType={x:Type models:Flyout}}}"
                                    Command="{Binding Command,Source={RelativeSource AncestorType={x:Type models:Flyout}}}"
                                    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>

MainPage.xaml.cs：

using Realizer.ViewModels;

namespace Realizer.Pages;

public partial class MainPage : FlyoutPage
{
    public MainPage(MainPageViewModel viewModel) {
        InitializeComponent();
        BindingContext = viewModel;
    }
}

MainPageViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace Realizer.ViewModels
{
    public partial class MainPageViewModel : ObservableObject
    {
        public MainPageViewModel()
        { 
        }

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

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

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

Flyout.cs

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

MauiProgram.cs

            builder.Services.AddSingleton<MainPage>();
            builder.Services.AddSingleton<MainPageViewModel>();

我在写代码时参考了这个教程。

我尝试了

Command="{Binding GoHomeCommand, Source={RelativeSource AncestorType={x:Type vm:MainPageViewModel}}}}"/>

，但我什至不确定我在这里做什么。

Answer 1

我没有弄清楚数据类型，而是在“MainPageViewModel.cs”中创建了一个“OnClick”方法，在“MainPage.xaml”中的

<Button>

中的

<DataTemplate>

中调用它，并删除了

<model:flyout>中的每个“Command”属性

.

MainPageViewModel.cs

：

  [RelayCommand]
  private async void OnClick(string page){
    if(page == "Home") ...//page navigation here
    else if (page == "Clients")...

  }

MainPage.xaml

：

<DataTemplate>
          ...
       <Button Grid.Column="1"
               Margin="5"
               Text="{Binding Title, Source={RelativeSource AncestorType={x:Type models:Flyout}}}"
               Command="{Binding ClickCommand, Source={RelativeSource AncestorType={x:Type vm:MainPageViewModel}}}"
               CommandParameter="{Binding Title, Source={RelativeSource AncestorType={x:Type models:Flyout}}}"/>
         ...
</DataTemplate>