xamarin 表单中的动态水平列表视图

Question

我需要在我的项目中集成动态水平列表视图。我在网站上的博客下面发现了这个概念。但是我混淆了这段代码以集成到我的项目中。请向任何人建议我的想法。我需要这种图像类型的网格或水平列表视图（https://i.stack.imgur.com/OvJZE.png）。

Mainpage.xaml.cs

public void SetupUserStack()
{


    ---------- issue in _itemSelectCommand in my code

    cButtonList.Add(new CircleButton(_itemSelectCommand)

     { CircleSize = otherCircleSize, CircleFontSize = 35, Text = initials, BackgroundColor = Color.White, TextColor = ourBlue, BorderColor = ourBlue, BorderWidth = 1.5 });
    var b2 = new Button() { Text = lname, TextColor = ourBlue };

    //otherGrid.Children.Add(LargeCB, 0, 0);


    otherGrid.Children.Add(cButtonList[i], 0, 0);


    otherGrid.Children.Add(b2, 0, 1);


    UserStack.Children.Add(otherGrid);

}

我参考的博客：horizontal-list-view-with-circular-button-styling-in-xamarin-forms

Answer 1

这是实现相同目的的另一种方法。 Xamarin 表单现在支持 Bindable Layouts

XAML 代码：

 <ScrollView  
   Orientation="Horizontal" 
   HorizontalScrollBarVisibility="Default">
     <StackLayout Margin="20,0,20,0"
                    Orientation="Horizontal"
                    BindableLayout.ItemsSource="{Binding LogoImages}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Image
                                HeightRequest="25"
                                Margin="0,0,5,0"
                                Source="{Binding logoImage}">
                            </Image>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>
            </ScrollView>

以下是示例的更多信息：

Bindable Layouts

Answer 2

使用collectionView 创建水平列表会更简单快捷，例如：

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </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" />

                //...your layout

            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Monkeys 应该是 ViewModel 中的列表。

您可以在这里查看带有 MVVM 结构的示例：collectionviewdemos

在您的链接博客中，他使用users.Count 动态创建网格，我认为很难将他的代码集成到 MVVM 结构中。