Central app hub with panel areas (Panorama control) for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
The model presented in this topic is similar to the model described in Central app hub with home page menu (Panorama or Pivot control) for Windows Phone. Just as in the previous case, you have different areas of functionality to expose to the user. The difference here is that you can present all your main UI at the top level with no need for a home page menu.
.png)
Central Application Hub UI for soccer team management
If your app doesn’t have subareas to navigate into, all of your UI can be in one set of horizontally accessible panels. You can still use the Panorama control, but in this case you don’t need to have a home page. Such is the case with the People Hub on the Windows Phone. The following figure shows that the basic layout of the Panorama is still the same.
.png)
The people hub
With the People Hub, each panel holds its own unique UI and presents an area of functionality. The difference between this model of design and the one described in Central app hub with home page menu (Panorama or Pivot control) for Windows Phone is that you aren’t just resurfacing lower areas of the app in the Panorama. In the previous model, the panels to the right on the menu panel give you a quick look at content that you would access through navigation with the menu. With the model described here, your panels don’t resurface areas found somewhere else.
This topic contains the following sections.
- A panel for each area
- Another example
- Cautions
- Related Topics
A panel for each area
For your design, you determine which panel to place at the far left as the panel that the user sees first. One option is to set the left panel to the panel that the user was at when he or she last exited the app. You may also decide to always have the app open in the far-left panel. The far-left panel is the one with the background image flush to the left with the Panorama title’s leftmost edge viewable above it.
You can decide how many panels to the right to have, but we recommend that you have no more than four panels in total. If you have more than four panels, users have a difficult time keeping track of where they are.
You can put any UI you like in each of the panels. If you have four main feature areas, you can put one area in each of the four panels. The first panel can be designed with the content that you think users are most likely to want to see when the app starts. The preceding figure shows this type of use of the Panorama as a central application hub.
Each panel of the panorama holds items to click that take you to the details for that item. For example, the People Hub has a “what’s new” panel with items to tap. The items are presented in a vertically scrolling list and might represent posts to Facebook. Clicking one of them navigates away from the panorama and into the details of that post. There are multiple hit targets for each entry in the “what’s new” panel. One takes you to the post to see responses to the post. The other hit target is the person’s name. Tapping this navigates you to a Pivot control for that person, where you can see several pivot pages of information about them.
Another example
Each panel can be its own distinct area and not necessarily relate to the other panels. Navigation away from the main hub still occurs as users tap content in the individual panels. The navigation is into the details of what you tapped and not into a completely new subarea as from a Home panel menu.
The Samsung Now app has three panels in its use of the Panorama control as a hub. The theme of this app is to show users info that they might want quick access to in the morning and throughout the day—weather, news, and stock market info.
.png)
Application Hub Samsung Now app
The user can still navigate away from the panorama. For example, clicking a stock symbol in the stocks panel takes you to a single page with details about that company.
Cautions
Read the cautions at the end of Central app hub with home page menu (Panorama or Pivot control) for Windows Phone. Both that topic and this topic use the Panorama control, and the same cautions mentioned there apply to its use here.