Understanding SplitView and its features in Universal Windows App.

SplitView is a new control that has been introduced in the Windows 10 Universal Apps. Where it helps the user to have a better user experience. As the name suggest that the Split View is of splitting the user interface in to two parts and displaying the navigational and other display related information in a separate panel and bringing up in the user interface when needed. Lets See how to create the split view in and what are its properties.

The Split View has a property called Pane which takes the content to be shown inside the split pane and which gets displayed when needed.

The IsPaneOpen Property is used to set the Pane either to open and to close it. Setting True to this property displays the pane and False collapse the pane.

The OpenPaneLength property defines the space occupied by the pane when it is opened.

The DisplayMode property is used to set how the Split pane and content area to be displayed. The possible values that can be applied to the DisplayMode are

Overlay  – The pane overlays the content area when opened and closes when the user clicks anywhere in the content area and takes no user space when closed.

<SplitView x:Name="splitView" DisplayMode="Overlay" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" >

...

</SplitView>

Inline – The Pane and the content area share the user space side by side and this remains in the screen always even when the user clicks anywhere in the  content area.

<SplitView x:Name="splitView" DisplayMode="Inline" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" >

...

</SplitView>

CompactOverlay – This pane overlays on the content area when opened and get dismissed when the user clicks on the content area. The CompactPaneLength property defines how much area the Pane occupies when the IsPaneOpen is set to false.

<SplitView x:Name="splitView" DisplayMode="CompactOverlay" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" CompactPaneLength="48">

...

</SplitView>

CompactInline – The pane and the content area share the user space side by side and this remains in the screen always even when the user clicks anywhere in the  content area when the  IsPaneOpen is set to true and when the IsPaneOpen is set to false then the Pane occupies the length specified by the CompactPaneLength.

<SplitView x:Name="splitView" DisplayMode="CompactInline" PaneBackground="#FF2B2B2B" IsPaneOpen="True" OpenPaneLength="306" CompactPaneLength="48">

...

</SplitView>

Hope this might have helped.