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 😉
- Open Visual Studio, Create new Windows 10 App(Blank Template)
- 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)
- Open MainPage.Xaml and add this snippet of code inside Page tag:
(This to link the styles we add before with our MainPage.xaml)
- Then add this Xaml Code, which is your Split View Pane and Items in it.
(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)
- Then, Open MainPage.xaml.cs and this snippet of code:
(This to enable the button to open and close the Splitview Pane each time you click it)
- 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 😉