Xamarin Forms Listview - 为项目源中的每个项目使用自定义视图单元格

Question

我不确定这是否可行，或者是否有任何推荐的方法来实现这一点。本质上，我正在尝试使用 "jagged" 或列表视图中每个单元格的不同视图单元格的列表视图。作为一个超级简单的示例，我试图在列表视图的各自行中动态显示按钮、标签和条目。这是我的代码：

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Chaser.Views.Admin_Detail_MasterDetail_View">
    <ContentPage.Content>
        <StackLayout Orientation="Vertical"
                     Spacing="15"
                     Margin="10">
            <Label Text="{Binding ViewTitle, Mode=OneWay}"
                   FontSize="Large"
                   TextColor="Red"
                   FontAttributes="Bold" />
            <ListView ItemsSource="{Binding ItemViews, Mode=OneWay}"
                      SelectionMode="None"
                      PropertyChanged="ListView_PropertyChanged">
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

代码隐藏

public Admin_Detail_MasterDetail_View()
    {
        InitializeComponent();
        DetailViewContext = new Models.Detail_MasterDetail_Model();
        DetailViewContext.ViewTitle = "Info";

        DetailViewContext.ItemViews = new List<ViewCell>
        {
            new ViewCell
            {
                View = new Button
                {
                    Text = "TestButton"
                },
            },

            new ViewCell
            {
                View = new Label
                {
                    Text = "TestLabel"
                }
            },

            new ViewCell
            {
                View = new Entry
                {
                    Placeholder = "TestEntry"
                }
            }
        };

        BindingContext = DetailViewContext;
    }

注意：这也尝试了将堆栈布局添加到视图，然后将各个项目添加到堆栈布局，无论哪种方式，我都得到以下结果：

如果可能的话，我想在每个单元格视图的基础上进行命令绑定，因为一种类型的单元格可能具有与另一种不同的上下文菜单操作。

最后，视图单元格将比简单的按钮或标签复杂得多，但这是出于概念目的，看看这样的东西是否 possible/recommended。

经过一些简短的研究后，我发现我们可以创建一个数据模板选择器，但是，我不确定它是否适用于这种情况。至少，我不确定它是否允许基于每个单元格的自定义上下文菜单操作。

感谢您对此的任何意见！

Answer 1

我最终使用数据模板选择器来实现这一点。我创建了自定义视图单元格，然后在数据模板选择器中，我有一个到达模板的数据模板对象，它被设置为相应的视图单元格。

根据 This Microsoft 文档，配置起来相当简单。这也允许我为每种类型的视图单元定义自定义视图单元上下文操作。

Answer 2

经过大量研究，我在下面创建了带有测试数据的代码列表视图。

只需复制并粘贴代码并检查结果。

        <ListView HasUnevenRows="true"
                  RowHeight="200">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Item One</x:String>
                    <x:String>Item Two</x:String>
                    <x:String>Item Three</x:String>
                    <x:String>Item Four</x:String>
                    <x:String>Item Five</x:String>
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame BorderColor="Red" Padding="0">
                            <Grid Margin="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="90" />
                                    <RowDefinition Height="90"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <BoxView Grid.Row="0"
                                         Grid.Column="0"
                                         Color="Yellow" />
                                <BoxView Grid.Row="0"
                                         Grid.Column="1"
                                         Color="Black" />
                                <BoxView Grid.Row="1"
                                         Grid.Column="0"
                                         Color="Green" />
                                <BoxView Grid.Row="1"
                                         Grid.Column="1"
                                         Color="Blue" />
                                <Label Text="{Binding}"
                                       FontAttributes="Bold"
                                       TextColor="Red"
                                       HorizontalOptions="CenterAndExpand"
                                       VerticalOptions="CenterAndExpand"/>
                            </Grid>
                        </Frame>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Xamarin Forms Listview - 为项目源中的每个项目使用自定义视图单元格

Xamarin Forms Listview - Using custom view cell for each item in items source

xamarin

xamarin.forms

xamarin.forms.listview