.Net maui 中的导航不起作用 - TapgestureRecognizer

Question

我是.net maui的新手。我想在主页和其他页面之间进行导航。我在yt上使用了这个教程：https://www.youtube.com/watch?v=ddmZ6k1GIkM但它不起作用。我不知道该怎么办。也许TapGestureRecognizer使用不好，或者一个框架应该在其他地方。(我使用CommunityToolkit.Mvvm。(

我应该使用与TapGestureRecognizer不同的东西吗？如果是，怎么做？你能推荐一些对我有帮助的教程吗？

我认为这个问题可能也与我尝试导航的方法有关——ViewModel中的MenuListViewSelectedItem。

链接到git：https://github.com/wojblaz/Clicer-Game---final

这是我的代码：

主页xaml:

<CollectionView ItemsSource="{Binding GameDescription}"
Grid.Row="2"
Margin="9,40"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="15"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:MainMenuModel">
<Frame BackgroundColor="#87c5ff">

<Frame.GestureRecognizers>
<TapGestureRecognizer 
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:MainMenuViewModel}}, Path=MenuListViewSelectedItem}"
CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
<Grid MaximumHeightRequest="165" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Name -->
<Label Text="{Binding Name}"
FontSize="30"
Grid.Row="1"
VerticalOptions="End"
FontFamily="Anton"
TextColor="White"
Grid.Column="0"/>

<!-- Description -->
<Label Text="{Binding Description}"
FontSize="Default"
FontFamily="FAS"
Grid.Row="2"
Grid.Column="0"
TextColor="#555"
Margin="0,10,10,25"/>
<!-- Nice image -->
<Image Source="{Binding Image}"
Grid.RowSpan="3"
MaximumHeightRequest="100"
MaximumWidthRequest="125"
Grid.Column="1"/>

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

主菜单视图模型：

public MainMenuViewModel()
{
LoadGameDescription();
}
[RelayCommand]
public void LoadGameDescription()
{
GameDescription = new()
{
new MainMenuModel (
Name : "Classic", 
Description : "Click as fast as you can." , 
Image :new Uri("https://cdn-icons-png.flaticon.com/512/2055/2055568.png")),

new MainMenuModel (
Name : "Race light", 
Description : "Test your reaction time." , 
Image : new Uri("https://cdn-icons-png.flaticon.com/512/2380/2380748.png")),
};


[RelayCommand] 
async public void MenuListViewSelectedItem(TapGestureRecognizer e)
{
switch (((MainMenuModel)e.CommandParameter).Name)
{
case "Classic":
await Shell.Current.GoToAsync(nameof(ClassicMode));
break;
/* 
case "Race light":
await Shell.Current.GoToAsync(nameof()); 
break;
*/
}
}
}

AppShell.xaml.cs

public AppShell()
{
InitializeComponent();
Routing.RegisterRoute(nameof(ClassicMode), typeof(ClassicMode));
}

ClassicMode.xaml.cs

public ClassicMode()
{
InitializeComponent();
BindingContext = new ClassicModelViewModel();
}

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

fonts.AddFont("OFree-Solid-900.otf", "FAS");
fonts.AddFont("Anton-Regular.ttf", "Anton");
});
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<MainMenuViewModel>();
builder.Services.AddTransient<ClassicMode>();
builder.Services.AddTransient<ClassicModelViewModel>();
return builder.Build();
}

Answer 1

您的命令使用了错误类型的参数。

应该是：

[RelayCommand] 
async void MenuListViewSelectedItem(MainMenuModel e)
{
switch (e.Name)
{
case "Classic":
await Shell.Current.GoToAsync(nameof(ClassicMode));
break;
//...
}
}

更新

在XAML中，您需要使用MenuListViewSelectedItemCommand而不是MenuListViewSelectedItem:

<TapGestureRecognizer 
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:MainMenuViewModel}}, Path=MenuListViewSelectedItemCommand}"
CommandParameter="{Binding .}"/>

这是因为您需要绑定到MVVM源生成器创建的命令，而不是方法本身。