UWP: New Controls (part 2 – SplitView)

Another control which allows to create adaptive interfaces is SplitView. Usually you will use this control to create menus but in fact SplitView allows to declare two panels, Pane and Content, with any content inside. Particularly the Pane panel allows to add some adaptive capabilities by supporting different display modes. The main syntax of SplitView is

 <SplitView IsPaneOpen="False" 
 DisplayMode="CompactInline" 
 PaneBackground="Beige" 
 OpenPaneLength="200" 
 CompactPaneLength="30">
 <SplitView.Pane>
 
 </SplitView.Pane>
 <SplitView.Content>
 
 </SplitView.Content>
</SplitView> 

Where the DisplayMode property can be set in one of the following values:

  • CompactInline – Pane panel supports compact mode. When it is expanded all content will be moved in order to provide enough space for expanded panel;
  • CompactOverlay – the same as the previous mode but when panel is expanded it doesn’t affect all other content because the panel will be placed above the content;
  • Inline – supported in expanded mode only. If it is displayed then all other content will be moved to have enough space for the panel;
  • Overlay – supported in expanded mode only. It doesn’t affect all other content because the panel will be placed above the content;

With the help of the IsPaneOpen you can define if the panel is displayed in standard mode or if the panel is expanded (or compact) in compact mode. So, if you set IsPaneOpen to false and display mode is compact then the panel will be displayed in compact mode. If you change IsPaneOpen to true then the panel will be displayed in expanded mode.

So, you can see that SplitView doesn’t have anything related to menus but you can easily place something like ListView inside and declare menu items there. Design the menu items in the way that users can see only icons in the compact mode and all of the content in expanded mode, and implement VisualStateManager which changes DisplayMode and IsPaneOpen properties in runtime.

I would would advise to follow these recommendations in order to design your own menu:

  • Implement three states for your menu: for example, Expanded, Compact and UltraCompact for different screen sizes. If you have enough space you can show the Pane in expanded mode without any problems but if you have less space you can show just icons in compact mode. Finally if you don’t have room at all (phone in portrait orientation) you should activate UltraCompact state and hide your Pane completely;
  • In Compact and UltraCompact states add a bullet button above the menu which opens the Pane using Overlay modes. So, you will be able to open the menu even in UltraCompact mode when menu is hidden;

 

  • Use ListView control for menu;

So your VisualStateManager can look like this (CompactInline as default and IsPaneOpen is True):

 <VisualState x:Name="Expanded">
 <VisualState.StateTriggers>
 <AdaptiveTrigger MinWindowWidth="900"></AdaptiveTrigger>
 </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="Compact">
 <VisualState.Setters>
 <Setter Value="False" Target="splitView.IsPaneOpen"></Setter>
 <Setter Value="CompactOverlay" Target="splitView.DisplayMode"></Setter>
 </VisualState.Setters>
 <VisualState.StateTriggers>
 <AdaptiveTrigger MinWindowWidth="500"></AdaptiveTrigger>
 </VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="UltraCompact">
 <VisualState.Setters>
 <Setter Value="False" Target="splitView.IsPaneOpen"></Setter>
 <Setter Value="Overlay" Target="splitView.DisplayMode"></Setter>
 </VisualState.Setters>
 <VisualState.StateTriggers>
 <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
 </VisualState.StateTriggers>
</VisualState>

If you implement a bullet button you need to add logic which allows to expand menu as well. You can implement all logic inside code behind or you can try to create two more states and your own triggers there.