Is it possible to bind an Array in a Collectionview with ObservableCollection?

119 Views Asked by At

I'm new here and new as .Net Maui Developer. I work with an API and receive my data to be processed via a GET request. The data I receive consists of receipts that contain a varying number of item positions. These item positions are stored in an array. Is it possible to dynamically display this array?

Binding without a index

<Label Text="{Binding ReceiptPosition[].ModelNumber}" Grid.Column="5" Grid.Row="0" Margin="5,0,0,0"/>
<Label Text="{Binding ReceiptPosition[].ModelDescription}" Grid.Column="6" Grid.Row="0" Margin="5,0,0,0"/>
<Label Text="{Binding ReceiptPosition[].Quantity}" Grid.Column="7" Grid.Row="0" Margin="5,0,0,0"/>
<Label Text="{Binding ReceiptPosition[].SellingPrice}" Grid.Column="7" Grid.Row="0" Margin="5,0,0,0"/>

My Viewmodel

internal partial class BelegPageViewModel : ObservableObject
{
    [ObservableProperty]
    ObservableCollection<BelegStruktur> belegeCollection = new();

    [ObservableProperty]
    private BelegStruktur beleg;
}

My Structure

internal class BelegStruktur
{
    public DateTime? Date { get; set; }
    public int StoreNumber { get; set; }
    public int PointOfSaleNumber { get; set; }
    public int ReceiptNumber { get; set; }
    public ReceiptPosition[]? ReceiptPosition { get; set; }
}

public class ReceiptPosition
{
    public string ModelNumber { get; set; }
    public string ModelDescription { get; set; }
    public float Quantity { get; set; }
    public float SellingPrice { get; set; }
}
1

There are 1 best solutions below

0
HeisenbergsMeth On BEST ANSWER

I have solved the issue by using a CollectionView within another CollectionView.

Example:

<CollectionView ItemsSource="{Binding BelegeCollection}">
     <CollectionView.ItemsLayout>
         <LinearItemsLayout Orientation="Vertical" />
     </CollectionView.ItemsLayout>
     <CollectionView.ItemTemplate>
         <DataTemplate x:DataType="{x:Type models:BelegStruktur}">
             <StackLayout>
                 <Label Text="{Binding Date}" />
                 <Label Text="{Binding StoreNumber}" />
                 <Label Text="{Binding PointOfSaleNumber}" />
                 <Label Text="{Binding ReceiptNumber}" />
                 <CollectionView ItemsSource="{Binding ReceiptPosition}">
                     <CollectionView.ItemTemplate>
                         <DataTemplate x:DataType="{x:Type models:ReceiptPosition}">
                             <StackLayout>
                                 <Label Text="{Binding ModelNumber}" />
                                 <Label Text="{Binding ModelDescription}" />
                                 <Label Text="{Binding Quantity}" />
                                 <Label Text="{Binding SellingPrice}" />
                             </StackLayout>
                         </DataTemplate>
                     </CollectionView.ItemTemplate>
                 </CollectionView>
             </StackLayout>
         </DataTemplate>
     </CollectionView.ItemTemplate>
 </CollectionView>