[Windows 10] SplitView Control (the sidebar on many apps)

Posted on Edited on In , Disqus:

Windows 10’s design language is being refreshed, and part of it is a toolbar sitting on the side of every app.

How do you imitate this design?

SplitView Control

Microsoft built a dedicated control for it and called it the SplitView Control

Basically it has 2 parts: the Pane and the Content

The Pane is where the Menus, the various lists and so on go, while the Content shows the app’s main content.

There are many design styles for this SplitView, depending on what you pick. Here I’ll cover the basics

Create a new Project using the Universal Application Platform (UAP) in Visual Studio

In MainPage, paste in the following

In the structure above you can see that Pane is a property of SplitView. Think of the Pane as a parent control and add other controls inside it

CompactPaneLength is the width of the SplitView when the user collapses it

DisplayMode is how the SplitView is displayed. There are 4 kinds:

  • CompactInline: when collapsed it turns back into a long bar on the side of the screen; when expanded it pushes the Content aside
  • CompactOvelay: when collapsed it turns back into a long bar on the side of the screen; when expanded it OVERLAYS the Content
  • Inline: same as CompactInline, but when collapsed it disappears from the screen
  • Overlay: same as Overlay, but when collapsed it disappears from the screen

The structure

The SplitView’s structure consists of the Pane and the Content. Inside the Pane there is the Hamburger Button and a list of other features. Following this structure:

The code for the above is very simple:

<SplitView>
    <SplitView.Pane>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="\*" />
            </Grid.RowDefinitions>
            <Button Grid.Row="0" />
            <ListView Grid.Row="1" />
        </Grid>
    </SplitView.Pane>
    <Grid />
</SplitView>

Hamburger Button

The Hamburger Button isn’t hard either. Windows 10 has a whole font dedicated to icons:

To create a button with a Hamburger icon, paste in the following code:

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" />

The Content is a code from this chart: http://modernicons.io/segoe-mdl2/cheatsheet/

To open and close the SplitView’s Pane, set the property “IsPaneOpen = true” or “IsPaneOpen = false” in the button’s click event.

That’s it. Good luck