Windows10 SplitView Control | Hamburger Menu

21In this blog, I’ll be talking about a new Xaml Control in Windows 10 which is “SplitView | Hamburger Menu” Control, and here’s an example in some apps in Windows 10

 

Note: if you didn’t get Windows 10 Developer Tools, you can check this Blog to get you ready.
So, Let’s Start building this in our upcoming Windows 10 Apps 😉

  1. Open Visual Studio, Create new Windows 10 App(Blank Template)
  2. Download this folder, and Add “Styles” folder to your project. (it contains some xaml code which will optimize the style of the buttons we add later in our SplitView)
  3. Open MainPage.Xaml and add this snippet of code inside Page tag:
    Resources
    (This to link the styles we add before with our MainPage.xaml)
  4. Then add this Xaml Code, which is your Split View Pane and Items in it.
    split
    (NOTE: the tags in each RadioButton is the symbol of the split view, and you can find what you want in Character Map of Windows, Such search it, and then copy the symbol you want and then paste it in the tag of the RadioButton)
  5. Then, Open MainPage.xaml.cs and this snippet of code:
    cs
    (This to enable the button to open and close the Splitview Pane each time you click it)
  6. Now, Run your app, you will find  SplitView Controller Appeared as you want.

Congratulations! you have already added a SplitView Controller to your App 😉
Download the Code Sample from HERE

Share it with your community 😉

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s