CODEWITHSUNDEEP
c#maui
innom
innom

Reputation: 1125

Maui: Nest bindings and show contents one layer into the object

I am showing a colletionview inside my carouselview:

    <CarouselView BackgroundColor="Green" ItemsSource="{Binding CarouselViewContents}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <CollectionView HorizontalOptions="FillAndExpand">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="10,6,10,6">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="2"/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <Label TextColor="{AppThemeBinding Dark=White, Default=Black}" HorizontalOptions="Start" FontSize="18" Text="{Binding PropertyName}"/>
                                <BoxView Grid.Row="1" HeightRequest="2" BackgroundColor="{AppThemeBinding Dark=Black, Default=White}"/>
                                <Label Margin="0,5,0,5" TextColor="{Binding Color}" FontFamily="WuerthExtraBold" HorizontalOptions="End" HorizontalTextAlignment="End" FontSize="22" Grid.Row="2" Text="{Binding PropertyValue}"/>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

To populate this, I have on object, containing a list (observ. collection) of other lists:

public class CarouselViewContent
{
    public ObservableCollection<CollectionViewContent>? Content { get; set; }
}

public class CollectionViewContent
{
    public string? PropertyName { get; set; }
    public string? PropertyValue { get; set; }
    public Color? Color { get; set; }
}

This is my model in the end: enter image description here

so the properties I am binding to are somewhat "one layer deeper".

At the moment, it all compiles fine, but nothing is shown in the end. What do I need to alter?

Upvotes: 0

Views: 40

Answers (1)

innom
innom

Reputation: 1125

    <CarouselView Loop="False" ItemsSource="{Binding CarouselViewContents}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <CollectionView HorizontalOptions="FillAndExpand" ItemsSource="{Binding Content}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="10,6,10,6">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="2"/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <Label TextColor="{Binding Color}" HorizontalOptions="Start" FontSize="18" Text="{Binding PropertyName}"/>
                                <BoxView Grid.Row="1" HeightRequest="2" BackgroundColor="{Binding Color}"/>
                                <Label Margin="0,5,0,5" TextColor="{Binding Color}" FontFamily="WuerthExtraBold" HorizontalOptions="End" HorizontalTextAlignment="End" FontSize="22" Grid.Row="2" Text="{Binding PropertyValue}"/>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

this does the trick

Upvotes: 0

Related Questions