你好,我有一个这样的布局,上面有一张人体图片,旁边有一些带有人体某些部位的按钮(例如,头,手臂,腿),但是我在固定按钮时遇到了麻烦与图片在同一行。按钮保持与图片相同的大小,我想做的是在图片的侧面设置按钮,如示例中所示。
我不知道另一种布局更适合这种情况。
这是我的代码:
<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>
答案 0 :(得分:0)
对于网格第0行,第1列,采用垂直方向的堆栈布局,然后在该堆栈布局内放置两个按钮,这将为第0行,第-0列和第0行,第列的按钮放置图像-1。 仍然需要样本代码让我知道。 希望这可以解决您的问题。