如何强制 ListView 在同一行中显示来自 ObservableCollection 不同元素的两个不同数据

Posted 2023-04-12

【中文标题】如何强制 ListView 在同一行中显示来自 ObservableCollection 不同元素的两个不同数据

【英文标题】：How to force a ListView to display in the same row two diffrent data from differnt elements of an ObservableCollection

【发布时间】：2021-03-19 16:43:08

【问题描述】：

在我的 xaml 文件中，我有一个 ListView ：

<ListView x:Name="MyListView" ItemsSource="Binding MyData" HasUnevenRows="true">
             <ListView.ItemTemplate>
                 <DataTemplate x:Name="dataTemplate">
                     <ViewCell>
                         <FramePadding="2" BorderColor="DarkSlateGray">
                             <Grid x:Name="grid" Padding="0">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="1.6*"/>
                                     <ColumnDefinition Width="2.5*"/>
                                     <ColumnDefinition Width="2.5*"/>
                                     <ColumnDefinition Width="2.5*"/>
                                     <ColumnDefinition Width="2.5*"/>
                                     <ColumnDefinition Width="2.5*"/>
                                     <ColumnDefinition Width="2.5*"/>
                                 </Grid.ColumnDefinitions>
    
                                 <Label Grid.Column="0" VerticalTextAlignment="Center" >
                                     <Label.FormattedText>
                                         <FormattedString>
                                             <Span TextDecorations="Underline" TextColor="Black"  Text="Binding dateName"/>
                                             <Span Text="x:Static system:Environment.NewLine"/>
                                             <Span Text="Binding date"/>
                                         </FormattedString>
                                     </Label.FormattedText>
                                 </Label>
                                 <Label Grid.Column="Binding gridNumber" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" BackgroundColor="Binding BgColor">
                                     <Label.FormattedText>
                                         <FormattedString>
                                             <Span TextColor="Black"  Text="Binding Information"/>
                                         </FormattedString>
                                     </Label.FormattedText>
                                 </Label>
    
                                 <BoxView BackgroundColor="DarkSlateGray" WidthRequest="3" Grid.Column="0" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand" />
                                 <BoxView IsVisible="Binding IsSimpleSeance" BackgroundColor="DarkSlateGray" WidthRequest="1" Grid.Column="Binding gridNumber" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>
                                 <BoxView BackgroundColor="DarkSlateGray" WidthRequest="1" Grid.Column="2" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>
                                 <BoxView BackgroundColor="DarkSlateGray" WidthRequest="1" Grid.Column="3" HorizontalOptions="EndAndExpand" />
                                 <BoxView BackgroundColor="DarkSlateGray" WidthRequest="1" Grid.Column="5" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>
                                 <BoxView BackgroundColor="DarkSlateGray" WidthRequest="1" Grid.Column="6" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>
                             </Grid>
                         </Frame>
                     </ViewCell>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>

在我的 ViewModel 文件中，我有这个 ObservableCollection：

 lObservableCollectionist<MyObject> MyList = [
  "Monday", "07/12", "Some Data in First Line", 1,
   "Monday", "07/12", "Some Other Data ALSO in First Line",4,
   "Tuesday", "08/12", "New Data in Second Line" ,1,
   "Tuesday", "08/12", "New Other Data in Second Line",4 ,
   "Tuesday", "08/12", "Newest Data Also in Second Line",6 ,
   ...
   ]

所以，问题是 ListView 像这样在新行中显示 ObservableCollection 的每个元素！ What I get 但我想要的是将同一天的数据分组在一行中。像这样的

What I want

【问题讨论】：

ListView 不会这样做。 Grouped CollectionView 可能会让你更接近，但我认为你需要编写一个自定义控件来获得你想要的。

感谢杰森的评论！我正在使用 MVVM 架构！这就是为什么我尽量避免在后面的代码中编写代码。

我的建议不需要破坏 MVVM

我开始了解 xamarin 和 MVVM .. 所以我阅读了一些我必须避免在后面的代码中最大限度地编写代码的形式...感谢您的澄清！

您只需要按照如下所述重建您的列表。

【参考方案1】：

您可以做的不是一个标签，而是添加多个标签并将每个标签与每一列映射并更改您的信息属性 并删除 gridNumber 属性

你的模型

public class MyObject

    ...
    public string InformationColumn1  get; set; 
    public string InformationColumn2  get; set; 
    public string InformationColumn3  get; set; 
    public string InformationColumn4  get; set; 
    ...

Xaml

...
<!-- Remove grid number binding and add label for each column-->
<Label Grid.Column="1" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" BackgroundColor="Binding BgColor">
    <Label.FormattedText>
        <FormattedString>
            <Span TextColor="Black"  Text="Binding InformationColumn1"/>
        </FormattedString>
    </Label.FormattedText>
</Label>
<Label Grid.Column="2" HorizontalTextAlignment="Center" BackgroundColor="Binding BgColor">
    <Label.FormattedText>
        <FormattedString>
            <Span TextColor="Black"  Text="Binding InformationColumn2"/>
        </FormattedString>
    </Label.FormattedText>
</Label>
<Label Grid.Column="3" Grid.ColumnSpan="2" HorizontalTextAlignment="Center" BackgroundColor="Binding BgColor">
    <Label.FormattedText>
        <FormattedString>
            <Span TextColor="Black"  Text="Binding InformationColumn3"/>
        </FormattedString>
    </Label.FormattedText>
</Label>
...

附：您可以进一步将所有Label 的CONVERTER 设置为IsVisible 属性，使其仅在InformationColumn 数据不为空时可见。

【讨论】：

感谢您的帮助！问题是我不知道要在 ListView 中显示的数据！例如，在表示星期一的第一行中，我有 2 个信息，每个信息在网格中都有特定的位置，在其他情况下，我在星期一的行中只有一个信息在网格中的其他位置！ PS：我用问题发布的图像可以帮助更多地理解我想说的话。

如果您不知道数据，您可以在收到响应后转换数据。创建一个方法来合并具有相同日期的所有行，并将旧列表转换为新列表