Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create multiple columns ListView in Xamarin.Forms ?

I have listview of one column, but i wanted to divide into two like a repeater. Is it possible in xamarin.forms ?

like image 511
Santosh Thapa Avatar asked Sep 15 '25 03:09

Santosh Thapa


2 Answers

    <ContentPage.Content>

        <StackLayout>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30*" />
                    <ColumnDefinition Width="30*" />
                    <ColumnDefinition Width="30*" />
                </Grid.ColumnDefinitions>
                <Label  Grid.Column="0" Grid.Row="0" Text="ID"/>
                <Label  Grid.Column="1" Grid.Row="0" Text="USERS"/>
                <Label Grid.Column="2" Grid.Row="0" Text="PASSWORD"/>

            </Grid>


        <ListView x:Name="listx">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30*" />
                                <ColumnDefinition Width="30*" />
                                <ColumnDefinition Width="30*" />
                            </Grid.ColumnDefinitions>

                            <Label  Grid.Column="0" Text="{Binding id}"/>
                            <Label  Grid.Column="1" Text="{Binding usr}"/>
                            <Label Grid.Column="2" Text="{Binding pass}"/>
                        </Grid>



                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
        </StackLayout>

    </ContentPage.Content>
</ContentPage>

MODEL

public class UserModel
    {
        [PrimaryKey,AutoIncrement]
        public int id { get; set; }
        public string usr { get; set; }
        public string pass { get; set; }


    }

contentPage.xaml.cs

public partial class UserPage : ContentPage
    {

        ObservableCollection<UserModel> Usr_List = new ObservableCollection<UserModel>();

        public UserPage ()
        {
            InitializeComponent ();
            //test data population
            this.Usr_List.Add(new UserModel { id = 1, usr = "test", pass = "test" });
            this.Usr_List.Add(new UserModel { id = 2, usr = "test1", pass = "test1" });
            this.Usr_List.Add(new UserModel { id = 3, usr = "test2", pass = "test2" });

            listx.ItemsSource = this.Usr_List;

        }
    }
like image 82
Rouzbeh Zarandi Avatar answered Sep 16 '25 18:09

Rouzbeh Zarandi


I think you can create a DataTemplate with a ViewCell. Add a Grid to the ViewCell with Rows=1 and Columns=2

something like this sample

<ListView x:Name="listView">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <Grid>
          ...
          <Label Text="{Binding Name}" FontAttributes="Bold" />
          <Label Grid.Column="1" Text="{Binding Age}" />
          <Label Grid.Column="2" Text="{Binding Location}" ... />
        </Grid>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

here you can find the description

like image 39
Alessandro Caliaro Avatar answered Sep 16 '25 18:09

Alessandro Caliaro