WinJS apps: programmatically open the App Bar, Nav Bar and the settings pane

It’s been a few years since the release of Windows 8, but teaching users how to use the edgy swipe is still difficult.

When I was first designing it, I added the search box to the top right because context-sensitive search charm is perhaps the most difficult to grasp for new users. This works really well, because a text box with a magnifying glass button next to it has good affordance.

However, I was still getting questions on how to change settings in the app, such as video quality.

So – I’m giving up. Instead of trying to explain things to users unfamiliar with edge swipes, I’ll be adding a “Gear” icon and “More” icon to Windows version of my Giant Bomb app:

GB app on Windows

See: top right corner.

Here is how you invoke a Settings pane (MSDN):

Windows.UI.ApplicationSettings.SettingsPane.show()

Here is how you open the nav bar (MSDN).

App bar is practically the same as nav bar (MSDN).

I noticed that this also helps with Windows 10 because edge swipes are gone.

Advertisements