XAML ListView 元素内的小型多列列表

Question

在我的 Xamarin 应用程序中，我有一个 ListView，在 ItemTemplate 中，我必须显示一个包含 3 列的纯文本列表。

第一个想法是使用 GroupedListView，但在这种情况下，所有子条目都可以单独选择。那不是我想要的。 ListView 项应显示为一个可选元素。

我在研究中发现的第二个想法是通过代码添加 Gridview 行，但这会破坏我的 MVVM 概念。我需要一个仅适用于数据绑定的解决方案。

我有时读到的第三件事是：在 ListView 内级联 ListView。但大多数人对这种想法的回答是：“永远不要这样做”。

还有其他想法吗？我想要的是这样的：

ListView Entry 1
     04:13      Jhonny           3,24$
     09:45      Some Long Nam... 8,23$
     14:42      Mike             5,45$
----------------------------------------
ListView Entry 2
     07:13      Jhonny           3,24$
     11:22      Some Long Nam... 8,23$
     18:42      Mike             5,45$
----------------------------------------
ListView Entry 3
     05:13      Jhonny           3,24$
     15:45      Some Long Nam... 8,23$
     19:42      Mike             5,45$
----------------------------------------

始终应将整个 Listview 条目作为一个元素进行选择。

Answer 1

猜猜您可以使用 BindableLayout。你没有指定类型，所以我做了一个虚拟类型。查看：

<CollectionView ItemsSource="{Binding GroupItems}" SelectionMode="Single">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Orientation="Vertical" Margin="5">
                <Label Text="{Binding Title}"/>
                <StackLayout BindableLayout.ItemsSource="{Binding Entries}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Time}" HorizontalTextAlignment="Center"/>
                                <Label Text="{Binding Name}" Grid.Column="1" LineBreakMode="TailTruncation"/>
                                <Label Text="{Binding Amount}" Grid.Column="2" HorizontalTextAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                  
                </StackLayout>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

代码隐藏：

 public ObservableCollection<GroupItem> GroupItems { get; set; } = new ObservableCollection<GroupItem>();
    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
        GroupItem item1 = new GroupItem();
        item1.Title = "Entry 1";
        item1.Entries.Add(new Entry { Time = "10:13", Name = "Johnny", Amount = "10,24$" });
        item1.Entries.Add(new Entry { Time = "12:11", Name = "Some long name that will be truncated", Amount = "20,14$" });
        item1.Entries.Add(new Entry { Time = "10:13", Name = "Mike", Amount = "14,27$" });
        GroupItems.Add(item1);  

        GroupItem item2 = new GroupItem();
        item2.Title = "Entry 2";
        item2.Entries.Add(new Entry { Time = "11:13", Name = "Finn", Amount = "10,24$" });
        item2.Entries.Add(new Entry { Time = "14:11", Name = "Some long name that will be truncated", Amount = "20,14$" });
        GroupItems.Add(item2);
        
        GroupItem item3 = new GroupItem();
        item3.Title = "Entry 3";
        item3.Entries.Add(new Entry { Time = "11:13", Name = "Finn", Amount = "10,24$" });
        item3.Entries.Add(new Entry { Time = "14:11", Name = "Some long name that will be truncated", Amount = "20,14$" });
        item3.Entries.Add(new Entry { Time = "14:11", Name = "Martin", Amount = "50,15$" });
        item3.Entries.Add(new Entry { Time = "14:11", Name = "Elon musk", Amount = "30,14$" });
        GroupItems.Add(item3);
    }

    public class GroupItem
    {
        public string Title { get; set; }
        public List<Entry> Entries { get; set; } = new List<Entry>();
    }

    public class Entry 
    {
        public string Time { get; set; }
        public string Name { get; set; }
        public string Amount { get; set; }
    }

这为您提供了动态行数的可能性，并且每个组都是可选的。

结果：

XAML ListView 元素内的小型多列列表

XAML small Multicolumn List inside LiesView Element

xaml

listview

xamarin

xamarin.forms