时间戳

首页 > 解决方案 > UWP 垂直排列底部项目（拆分视图）

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

问题描述

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

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

拆分视图

我想安排这样的项目

示例用户界面

标签： uwpuinavigationbar

解决方案

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

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

现在使用PaneClosingandPaneOpening事件来适当地更改按钮的Grid.ColumnandGrid.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)

替代解决方案是使用 a并在and之间StackPanel切换，尽管这不会将按钮彼此相邻 - 要添加空格，您也必须修改按钮的 。OrientationHorizontalVerticalMargin

推荐阅读