Question: Is there an easy way to detect when the Charms bar is opened (such as to pause a game at such times)?

Answer: Yes, you can use the HTML blur event for this purpose, as opening the Charms pane will take focus away from the app (and closing it will cause a focus event). What’s important here is that you listen to the window object’s blur event, rather than any other specific element. For example:

window.addEventListener(“blur”, handleEvent, false);

handleEvent gets called when you activate charms via touch (in the simulator at least) and keyboard. The one case that it doesn’t seem to work is when you pull the charms out with the mouse in the lower right. For this, listen for the body element’s mouseleave event and handle it the same way as blur (even using the same handler).

Note that blur is not fired when the app bar appears, as that’s still keeping focus on the same app window (it’s app UI, not system UI). For this you can use the app bar’s beforeshow/aftershowevent, or you can use the blur event on the body element.
Question: I want to automatically close the charms pane from within one of my settings flyouts. How can I do this?

Answer: It’s very simple, just call window.focus() to set the focus back to the app, which automatically dismisses the charms bar. Navigating to a page with WinJS.Navigation.navigate has the same effect (as it sets the focus in the process).


Comments are closed