Display ListView Data in 2 columns using Xamarin Cross-Platform C# Visual Studio 2019

Question

I'm using Visual Studio 2019 to develop Cross-Platform Mobile App (iOS & Android) via Xamarin C#.

I want to display my data in ListView via 2 columns. But, I've no idea how to do it. As far of my knowledge, I know the ListView is only display in 1 columns.

public MainPage()
        {
            InitializeComponent();

            ObservableCollection<CardInfo> Name = new ObservableCollection<CardInfo>{
                new CardInfo{BrandName = "Brand 1"},
                new CardInfo{BrandName = "Brand 2"},
                new CardInfo{BrandName = "Brand 3"},
                new CardInfo{BrandName = "Brand 4"},
                new CardInfo{BrandName = "Brand 5"},
                new CardInfo{BrandName = "Brand 6"},
                new CardInfo{BrandName = "Brand 7"},
                new CardInfo{BrandName = "Brand 8"},
                new CardInfo{BrandName = "Brand 9"},
                new CardInfo{BrandName = "Brand 10"}

            };            

            ListViewName.ItemsSource = Name;

<ListView x:Name="ListViewName" HasUnevenRows="True" HorizontalOptions="Start" VerticalOptions="Start" VerticalScrollBarVisibility="Never" >

        <ListView.ItemTemplate>

            <DataTemplate>
                <ViewCell >
                    <Grid  >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                            <Frame Style="{StaticResource FrameStyle}" Grid.Row="0" Grid.Column="0"  >
                                <Label Text="{Binding BrandName}" Style="{StaticResource LabelStyle}"  />
                            </Frame>

                            <Frame Style="{StaticResource FrameStyle}" Grid.Row="0" Grid.Column="1"  >
                                <Label Text="{Binding BrandName}" Style= {StaticResource LabelStyle}"  />
                            </Frame>                
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

What is the Value in the second Frame?

VahidShir
– VahidShir

2019-06-05 09:16:38 +00:00
Commented Jun 5, 2019 at 9:16 — VahidShir
– VahidShir, Commented Jun 5, 2019 at 9:16
What is Value?

bolkay
– bolkay

2019-06-05 09:17:00 +00:00
Commented Jun 5, 2019 at 9:17 — bolkay
– bolkay, Commented Jun 5, 2019 at 9:17

VahidShir · Accepted Answer · 2019-06-05 13:20:19Z

2

If you want a listview with multiple columns(i.e multiple model items in a row) you can use FlowListView library.

<flv:FlowListView FlowColumnCount="2" FlowItemsSource="{Binding Name}" >

    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>

            <Frame Style="{StaticResource FrameStyle}"  >
                   <Label Text="{Binding BrandName}" Style="{StaticResource LabelStyle}"  />
            </Frame>

        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>

</flv:FlowListView>

edited Jun 5, 2019 at 13:20

answered Jun 5, 2019 at 13:13

VahidShir

2,1262 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

VV Voon Over a year ago

after install this flowlistview and copy your code above, debug it and the result become blank. Nothing display on the android simulator. :(

VV Voon Over a year ago

Hi sir, after I do some amendment, it is works perfectly for me. The amend I did is : I delete the FlowItemsSource="{Binding Name}" in XAML file, then assign name to the flowlistview, x:Name="ListViewName". After that, in cs file, I just add a line : ListViewName.FlowItemsSource = Name; Then, it's works! Do you have any idea why only this way is works?

VahidShir Over a year ago

My code was just a sample code to show you just the idea and it's in MVVM manner .But yours is in code-behind way.

iSpain17 · Accepted Answer · 2019-06-05 09:21:57Z

0

You are missing the Value property inside the CardInfo class. Because that is what the line

<Label Text="{Binding Value}" Style= {StaticResource LabelStyle}"  />

is looking for. The BindingContext is the object to represent from the ItemsSource (in your case, ItemsSource is the Name ObserveableCollection) by default in a ListView item. So it is a CardInfo object. The CardInfos in your ObserveableCollection do not have this property.

answered Jun 5, 2019 at 9:21

iSpain17

3,1403 gold badges22 silver badges34 bronze badges

1 Comment

VV Voon Over a year ago

Hi sir, sorry is my mistake. the result that I want is, I want to display my card info in 2 columns. Means each row will display 2 brands side by side. But, so far, as I know the listivew is only display in 1 column by default.

Saamer · Accepted Answer · 2019-06-05 16:33:50Z

0

Yes you can have multiple columns, it is all controlled by the way you code design your list view item template using properties like width and minimum width. You can also use a grid within your item template that will help you take care of it.

Here's a good example from the Microsoft Xamarin's official documentation to help you.

answered Jun 5, 2019 at 16:33

Saamer

5,1591 gold badge18 silver badges74 bronze badges

2 Comments

VV Voon Over a year ago

because my listview's object data is dynamic, means it can be any number of object. data. I want using listview to display my data with 2 columns (side by side). So, if the number of object is 10, i need to add 5 rows in grid. But, what happen the number of object turn to 100?

Saamer Over a year ago

Yeah and that's a perfect reason to use the C# example in the code shown in the link.

Collectives™ on Stack Overflow

Display ListView Data in 2 columns using Xamarin Cross-Platform C# Visual Studio 2019

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related