CODEWITHSUNDEEP
uwpuinavigationbar
MathanKumar
MathanKumar

Reputation: 112

UWP arrange Bottom items in vertically(splitview)

I am working in UWP, I have a split view for navigation view. I want to arrange bottom items to vertically when I closing the pane.

This is the UI I have before closing the pane

Split view

I want to arrange items like this

sample ui

Upvotes: 0

Views: 102

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39082

I would implement it using a Grid with the following layout:

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

Now using the PaneClosing and PaneOpening events to just change the Grid.Column and Grid.Row values of the buttons appropriately.

So when pane is open, I would set:

  • Grid.Row to 0 for all three buttons
  • Grid.Column to 0, 1, 2 respectively
  • SecondColumn.Width and ThirdColumn.Width to new GridLength(1, GridUnitType.Star)

And when closed:

  • Grid.Row to 0, 1, 2 respectively
  • Grid.Column to 0 for all three buttons
  • SecondColumn.Width and ThirdColumn.Width to new GridLength(0)

Alternative solution would be to use a StackPanel and just switch its Orientation between Horizontal and Vertical, although that would not put the buttons right next to each other - to add the spaces, you would have to modify the Margin of the buttons too.

Upvotes: 1

Related Questions