Tab Layout for Top App Bar Windows 8 Metro App

Question

I am working on a project and want to design a 2 Layer Tab Layout as it is for the weather and news app for Windows 8 Metro App. I have started with creating simple 2 tab layers as we create in HTML. But I am facing issues with CSS to align them properly. For example, no doubt tab layers are not looking as best as they are for news and weather metro app as well as I facing issue with different screen sizes.

I need some help in either to improve my css to resolve the above issues or any lead to create a tab layer from scratch that which can reflect same as weather/news app.

Thanks.

Answer 1

I had created the same in another requirement. What I did was for app bar had two rows. Top one would have the buttons for the top .. Like home news...

The second column had a List view which would be populated based on which button was clicked. I would hide the list view if no buttons are clicked.

Setting width to 100% and some alignment I got that to work.

- Girija

---

Please mark responses as answered if it helped you.. This helps others... - Girija Shankar Beuria

Answer 2

Can you please guide me how can I add horizontal list view where I have text within the listview item and on click it should perform some action.

As well as how to access its hide and show property, as I will need to show a list view only when I click parent tab?

Answer 3

Hi,

I have tried to put together the steps in a blog post here.

Let me know if you have any further questions.

- Girija

---

Please mark responses as answered if it helped you.. This helps others... - Girija Shankar Beuria

Answer 4

Hi,

Like we are using list for second tab layer. Is it possible to have first tab layer too with a list. And remove dependency on hard coding values in html and js file.

Any help is really appreciated.

Thanks.