How to reproduce this UI that combines embedded layouts

Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

I try to reproduce this UI on a page:

The page contains:
- the "main" item that is displayed at the top
- the "other" items that are displayed at the bottom on 2 columns

I'm already able to display the image of the main item, and the other items with a XAML that looks like this:

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="450" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Main item  -->
        <StackLayout MinimumHeightRequest="450" HeightRequest="450">
            <ffil:CachedImage Source="{Binding MainProduct.Icon}"      
                              MinimumHeightRequest="450" HeightRequest="450" 
                              Aspect="AspectFill"/>
        </StackLayout>

        <!-- Other items -->
        <!-- through the use of 2 Repeaters -->
    </Grid>
</ScrollView>

But when I try to add the content that is displayed on the main item's Image, I encounter a problem: the page is no longer displayed cause the app encounters an error when the page is instancied.

I've added a secondary Grid that is placed in the first Row of the existing Grid, cause I hoped that shoud help me to show the related content of the main item on the Image:

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="450" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Main item  -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="**" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>                   
            <StackLayout MinimumHeightRequest="450" HeightRequest="450"
                        Grid.ColumnSpan="2" Grid.RowSpan="2">
                <ffil:CachedImage Source="{Binding MainProduct.Icon}" 
                                  MinimumHeightRequest="450" HeightRequest="450" 
                                  Aspect="AspectFill"/>
            </StackLayout>
            <Frame BackgroundColor="Black"
                   Opacity="0.75"
                   Margin="10"
                   VerticalOptions="End" HorizontalOptions="End"
                   Grid.Column="1" Grid.Row="1">
                <StackLayout>
                    <Label Text="{Binding MainProduct.Title}" 
                           HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center"/>
                    ...
                </StackLayout>
            </Frame>
        </Grid>

        <!-- Other items -->
        <!-- through the use of 2 Repeaters -->
    </Grid>
</ScrollView>

What's wrong in my XAML? Is there a better way to achieve this through RelativeLayout or AbsoluteLayout?

Sign In or Register to comment.