带垂直居中子项的3行网格

如何解决带垂直居中子项的3行网格

我一直试图将两个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，那么它将垂直和水平显示中心。