.NET Maui(XAML)垂直GridView布局与D-Pad导航实现求助

核心配置：CollectionView 优化调整 #

CollectionView本身支持D-Pad导航和网格布局，只需针对性配置就能满足需求，以下是具体实现步骤：

1. 基础布局与数据绑定 #

直接用VerticalGrid布局适配宽屏，同时开启单选项模式和方向导航循环：

<CollectionView 
    x:Name="MovieCollection"
    ItemsSource="{Binding Movies}"
    ItemsLayout="VerticalGrid, 5" <!-- 5列适配宽屏，可根据屏幕尺寸调整 -->
    SelectionMode="Single"
    SelectedItem="{Binding SelectedMovie}"
    KeyboardNavigation.TabNavigation="Cycle"
    KeyboardNavigation.DirectionalNavigation="Cycle">
    
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid 
                Padding="8"
                HeightRequest="200" <!-- 固定高度保证网格规整 -->
                Focusable="True"
                BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='Transparent,White'}">
                
                <!-- 点击跳转命令绑定 -->
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding BindingContext.NavigateToDetailCommand, Source={x:Reference MovieCollection}}"
                        CommandParameter="{Binding .}"/>
                </Grid.GestureRecognizers>

                <!-- 电影海报 -->
                <Image 
                    Source="{Binding PosterUrl}"
                    Aspect="AspectFill"
                    CornerRadius="8"/>
                <!-- 电影标题 -->
                <Label 
                    Text="{Binding Title}"
                    FontSize="14"
                    TextColor="White"
                    BackgroundColor="#80000000"
                    Padding="4"
                    HorizontalOptions="Start"
                    VerticalOptions="End"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

2. 选中项差异化样式实现 #

先定义布尔转颜色的转换器，用于切换选中/未选中的背景色：

<ContentPage.Resources>
    <local:BoolToColorConverter x:Key="BoolToColorConverter"/>
</ContentPage.Resources>

转换器C#代码：

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool isSelected && parameter is string colorPair)
        {
            var colors = colorPair.Split(',');
            return isSelected ? Color.FromArgb(colors[1].Trim()) : Color.FromArgb(colors[0].Trim());
        }
        return Colors.Transparent;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

3. D-Pad导航与焦点同步 #

为了让D-Pad焦点切换时自动同步选中状态，在后台添加焦点事件处理：

private void MovieItem_GotFocus(object sender, FocusEventArgs e)
{
    if (sender is Grid grid && grid.BindingContext is MovieModel movie)
    {
        MovieCollection.SelectedItem = movie;
    }
}

private void MovieItem_LostFocus(object sender, FocusEventArgs e)
{
    // 可选：失去焦点时取消选中，保留则注释此行
    // MovieCollection.SelectedItem = null;
}

记得在Item的Grid上绑定这两个事件：

<Grid ... GotFocus="MovieItem_GotFocus" LostFocus="MovieItem_LostFocus">

4. 点击跳转详情页 #

在ViewModel中实现导航命令：

public ICommand NavigateToDetailCommand { get; }

public MainViewModel(INavigation navigation)
{
    NavigateToDetailCommand = new Command<MovieModel>(async (movie) =>
    {
        if (movie != null)
        {
            await navigation.PushAsync(new MovieDetailPage(movie));
        }
    });
}

额外优化建议 #

• 宽屏动态适配：可通过绑定屏幕宽度计算VerticalGrid的列数，比如用OnIdiom或自定义绑定属性
• 焦点视觉强化：在Item的Grid中添加VisualStateManager定义焦点状态样式：

<Grid ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Focused">
                <VisualState.Setters>
                    <Setter Property="BorderColor" Value="Yellow"/>
                    <Setter Property="BorderWidth" Value="2"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

• 性能优化：数据量大时保留CollectionView默认的虚拟化布局，避免卡顿

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