CODEWITHSUNDEEP
xamlwindows-8windows-runtimewindows-store-appswinrt-xaml
Ondrej Peterka
Ondrej Peterka

Reputation: 3427

How to implement facebook like menu (left menu) in windows store app

Basically, I want to be able to create a menu which on clicking on some button will appear from left (or right) and on clicking anywhere on main screen the user would be able to dissmis the menu. For example the facebook app has something similar on all platforms (so on Windows 8 also).

I have found a solution for Windows phone (http://sviluppomobile.blogspot.cz/2013/08/add-lateral-menus-to-windows-phone.html), which is not the way to go for Windows 8. Maybe I could use some hand made animation for aflyover, which would be in default outside of viewport. However, I guess there must be better or ideally already proofed solution.

Also I found two questions here on SO, which asked for same thing I guess, but no answers there ... How to do: lateral menu like in "Music" app on Windows 8 / 8.1 and https://stackoverflow.com/questions/22613421/windows-8-1-apps-left-menu

I know, that it is not the best way on windows platform to implement menu (we have top app bar, right), but our customer just wants this.

I would like to ask for some hints or ideally a code for a native implementation for Windows 8.1 using XAML (C# or VB.NET). Thanks to everybody who will give it a thought.

Upvotes: 0

Views: 460

Answers (1)

Filip Skakun
Filip Skakun

Reputation: 31724

You'd put a StackPanel with Orientation="Horizontal" in a ScrollViewer. Put three panels in the StackPanel - let's make them Grids and call them: left, middle and right. On SizeChanged events of the ScrollViewer - set the Width and Height of the middle grid to the same values as ActualWidth and ActualHeight of the ScrollViewer and perhaps set the left and right grids to be a little bit narrower to leave space to see a little bit of the middle panel when you scroll to the ends. Make the ScrollViewer scroll horizontally by setting Horizontal/VerticalScrollMode and scroll bar visibilities and make the ScrollViewer snap to your grid panels by setting the HorizontalSnapPointsType and HorizontalSnapPointsAlignment properties. Also set IsHorizontalRailEnabled on the horizontal ScrollViewer to true if you have any vertical ScrollViewers in your panels and make their IsVerticalRailEnabled="true" so only one of them scrolls depending on the manipulation direction. Finally - put a transparent overlay panel as a top child of the middle panel handle the tap events on the overlay to scroll the middle panel back into view when it isn't centered and in the handlers of the menu buttons scroll the horizontal ScrollViewer to the start/end.

Upvotes: 1

Related Questions