minsangk.im

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:

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

Windows.UI.ApplicationSettings.SettingsPane.show()

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

// For WinJS.UI.NavBar element with id="global_navbar"
document.getElementById("global_navbar").winControl.show();

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

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

Please note that this page was migrated from an old Wordpress site; some of the formatting might be messy, and some images have degraded quality and resolution.