Xamarin 在 CollectionView 中形成 Rowspan

Question

我有问题。 我用一些虚拟交易创建了这个 CollectionView，现在看起来像这样：

现在这几乎就像我想要的那样，除了一件事：我希望最后一列在两行上都获得一个行跨度，如下所示：

现在，如果这是一个常规网格，我可以使用 Grid.RowSpawn 来完成，但它是在 CollectionView 中，因为我可以进行很多交易。 CollectionView 的缺点是每一行都是不同的 Grid，所以它们实际上是没有连接的！这是我现在的代码：

<CollectionView ItemsSource="{Binding agentOrderList}" Margin="0" HeightRequest="450">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid RowSpacing="0">
                <StackLayout Orientation="Vertical">
                    <StackLayout HorizontalOptions="FillAndExpand" HeightRequest="1" BackgroundColor="White"/>
                    <Grid RowSpacing="0" Margin="5,0,5,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="21" />
                            <RowDefinition Height="21" />
                            <RowDefinition Height="4" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="65" />
                            <ColumnDefinition Width="95" />
                            <ColumnDefinition Width="40" />
                            <ColumnDefinition Width="75" />
                            <ColumnDefinition Width="82" />
                        </Grid.ColumnDefinitions>

                        <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Text="{Binding Date}" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18" VerticalOptions="CenterAndExpand"/>
                        <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Text="{Binding Action}" TextColor="White" FontSize="18" VerticalOptions="CenterAndExpand"/>
                        <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Text="{Binding Coin}" TextColor="White" FontSize="18" VerticalOptions="CenterAndExpand"/>
                        <Label Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Text="{Binding Price}" TextColor="White" FontSize="18" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="End"/>
                        <Label Grid.Row="0" Grid.Column="4" Text="{Binding ProfitUSDT}" TextColor="{Binding ProfitColor}" FontSize="18" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="End"/>
                        <Label Grid.Row="1" Grid.Column="4" Text="{Binding ProfitPerc}" TextColor="{Binding ProfitColor}" FontSize="18" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="End"/>

                    </Grid>
                </StackLayout>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

现在实现这一目标的最佳方法是什么？我需要换一种看法吗？ 请告诉我！

Answer 1

ListView 中的单元格之间不能有数据交叉，所以我认为你需要让每个列表项都有一个两行网格，这样你就可以让最后一列跨越两行。

但是，我很困惑。您的 XAML 代码似乎与一个单元格的屏幕截图不匹配。您的 XAML 代码似乎只分配了 5 列，但我在您的屏幕截图中看到了 6？

无论如何，您是对的，您需要使用一个网格来显示买入和卖出数据，以便最后一列可以跨越 2 行。

更新：根据下面的 cmets，这里似乎需要 DataTemplateSelector。见：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector

以上链接的部分摘录：

数据模板选择器支持 ListView 绑定等场景 到对象的集合，其中每个对象的外观 数据模板选择器可以在运行时选择 ListView 返回特定的 DataTemplate。

创建 DataTemplateSelector 数据模板选择器是 通过创建一个继承自的类来实现 数据模板选择器。然后覆盖 OnSelectTemplate 方法 返回特定的DataTemplate，如下代码所示 示例：

public class PersonDataTemplateSelector : DataTemplateSelector
{ 
    public DataTemplate ValidTemplate { get; set; }
    public DataTemplate InvalidTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate (object item, BindableObject container)
    {
        return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate;   
     } 
 }

OnSelectTemplate 方法返回 基于 DateOfBirth 属性的值的适当模板。 要返回的模板是 ValidTemplate 属性的值或 InvalidTemplate 属性，在使用 PersonDataTemplateSelector。

然后可以分配数据模板选择器类的实例 到 Xamarin.Forms 控件属性，例如 ListView.ItemTemplate。为了 有效属性列表，请参阅创建 DataTemplate。

限制

DataTemplateSelector 实例有以下限制：

• DataTemplateSelector 子类必须始终返回相同的模板 如果多次查询相同的数据。
• DataTemplateSelector 子类不得返回另一个 DataTemplateSelector 子类。
• DataTemplateSelector 子类不得返回 每次调用的数据模板。相反，同一个实例必须是 回来。否则会造成内存泄漏并禁用 虚拟化。
• 在 Android 上，最多可以有 20 个不同的 每个 ListView 的数据模板。

在 XAML 中使用 DataTemplateSelector

在 XAML 中，PersonDataTemplateSelector 可以通过 将其声明为资源，如下代码示例所示：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Selector;assembly=Selector" x:Class="Selector.HomePage">
 <ContentPage.Resources>
     <ResourceDictionary>
         <DataTemplate x:Key="validPersonTemplate">
             <ViewCell>
                ...
             </ViewCell>
         </DataTemplate>
         <DataTemplate x:Key="invalidPersonTemplate">
             <ViewCell>
                ...
             </ViewCell>
         </DataTemplate>
         <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
             ValidTemplate="{StaticResource validPersonTemplate}"
             InvalidTemplate="{StaticResource invalidPersonTemplate}" />
     </ResourceDictionary>
 </ContentPage.Resources>   
    ... 
</ContentPage> 

这个页面级 ResourceDictionary 定义了两个 DataTemplate 实例和一个 PersonDataTemplateSelector 实例。 PersonDataTemplateSelector 实例将其 ValidTemplate 和 InvalidTemplate 属性设置为 使用 StaticResource 标记适当的 DataTemplate 实例 扩大。请注意，虽然资源是在​​页面的 ResourceDictionary，它们也可以在控制级别定义或 应用级别。

通过将 PersonDataTemplateSelector 实例分配给 ListView.ItemTemplate 属性，如下代码所示 示例：

<ListView x:Name="listView" ItemTemplate="{StaticResource personDataTemplateSelector}" /> 

在运行时，ListView 调用 PersonDataTemplateSelector.OnSelectTemplate 方法为每个 基础集合中的项目，调用传递数据 对象作为项目参数。由返回的 DataTemplate 然后将方法应用于该对象。