How to separate a list by columns

1

My MainPage.xaml

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS=" 0,0,0,0"
                Android="0,0,0,0"
                WinPhone="12,10,12,10"></OnPlatform>
</ContentPage.Padding>

<StackLayout>
    <ListView x:Name="EmployeeViewList" SeparatorVisibility="Default">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal" Padding="0,0,0,1">
                        <Label Text="{Binding Id}" />
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding Name}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

my MainPage.xaml.cs

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace rargMobile
{
    public partial class MainPage : ContentPage
    {
        public class Employee
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }
        List<Employee> employees = new List<Employee>();

        public MainPage()
        {
            InitializeComponent();

            employees.Add(new Employee { Id = 1, Name = "Rob Finnerty" });
            employees.Add(new Employee { Id = 2, Name = "Bill Wrestler" });
            employees.Add(new Employee { Id = 4, Name = "Dr. Geri-Beth Hooper" });
            employees.Add(new Employee { Id = 5, Name = "Dr. Keith Joyce-Purdy" });
            employees.Add(new Employee { Id = 6, Name = "Sheri Spruce" });
            employees.Add(new Employee { Id = 7, Name = "Burt Indybrick" });
            EmployeeViewList.ItemsSource = employees;

        }
    }
}

I want to show my list in this way this I did in windowsform with the same method, model and data.

This is what I was able to get to duplicate the last column so they can see that they are not separated by cells

This is another attempt

Is there another method to separate by columns?

    
asked by Rodrigo Rodriguez 21.06.2018 в 04:48
source

1 answer

1

Good in this case you want to make a table so I think you can use Grid.

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

You can see that I create a row and three columns as what you want.

So what would be left as follows:

    <StackLayout>
    <ListView x:Name="EmployeeViewList" SeparatorVisibility="Default">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                     <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding Id}" Grid.Column="0"/>
                        <Label Text="{Binding Name}" Grid.Column="1"/>
                        <Label Text="{Binding Name}" Grid.Column="2"/>
                    </Grid>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>
    
answered by 21.06.2018 в 09:04