SplitView in Windows 10 universal app

One of the new controls in the SDK for Windows 10 universal apps is the SplitView control. I guess you have seen the apps with the hamburger menu. If you want to create an app with a hamburger menu I recommend you to use SplitView.


SplitView

The control is splitting the views/pages in two parts, the left one is called Pane and can be used for menus, for example. The Pane has for different display modes.

Overlay
When the pane is open it will be shown over the main content of the page.

CompactOverlay
Is shown the same way as overlay, but with thinner. I recommend yo just show icons in this mode.

Inline
When the pane is open it will be beside the main content, see the screenshot above.

CompactInline
Inline also has a compact mode as with the CompactOverlay I recommend you to just use icons when showing the pane in CompactInline

<SplitView Name="Split" OpenPaneLength="200" IsPaneOpen="False" DisplayMode="Overlay">
            <SplitView.Pane>
                <StackPanel Padding="10">
                    <TextBlock Text="Item 1" />
                    <TextBlock Margin="0,10" Text="Item 2" />
                    <TextBlock Text="Item 3" />
                    <TextBlock Margin="0,10" Text="Item 4" />
                </StackPanel>
            </SplitView.Pane>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Button Background="White" Click="Button_Click">
                    <StackPanel>
                        <Rectangle Height="3" Width="20" Fill="Black" />
                        <Rectangle Margin="0,5" Height="3" Width="20" Fill="Black" />
                        <Rectangle Height="3" Width="20" Fill="Black" />
                    </StackPanel>
                </Button>
 
                <TextBlock Margin="10" Grid.Row="1" Text="Main content here" />
 
            </Grid>
        </SplitView>

The default placement of the pane is to left, but you can also have it on the right side. Just set the PanePlacement property to right.

 <SplitView Name="Split" PanePlacement="Right" OpenPaneLength="200" IsPaneOpen="False" DisplayMode="Inline">

The complete code can be found on GitHub, https://github.com/dhindrik/windows10samples

If you want to read more about Windows 10 development I have created a list with all my Windows 10 blog posts, http://danielhindrikes.se/windows-10/, more will be added.

2 thoughts on “SplitView in Windows 10 universal app

Leave a Reply

Your email address will not be published. Required fields are marked *