UWP垂直排列底部项目（拆分视图）

Question

我在UWP中工作，我具有导航视图的拆分视图。 我想在关闭窗格时将底部项目垂直排列。

这是我在关闭窗格之前拥有的UI

我想安排这样的物品

Answer 1

我将使用具有以下布局的Grid来实现它：

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" x:Name="SecondColumn" />
      <ColumnDefinition Width="Auto" x:Name="ThirdColumn" />
   </Grid.ColumnDefinitions>
   ...
</Grid>

现在使用PaneClosing和PaneOpening事件来适当地更改按钮的Grid.Column和Grid.Row值。

因此，当窗格打开时，我将进行设置：

将所有三个按钮
• Grid.Row设置为0
• Grid.Column分别为0、1、2
• SecondColumn.Width和ThirdColumn.Width至new GridLength(1, GridUnitType.Star)

关闭时：

• Grid.Row分别为0、1、2
将所有三个按钮
• Grid.Column设置为0
• SecondColumn.Width和ThirdColumn.Width至new GridLength(0)

另一种解决方案是使用StackPanel并仅在Orientation和Horizontal之间切换其Vertical，尽管那不会使按钮彼此相邻-要添加空格，您还必须修改按钮的Margin。