Partager via

Win 10 SplitView – Intro

  • Article

The SplitView control is a new addition to XAML for Windows 10 Applications. It’s basic use is to display a side menu, such as the one usually called “hamburger menu”. One thing to note is that the SplitView is not a built in "Hamburger Menu". It actually just gives you the ability to create a blank menu that you design and control. In this sample, I created a simple hamburger menu that opens and closes by clicking the hamburger button. I have also added a couple of "dummy" menu buttons that take no action.

The SplitView is quite straightforward to use. You can think of it in terms of two different pieces, the Pane and the Content. The “Pane” property contains the code of the menu itself. This would represent the different menu/navigation buttons in your app. The page content goes into the control itself. Think of the content as the typical page you would have added to your application.

<SplitView>
        <SplitView.Pane>

              //Add your menu here
        </SplitView.Pane>
        <SplitView.Content>
            //Add your content here
        </SplitView.Content>
    </SplitView>

A couple of properties to be familiar with...
OpenPaneLength - The “OpenPaneLength” sets the width of the menu when it is open.

PanePlacement - The “PanePlacement” property indicates on which side of the page the menu will appear (currently limited to left and right, top and bottom doesn’t seem to be supported).

IsPaneOpen - The menu is opened by setting the “IsPaneOpen” property to true, and closed when the property is set to false or the user taps outside. This can be changed dynamically from the code behind to open and close the menu, which is what we did in this sample.

DisplayMode - There are four different DisplayModes that you can choose from, Inline, Compay, Compact Overlay, Compact Inline.

Inline - When the menu pane is opened, it pushes the content over. When it's closed, the content goes back to its original location

Overlay - When the menu pane is opened, it lays on top of the content. When it's closed, it is invisible.

Compact Overlay - When the menu pane is opened, it lays on top of the content. When it's closed, the pane is still visible in Compact Mode.

Compact Inline - When the menu pane is opened, it pushes the content over. When it's closed,the content goes back to its original position but the pane is still visible in Compact Mode.

Comments

  • Anonymous
    August 03, 2015
    I suppose the Compact Overlay and Compact Inline descriptions are switched?

  • Anonymous
    August 13, 2015
    Nice intro :) But i think there are some mistake: "Compact Overlay -> it pushes the content over." <b>&</b> "Compact Inline -> it lays on top of the content." Is that true?

    • Sorry for my poor English.

  • Anonymous
    August 17, 2015
    Hey guys, thanks so much for the feedback.  The post has been updated :)

  • Anonymous
    January 24, 2016
    very helping. thanks for nice share.