按钮命令未触发 .Net MAUI 中的方法

Question

我是 .Net MAUI 和 MVVM 结构的新手。我有 MainPage.xaml 和 DeletePage.xaml，并且两个页面中都有 1 个按钮，可以通过命令在 MainViewModel.cs 中触发 DeleteColor 方法。我可以从 MainPage.xaml 中放置的按钮触发 DeleteColor 方法，但不能从 DeletePage 中的按钮触发。

MainPage.xaml：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppYotubeDersi.MainPage"
             xmlns:viewmodel="clr-namespace:MauiAppYotubeDersi.ViewModel"
             x:DataType="viewmodel:MainViewModel"
             >
    


        <CollectionView ItemsSource="{Binding ColorItems}">
            

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type x:String}">
                    <Grid Padding="0, 4"
                    ColumnDefinitions=".80*,.20*">

                        <Frame Grid.Column="0"
                               Grid.RowSpan="2">


                            <Label Text="{Binding .}"
                                   x:Name="lbl_colorName"
                                   FontSize="Medium">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" >
                                        
                                    </TapGestureRecognizer>
                                </Label.GestureRecognizers>
                            </Label>

                        </Frame>

                        <Button x:Name="btn2"
                                Grid.Column="1"
                                Text="X"
                                BackgroundColor="Red"
                                Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}, Path=DeleteColorCommand}"
                                CommandParameter="{Binding .}"/>

                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>

        </CollectionView>
 
</ContentPage>

删除页面.xaml：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="MauiApp.DeletePage"
           xmlns:viewmodel="clr-namespace:MauiApp.ViewModel"
           x:DataType="viewmodel:MainViewModel"
           Title="DeleteColor">
  <VerticalStackLayout>
      
      <Entry x:Name="ent_DeleteColor"
             VerticalOptions="Center" 
             HorizontalOptions="Center"
             Text="a"
             />

      <Button x:Name="btn"
              Text="X"
              Command="{Binding DeleteColorCommand}"
              CommandParameter="{Binding Source={x:Reference ent_DeleteColor}, Path=Text}"/>
      
  </VerticalStackLayout>
</ContentPage>

MainViewModel.cs：

    public partial class MainViewModel : ObservableObject
 {
     [ObservableProperty]
     string color;


        [ObservableProperty]
        ObservableCollection<string> colorItems;

        public MainViewModel()
     {
         ColorItems = new ObservableCollection<string>();
     }

     [RelayCommand]
     void DeleteColor(string color)
     {
         if (colorItems.Contains(color))
         {
             ColorItems.Remove(color);
    Color = string.Empty;
}
        }
 }

Answer 1

嗯，根据你的评论，作为维基答案：

为DeletePage设置

BindingContext

可以解决这个问题。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="MauiApp.DeletePage"
           xmlns:viewmodel="clr-namespace:MauiApp.ViewModel"
           x:DataType="viewmodel:MainViewModel"
           Title="DeleteColor">
     <ContentPage.BindingContext>
           <viewmodel:MainViewModel/>
     </ContentPage.BindingContext>

或

public DeletePage()
{
    InitializeComponent();
    BindingContext = new MainViewModel();
}

值得一提的是，如果你想在整个程序运行过程中只保留一个 MainViewModel 实例，你可以使用依赖注入（MAUI 已经内置）。像这样：

在 MauiProgram.cs 中：

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        })
        .Services.AddSingleton<MainViewModel>()
        .AddTransient<MainPage>()
        .AddTransient<DeletePage>();
     ........

并为页面设置BindingContext：

public MainPage(MainViewModel viewModel)
{
    InitializeComponent();
    BindingContext = viewModel;
}

public DeletePage(MainViewModel viewModel)
{
    InitializeComponent();
    BindingContext = viewModel;
}