Search code examples
csswindows-8expression-blend

How to style the settings pane in windows metro app with Blend?

I would like to build the style for some windows 8 Metro Application.

How can I display the settings pane in Blend?

For instance, the settings.html declared in the default.js as described below:

app.onsettings = function (eventObject) {
    eventObject.detail.applicationcommands = { "prefs": { title: "Preferences", href: "/pages/prefs/prefs.html" } };
    WinJS.UI.SettingsFlyout.populateSettings(eventObject);
};

Another related question is : How can I display the search results page in Blend?

Solution

  • One solution is to programmatically call "the settings pane" by such a code:

    function scenario5ShowSettingsFlyout() {
    WinJS.UI.SettingsFlyout.showSettings("prefs", "../../pages/prefs/prefs.html");
}

    More information are available in the scenario 5 of the microsoft official sample.