[Solved] hierarchy structure xamarin form

by


I would suggest you use a Grid to achive the layout on the image.

here is an example how to use a Grid to achive the desired hierarchy:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    //TOP
    <StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalOptions="Center">
        <Image Source="image_top" />
    </StackLayout>

    //CENTER
    <StackLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="Center">
        <Image Source="image_center_left" />
    </StackLayout>
    <StackLayout Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" HorizontalOptions="Center">
        <Image Source="image_center_right" />
    </StackLayout>

    //BOTTOM
    <StackLayout Grid.Row="2" Grid.Column="0" HorizontalOptions="Center">
        <Image Source="image_bottom_far_left" />
    </StackLayout>
    <StackLayout Grid.Row="2" Grid.Column="1" HorizontalOptions="Center">
        <Image Source="image_bottom_left" />
    </StackLayout>
    <StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="Center">
        <Image Source="image_bottom_right" />
    </StackLayout>
    <StackLayout Grid.Row="2" Grid.Column="3" HorizontalOptions="Center">
        <Image Source="image_bottom_far_right" />
    </StackLayout>
</Grid>

Note: if you want to use the lines connecting the hierarchy (assuming that they are images), you will need to add 2 extra rows and add them between the images rows.

2

solved hierarchy structure xamarin form