Xamarin

Question

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

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

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

Answer 1

只能用CollectionView来实现。

有 CollectionView 的布局属性：Span

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

您可以按照下面的代码:

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

<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 link .

效果：

Xamarin - 可滚动的微型列表

Xamarin - scrollable minature list

c#

gallery

scrollable