如何让Xamarin的CarouselView可点击并实现页面导航？

下面提供两种实用的实现方式，适配不同的开发习惯：

方法一：手势绑定命令（MVVM模式推荐） #

直接在你的ItemTemplate里给可点击元素（比如Frame）添加手势识别器，绑定到ViewModel的跳转命令，同时传递当前项作为参数：

<CarouselView ItemsSource="{Binding Games}" HeightRequest="280" PeekAreaInsets="100">
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="viewmodels:NewGames">
            <StackLayout>
                <Frame HeightRequest="300" 
                       WidthRequest="180" 
                       BackgroundColor="white" 
                       Padding="0" 
                       CornerRadius="10"
                       HasShadow="True" 
                       Margin="15"
                       HorizontalOptions="CenterAndExpand">
                    <!-- 添加点击手势 -->
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:YourViewModel}}, Path=NavigateToGameCommand}"
                            CommandParameter="{Binding .}" />
                    </Frame.GestureRecognizers>
                    
                    <Grid>
                        <StackLayout BackgroundColor="DimGray">
                            <Image Source="{Binding ImageSource}" Aspect="AspectFill"></Image>
                        </StackLayout>
                        <StackLayout Margin="-5">
                            <Label Text="{Binding GameTitle}" 
                                   TextColor="PaleGoldenrod"
                                   FontSize="18" 
                                   FontAttributes="Bold"
                                   Margin="15"
                                   VerticalOptions="EndAndExpand"/>
                        </StackLayout>
                    </Grid>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

然后在你的ViewModel中实现跳转命令（这里以CommunityToolkit.Mvvm的RelayCommand为例，也可以自己实现ICommand）：

using Xamarin.Forms;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;

public class YourViewModel : INotifyPropertyChanged
{
    public ObservableCollection<NewGames> Games { get; set; } = new ObservableCollection<NewGames>();

    public ICommand NavigateToGameCommand { get; }

    public YourViewModel()
    {
        NavigateToGameCommand = new RelayCommand<NewGames>(ExecuteNavigate);
    }

    private void ExecuteNavigate(NewGames selectedGame)
    {
        if (selectedGame == null) return;

        // 跳转普通页面
        Application.Current.MainPage.Navigation.PushAsync(new GameDetailPage(selectedGame));
        
        // 若使用Shell导航（需提前注册路由）
        // await Shell.Current.GoToAsync($"//GameDetail?GameId={selectedGame.Id}");
    }

    // 实现INotifyPropertyChanged的代码（省略，你应该已具备）
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

如果未使用CommunityToolkit.Mvvm，可以自己实现一个简单的RelayCommand：

public class RelayCommand<T> : ICommand
{
    private readonly Action<T> _execute;
    private readonly Func<T, bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<T> execute, Func<T, bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute == null || _canExecute((T)parameter);

    public void Execute(object parameter) => _execute((T)parameter);

    public void RaiseCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}

方法二：ItemSelected事件（代码后台处理） #

如果偏好直接在页面后台处理逻辑，可给CarouselView绑定ItemSelected事件：

修改XAML添加事件：

<CarouselView ItemsSource="{Binding Games}" HeightRequest="280" PeekAreaInsets="100"
              ItemSelected="CarouselView_ItemSelected">
    <!-- 你的ItemTemplate代码保持不变 -->
</CarouselView>

在页面的.cs文件中实现事件处理：

private async void CarouselView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    var selectedGame = e.SelectedItem as NewGames;
    if (selectedGame == null) return;

    // 执行跳转
    await Navigation.PushAsync(new GameDetailPage(selectedGame));
    
    // Shell导航写法
    // await Shell.Current.GoToAsync($"//GameDetail?GameId={selectedGame.Id}");

    // 可选：取消选中状态，避免重复触发
    ((CarouselView)sender).SelectedItem = null;
}

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