How to make two level top bar menu like in weather app or windows store.

Question

Hi,

Is there a simple way to make two level top bar menu?

Also how can I make stackpanel items collapse like on this screenshot:

Thanks in advance

Answer 1

Hi tlaguz,

Looks like the red cycle control is FlipView, read this for more information: Adding FlipView controls

To customize the top app bar, you can also ref: How to add a menu to an app bar

--James

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

Hi James, thanks for reply.

I thought about using FlipView to achieve this, but FlipView shows one item at time. How to show two or more? In weather app items count depends on screen width.

Answer 3

What language and UI kit are you using so we can help you find the right forum? The UI Design forum is for discussing how to design application UI, not for how to implement the designs. For implementation questions please post in the appropriate language forum, such as Building Windows Store apps with HTML5/JavaScript or Building Windows Store apps with C++

I suspect the weather app from your picture is an HTML app, possibly with a custom control. The circled control does not look or behave like a FlipView.

Answer 4

I'm using XAML/C#. 

Answer 5

And what is the specific part of this you need help with? How to compress the circled part into multiple pages?

That's a custom control so you'll need to figure out your logic and code it up. At a high level you could put the tiles in a StackPanel inside a ScrollViewer, set snap points on the ScrollViewer so the tiles stay on screen, and track the position of the ScrollViewer to display in the paging section above it.

This is essentially how the FlipView is implemented, but you can support multiple pages at a time and add the progress display.