如何在Xamarin.Forms中创建多列ListView?

4

我有一个只有一列的listview,但是我希望像repeater那样将它分成两列。在xamarin.forms中是否可能实现?

4个回答

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

模型

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;

        }
    }

5

我认为你可以使用ViewCell创建一个DataTemplate。在ViewCell中添加一个Rows=1、Columns=2的Grid。

就像这个示例一样:

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

在这里,您可以找到有关数据模板创建的说明。 点击此处

我发现这个解决方案很有用,但我们仍然需要为每个项目的点击监听器做一些变通。 - SREE

3

这个问题已经不再相关,但答案是CollectionView ;)


非常感谢提供没有第三方组件的实际解决方案。 <GridItemsLayout Span="3" />有所帮助。 - Oleg Bondarenko
完美的解决方案。非常感谢。 - A. Dzebo

2

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接