Xamarin表单列表视图-对items源中的每个项使用自定义视图单元格

Xamarin表单列表视图-对items源中的每个项使用自定义视图单元格,xamarin,xamarin.forms,xamarin.forms.listview,Xamarin,Xamarin.forms,Xamarin.forms.listview,我不确定这是否可行,或者是否有任何建议的方法来实现这一点。本质上,我试图在列表视图中为每个单元格创建一个具有“锯齿状”或不同视图单元格的列表视图。作为一个超级简单的示例,我尝试在列表视图的各自行中动态显示按钮、标签和条目。这是我的密码: XAML 代码隐藏 public Admin_Detail_MasterDetail_View() { InitializeComponent(); DetailViewContext = new Models.Det

我不确定这是否可行,或者是否有任何建议的方法来实现这一点。本质上,我试图在列表视图中为每个单元格创建一个具有“锯齿状”或不同视图单元格的列表视图。作为一个超级简单的示例,我尝试在列表视图的各自行中动态显示按钮、标签和条目。这是我的密码:

XAML


代码隐藏

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;
    }
public Admin\u Detail\u MasterDetail\u View()
{
初始化组件();
DetailViewContext=新模型。Detail_MasterDetail_Model();
DetailViewContext.ViewTitle=“信息”;
DetailViewContext.ItemViews=新列表
{
新视窗单元
{
视图=新建按钮
{
Text=“TestButton”
},
},
新视窗单元
{
视图=新标签
{
Text=“TestLabel”
}
},
新视窗单元
{
视图=新条目
{
占位符=“TestEntry”
}
}
};
BindingContext=DetailViewContext;
}
注意:还尝试将堆栈布局添加到视图中,然后将各个项目添加到堆栈布局中,无论哪种方式,我都会得到以下结果:

如果可能的话,我希望每个cellview都有命令绑定,因为一种类型的单元格可能有不同的上下文菜单操作

最后,视图单元格将比简单的按钮或标签复杂得多,但这只是为了概念目的,看看这样做是否可行/推荐

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


感谢您对此的任何意见

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


遵循MicrosoftDoc,配置起来相当简单。这还允许我为每种类型的视图单元格定义自定义视图单元格上下文操作。

经过大量研究,我在下面创建了代码Listview和测试数据

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

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

项目一
项目二
项目三
项目四
项目五

将ListView绑定到数据源,并让它基于模板构建UI。您不会将其绑定到UI元素列表。如果每个单元格都不同,或者大部分都不同,那么使用ListView可能是错误的方法,而不仅仅是手动构建UI。对于同一UI的某些项,可以检查DataTemplateSelector:如果对每个项使用自定义视图单元格,则ListView不应适用。
        <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>