Search code examples
windows-phone-8.1windows-store-appswindows-8.1windows-mobile

How to create a side navbar in windows store app?


I'm developing a laptop selling windows store app using c# and xmal and i want navbar its already Microsoft use in windows 8 bulletin app like News App , win 10 Cortana ..

User start the app i want to show the small nav like this demo img Small Navbar Demo Image Link

Click the toggle button display the big nav like this Big Navbar Demo Image Link

This is my second question in stackoverflow..

I hope in this time i get my answer.. Thanks to all...


Solution

  • This is the SplitView Control (aka: Hamburger Menu), new XAML element comes with Windows 10..

    XAML Implementation :

    <SplitView x:Name="SplitView" DisplayMode="CompactOverlay" IsPaneOpen="False">
        <SplitView.Pane>
           <!-- items -->
        </SplitView.Pane>
        <SplitView.Content>
            <!-- page/ content -->
        </SplitView.Content>
    </SplitView>
    

    Here's great samples and guidelines about it:

    http://blog.jerrynixon.com/2015/04/implementing-hamburger-button-with.html

    http://igrali.com/2015/04/12/getting-started-with-splitview-control-in-universal-apps/