如何用Xamarin Forms实现类Audible的数据库驱动滚动瓷砖列表？

嘿，我来帮你理清这个问题——首先明确：这些瓷砖完全不需要是XAML Button，而且你绝对能实现动态生成，不用一个个硬编码，刚好Xamarin Forms有完美的方案来匹配你的需求！

1. 瓷砖的最优选择：自定义容器+手势识别 #

比起直接用Button，我更推荐用ContentView或Frame作为瓷砖的容器，然后添加TapGestureRecognizer来处理点击。这样你可以完全自由定制瓷砖内部的布局（图片+短描述），样式可控性比Button强太多，而且交互效果和Button完全一致。

给你个简单的瓷砖模板示例：

<Frame Padding="10" Margin="5" CornerRadius="8" HasShadow="True">
    <Frame.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnTileTapped"/>
    </Frame.GestureRecognizers>
    <StackLayout VerticalOptions="Center">
        <Image Source="{Binding PartImage}" HeightRequest="80" Aspect="AspectFit"/>
        <Label Text="{Binding PartDescription}" FontSize="Small" HorizontalTextAlignment="Center"/>
    </StackLayout>
</Frame>

2. 动态生成瓷砖：用CollectionView实现网格布局 #

要避免硬编码，核心是用数据绑定+集合控件，这里首推CollectionView（Xamarin Forms 4.0及以上支持），它比传统的ListView更轻量，天生适合做网格排列的瓷砖列表。

具体步骤： #

第一步：创建配件数据模型

先定义一个类来存储每个PC配件的信息：

public class PcAccessory
{
    public string PartImage { get; set; } // 图片路径/资源名
    public string PartDescription { get; set; }
    public int PartId { get; set; } // 可选，用于跳转详情页时传递标识
}

第二步：在ViewModel中准备可观察集合

用ObservableCollection来存储配件列表，这样数据变化时UI会自动更新：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<PcAccessory> AccessoryList { get; set; } = new ObservableCollection<PcAccessory>();

    public MainViewModel()
    {
        // 这里模拟从数据库加载数据，实际项目里替换成你的数据库查询逻辑
        LoadAccessoriesFromDb();
    }

    private void LoadAccessoriesFromDb()
    {
        // 示例数据，实际从数据库获取后添加到集合
        AccessoryList.Add(new PcAccessory { PartImage = "cpu.png", PartDescription = "Intel i7-13700K" });
        AccessoryList.Add(new PcAccessory { PartImage = "gpu.png", PartDescription = "RTX 4070 Ti" });
        AccessoryList.Add(new PcAccessory { PartImage = "ram.png", PartDescription = "16GB DDR5 6000MHz" });
    }

    // 别忘了实现INotifyPropertyChanged接口，这里省略基础代码，你可以用MVVM框架（比如Prism、MvvmCross）简化
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

第三步：在XAML中绑定CollectionView

把CollectionView和你的ViewModel绑定，设置网格布局，再用DataTemplate定义每个瓷砖的样式：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage"
             x:Name="ThisPage">

    <ContentPage.BindingContext>
        <local:MainViewModel/>
    </ContentPage.BindingContext>

    <CollectionView ItemsSource="{Binding AccessoryList}">
        <!-- 设置每行显示2个瓷砖，可根据屏幕尺寸调整Span值 -->
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="2"/>
        </CollectionView.ItemsLayout>
        <!-- 定义瓷砖模板 -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Frame Padding="10" Margin="5" CornerRadius="8" HasShadow="True">
                    <Frame.GestureRecognizers>
                        <!-- 用Command来处理点击，更符合MVVM模式 -->
                        <TapGestureRecognizer Command="{Binding BindingContext.TileTappedCommand, Source={x:Reference ThisPage}}"
                                              CommandParameter="{Binding}"/>
                    </Frame.GestureRecognizers>
                    <StackLayout VerticalOptions="Center">
                        <Image Source="{Binding PartImage}" HeightRequest="80" Aspect="AspectFit"/>
                        <Label Text="{Binding PartDescription}" FontSize="Small" HorizontalTextAlignment="Center"/>
                    </StackLayout>
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

第四步：处理瓷砖点击事件

在ViewModel中添加Command来处理点击，跳转到详情页：

public ICommand TileTappedCommand => new Command<PcAccessory>(OnTileTapped);

private async void OnTileTapped(PcAccessory selectedAccessory)
{
    // 跳转到配件详情页，传递选中的配件数据
    await Application.Current.MainPage.Navigation.PushAsync(new AccessoryDetailPage(selectedAccessory));
}

3. 关于用Button的选项（不推荐） #

如果你一定要用Button，也可以把Button的Content设置为包含图片和标签的布局，但Button自带的默认样式（比如边框、点击高亮）需要额外修改，灵活性远不如Frame+GestureRecognizer的方案，所以不建议这么做。

总的来说，用CollectionView动态绑定数据+自定义瓷砖模板，完全能实现你想要的Audible风格瓷砖列表，而且全程不需要硬编码任何一个瓷砖，数据直接从数据库加载即可。

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