Menu Items in Windows 8? - html

Question

Am trying to design my metro app like, In my homepage I need to display list of items in a menu on the left side of page and when we click on each item,every item will need to navigate separate page and contains some data.Can anyone suggest me which control should you I take to start my scenario?Working examples are really helpful to me.
Thank you.

Answer 1

Navigation in a WinRT App doesn't use the Menu/Menu-Item metaphor. You can add an App Bar that swipes up from the bottom of the screen that you place contextual controls such as buttons related to the current page or selected item(s). You can also add global settings to the Settings charm that swipes in from the right.
What you are describing sounds like the "Split App" template that comes out of the box with Visual Studio 2012. It consists of a list of items along the left-hand side of the screen which, when selected, change the content on the right-hand side of the screen. Try creating a new Split App and see if that helps.

Answer 2

This is not a completed worked example, but I would recommend looking at two items:
MSDN Documentation for WinJS.Navigation
MSDN Sample for navigation application
These should get you the solution you need -- the sample is quite complete, and can be tailored to your needs.

Answer 3

It sounds to me like what you are talking about is the SplitApp view. Check out this link, the second template listed, just below GridView:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh768232.aspx
You'll find that in Modern/Metro things like menus are handled through contextual listviews in the window content area, or through charms (read icons) on the AppBar. Many people hear menu now and cringe, just due to the style guidelines for Chrome/Menu free applications.
If you don't want the content to display next to the links, as the SplitApp view does, you should consider a regular listview for your links, styled however you like and set to display vertically, with click events that take you to whatever detailed page view you want to go to. Navigation is dead simple in a Metro App.
C# Example:
this.Frame.Navigate(typeof(MyDetailPage),myContentId);
Then on your details page, you can get the argument when it's navigated to:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var myContentId = e.Parameter;
...
}
And if absolutely none of the above was helpful, try checking out these examples. I know you probably aren't making an RSS reader, but they will take you through the basics of the various views and navigation.
Create a blog reader with C#/VB & XAML:
http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx
Create a blog reader with JS & Html5:
http://msdn.microsoft.com/en-us/library/windows/apps/hh974582.aspx