Xamarin - 可滚动的微型列表答案

【问题标题】：Xamarin - scrollable minature listXamarin - 可滚动的微型列表
【发布时间】：2020-03-16 13:33:03
【问题描述】：

我已经浏览了我在这里找到的所有文章和代码，但其中大多数似乎已经过时，或者使用了外部工具。

我需要创建一个包含两列且可滚动的微型画廊。我的方法是在每个元素中使用一个集合视图或一个带有网格的列表视图。

但不确定这是正确的方法。使用 xamarin 中可用的当前工具创建一个 2 列的可滚动微型画廊，当前好的解决方案是什么？

【问题讨论】：

标签： c# xamarin gallery scrollable

【解决方案1】：

你只能使用CollectionView来实现它。

有CollectionView的布局属性：Span

Span，类型为 int，表示要在网格中显示的列数或行数。此属性的默认值为 1，其值必须始终大于或等于 1。

您可以按照下面的代码：

Vertical list：CollectionView 可以通过将其 ItemsLayout 属性设置为 Orientation 属性设置为 Vertical 的 GridItemsLayout 对象在垂直网格中显示其项目：

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <!--<Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />-->
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

ContentPage中绑定的模型：

public partial class VerticalGridPage : ContentPage
{
    public VerticalGridPage()
    {
        InitializeComponent();
        BindingContext = new MonkeysViewModel();
    }
}

关于MonkeysViewModel.cs，你可以看看这个official sample链接。

效果：

【讨论】：

非常感谢！您能否也分享您设置绑定的代码？如果我做对了，如果我只需要没有文字的图片，我会删除整个“网格”部分和所有标签，只留下数据模板中的图像。对吗？
@sharkyenergy Okey ，绑定在 ContentPage 中。我已经更新了答案。