It’s quite straightforward to use. The “Pane” property contains the code of the menu itself. The page content goes into the control itself. The “OpenPaneLength” sets the width of the menu. Lastly, the “PanePlacement” property indicates on which side of the page the menu will appear (currently limited to left and right, top and bottom doesn’t seem to be supported). The menu is opened by setting the “IsPaneOpen” property to true, and closed when the property is set to false or the user taps outside.
Wrapping it up, we get this simple implementation (also using the RelativePanel shown in the previous post). I chose to use a thin clickable vertical bar on the left side rather than a button, to show the menu:
<RelativePanel> <Rectangle x:Name="CollapsedMenu" Width="20" Fill="Salmon" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignBottomWithPanel="True" Tapped="CollapsedMenu_Tapped"/> <SplitView x:Name="SplitView" RelativePanel.RightOf="{Binding ElementName=CollapsedMenu}" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignTopWithPanel="True" RelativePanel.AlignBottomWithPanel="True" OpenPaneLength="100" Background="Salmon" PanePlacement="Left"> <SplitView.Pane> <Grid Background="Salmon"> <TextBlock Text="SplitView pane" /> </Grid> </SplitView.Pane> <Grid Background="LightBlue"> <TextBlock Text="Regular content" /> </Grid> </SplitView> </RelativePanel>
In the code-behind, we react to the “Tapped” event to show/collapse the menu:
private void CollapsedMenu_Tapped(object sender, TappedRoutedEventArgs e) { this.SplitView.IsPaneOpen = !this.SplitView.IsPaneOpen; }