SplitView Control in Universal App Platform - Part 1

A split view control in the UAP is used to load multiple views in a single page.

A split view control is divided into the following two main areas.

• Pane area.
• Content area.

For example:

<SplitView DisplayMode="CompactOverlay" PaneBackground="LightGray" Background="LightSkyBlue">
    <SplitView.Pane>
        <Button Content="Hey am Pane"/>
    </SplitView.Pane>
    <SplitView.Content>
        <TextBlock Text="Content View Area" FontSize="35" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </SplitView.Content>
</SplitView>

The PaneBackground property specifies the background color of the pane.

The Background property changes the background color of the split view area.

Display Mode of Split view control

1. Overlay.
2. CompactOverlay.
3. Inline.
4. Compactinline.

CompactOverlay mode: Overlay into the view area, it is good to use for Mobile version or small size window. For example, PC (Calculator app).

Figure 1: CompactOverlay

CompactInline mode: Is divided into a split view area and it's good to use for a PC version.



Figure 2: CompactInline

Inline and Overlay are used to Hide the pane area.

Hide the pane area properties are usually used in the mobile version or small size window.

For example, in a Calculator app the Pane area is hidden. When you click the Hamburger button (“?“) , the CompactOverlay mode pane will open in the app.

Pane

The Pane area is generally used to display the menu items for Navigation to load various items into the content area.

The following are some of the important properties.

• CompactPaneLength: Normal display width of the pane area.
• OpenPaneLength: User interact in the pane, change the display of the width.
• IsPaneOpen: Find pane in CompactPaneLength or OpenPaneLength mode.

Figure 3: SplitView

Hamburger menu button in Split view control

For a Hamburger menu button in the UAP, we can see this control in Groove music or calculator (the preceding image Pane area is a Hamburger menu button).

The default does not support the Hamburger menu, we must do some work around, but is not complicated.

The following are the three steps to create a Hamburger menu button.

1. Set Pane properties (CompactPaneLength, OpenPaneLength and IsPaneOpen).

2. Create a button, content with “Character map” font (search in Windows OS).



Figure 4: Character Map

3. Implement the button click event to change the IsPaneOpen mode.

Example

DisplayMode="CompactOverlay" CompactPaneLength="70" OpenPaneLength="200" IsPaneOpen="False"

<Button FontFamily="Segoe MDL2 Assets" Content="?"
Width ="70" Height="50" Background="Transparent" Click="Button_Click" />

private void Button_Click(object sender, RoutedEventArgs e)
{
   MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

Note: The best practice is to make a Button width and CompactPaneLength the same width.

In the button the content is Unicode format. There are two ways we can change the Unicode format.

SymbolIcon format

<Button Width="50" Height="50" Background="Transparent">
   <SymbolIcon Symbol="Home"/>
</Button>

AppBarButton and icon format

<AppBarButton Icon="Home" Width="50" Height="50" />

Note

1. If an Icon is not available, no choice goes with Unicode format only.
2. A Hamburger button can be used anywere in the application.