Dynamic Horizontal List View in xamarin forms

0
votes

I need to integrate the Dynamic horizontal listview in my project. I found this concept below blog on the website. But I confused this code to integrate into my project. Kindly suggest me an idea to anyone. I need this image type grid or horizontal listview( 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);

}

Blog I refer: horizontal-list-view-with-circular-button-styling-in-xamarin-forms

2
xamarin.formscross-platform
What do you really want? A horizontal listview? Any requirement? – Jack Hua
i attached the below blog website for reference horizontal listview can u check that? – jelin Tirsha
I did not know but how to integrate that blog website code into my project in MVVM structure – jelin Tirsha
Use a collectionView instead and then bind the itemSource to the property in your ViewModel. – Jack Hua
can u gave me idea to integrate below reference to my project. – jelin Tirsha

2 Answers

0
votes

This is the another way to achieve the same thing. Xamarin forms now support the Bindable Layouts

XAML Code:

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

Here is more information with the example :

Bindable Layouts

0
votes

Use a collectionView to create a horizontal-list would be easier and faster, for example:

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

The Monkeys should be a list that in your ViewModel.

You can check the sample with MVVM structure here:collectionviewdemos

In your linking blog, he creates the grid dynamically with the users.Count and I think it hard to integrate his code to MVVM structure.