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

时间:2018-07-12 01:15:26

标签: c# layout xamarin.forms

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

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

这是我的代码:

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

1 个答案:

答案 0 :(得分:0)

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