时间戳

首页 > 解决方案 > 层次结构 xamarin 形式

xamarin.forms - 层次结构 xamarin 形式

问题描述

需要绘制如下图所示的层次结构

在此处输入图像描述

标签： xamarin.formsxamarin.android

解决方案

我建议您使用Grid来实现图像上的布局。

这是一个如何使用 Grid 来实现所需层次结构的示例：

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

注意：如果要使用连接层次结构的线（假设它们是图像），则需要添加 2 个额外的行并将它们添加到图像行之间。

推荐阅读