Question

你好，我有一个这样的布局，上面有一张人体图片，旁边有一些带有人体某些部位的按钮（例如，头，手臂，腿），但是我在固定按钮时遇到了麻烦与图片在同一行。按钮保持与图片相同的大小，我想做的是在图片的侧面设置按钮，如示例中所示。

我不知道另一种布局更适合这种情况。

这是我的代码：

<ContentPage.Content>
        <StackLayout>
            <Grid VerticalOptions="StartAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40*"/> <!--coluna 0-->
                    <ColumnDefinition Width="20*"/>  <!--coluna 1-->
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50*"/> <!--linha 1-->
                    <RowDefinition Height="20*"/> <!--linha 2-->
                    <RowDefinition Height="20*"/> <!--linha 3-->                   

                </Grid.RowDefinitions>
                <Image Grid.Row="0" Grid.Column="0" Source="corpo_cortado.png"/>
                <Button Text="Cabeça" Grid.Row="0" Grid.Column="1" />
                <Button Text="Torso"  Grid.Row="2" Grid.Column="1"  />
            </Grid>
        </StackLayout>

    </ContentPage.Content>

谢谢！

正确的结果：

通过评论，我设法使它起作用。我所做的是。我创建了两个垂直放置的堆栈布局，并将每个放置在一列中。这里有一些示例：

<StackLayout>
            <Grid VerticalOptions="StartAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40*"/> <!--coluna 0-->
                    <ColumnDefinition Width="20*"/>  <!--coluna 1-->
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50*"/> <!--linha 1-->
                    <RowDefinition Height="20*"/> <!--linha 2-->
                    <RowDefinition Height="20*"/> <!--linha 3-->                 

                </Grid.RowDefinitions>
                <StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0">
                    <Image Grid.Row="0" Grid.Column="0" Source="corpo_cortado.png"/>                    

                 </StackLayout>
                <StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="1">
                    <Button Text="Cabeça" Grid.Row="0" Grid.Column="1" Clicked="Button_Clicked"/>
                </StackLayout>
            </Grid>
        </StackLayout>

Answer 1

对于网格第0行，第1列，采用垂直方向的堆栈布局，然后在该堆栈布局内放置两个按钮，这将为第0行，第-0列和第0行，第列的按钮放置图像-1。仍然需要样本代码让我知道。希望这可以解决您的问题。

如何在侧面制作iimage填充屏幕和按钮

1 个答案: