Slide menu in Windows Phone 8

Question

I'm migrated from iOS dev to WIndows Phone dev and I have stumbled upon a problem.

I need to implement a side menu, that looks like the one in facebook app in ios. It shpuld slide from left to right. It should contain about 10 buttons (ListView). Presign the button should cause chaning the view (navigate to other xaml file)

Because of the huge difference between Windows Phone controls and iOS controls I want to ask an advice on how to better implement such menu. I've heard about aproach using Panorama. But would it look pretty?

I mean I'll have 10 different XAML files with different content. In each of them I'd have to add Panorama control and add the menu. And when I navigate to other XAML would it look nice? because it would close menu without any animation.

So please tell me what is the better approach in impelementing what I want? And how to navigate properly between all the XAMLs without loosing the animation of the menu. And of course how to avoid duplicating code in all the XAMLs? I guess XAML files could not be inherited. And of course I need it to support both WIndows Phone 8 and 8.1.

Thank you very much for you attension!

Answer 1

I believe you are speaking about the popular hamburger menu. You can very well use the SlideView library. Here is the link, https://slideview.codeplex.com/

1. The SlideView, a control allowing to slide between panels (2 or many more)

2. The SlideApplicationFrame, a control to use at top app level and packaged to display 3 panels with navigation occuring in the middle panel

3. The AutoHideBar, a control which is displayed when scrolling up in a list, and hidden when scrolling down

Answer 2

I just implemented something similar in my Dictionary app (http://www.windowsphone.com/s?appId=9f31b733-8c7b-e011-986b-78e7d1fa76f8). You will see that when you click the favorite or history icons on the top, it slides in a panel from the right. I implemented this by adding another Grid to the page whose left margin is set to the width of the page so that it basically sits to the right of the page, out of user's view. When the user taps one of the icons on top, I run a DoubleAnimation with a StoryBoard which does TranslateTransform on the X coordinate of the Grid and runs the StoryBoard for a duration of 3.5 seconds to give the user the perception of slide-in animation.

As far as having the same slide-in menu on each of the pages go, you have 2 options: (a) Create the sliding panel as a user control and add it to each of the pages and on click of an item inside the panel, go to the second xaml page with the slide-in menu open and start the transition to hide it, or (b) Create multiple grids within the same xaml page and simply hide/display the right one at the right time.

Answer 3

Here this a blog that will help you implement side menu like Facebook app. Link Hope this helps.