Search code examples
c#xamlmvvmmauiobservablecollection

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


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

Solution

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