问题描述
我一直试图将两个stacklayout子项垂直居中放置在3行网格中。具体而言,将顶部堆栈在中间网格上方的区域中垂直居中,底部堆栈在中间网格下方的区域中垂直居中。
这就是我想要做的:Screenshot
这是代码:
<Grid RowDeFinitions="Auto,*,Auto">
<StackLayout Grid.Row="0"
Orientation="Horizontal"
HorizontalOptions="Center" VerticalOptions="Center"
BindableLayout.ItemsSource="{Binding FixedRepairProfiles}">
</StackLayout>
<controls:VehiclePanelGrid Grid.Row="1"
VerticalOptions="CenterandExpand"
ItemsSource="{Binding VehiclePanels}"
Command="{Binding SelectCommand}"
CommandParameter="{Binding .}"
LongPressCommand="{Binding ClearCommand}"/>
<StackLayout Grid.Row="2"
Orientation="Horizontal"
HorizontalOptions="Center" VerticalOptions="Center"
BindableLayout.ItemsSource="{Binding PanelRepairProfiles}">
</StackLayout>
</Grid>
这就是我得到的:Screenshot
解决方法
从共享的xaml代码中,我们无法确定内部控件也将在垂直和水平方向上显示中心。
以下是用于说明这一点的示例代码:
<Grid RowDefinitions="Auto,*,Auto">
<StackLayout Grid.Row="0"
Orientation="Horizontal"
HeightRequest="200"
WidthRequest="300"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="Silver" >
<Label Text="First label" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Row="1" BackgroundColor="Aqua"
HeightRequest="200"
WidthRequest="300"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Label Text="Second label" />
</StackLayout>
<StackLayout Grid.Row="2"
HeightRequest="200"
WidthRequest="300"
BackgroundColor="SeaShell"
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center">
<Label Text="Third Label" />
</StackLayout>
</Grid>
效果:
您将看到,如果第一个Grid的内部HorizontalOptions
设置了VerticalOptions
和Label
,那么它将垂直和水平显示中心。