Creating Authentic Looking Settings Panes with SettingsChrome

In my last post I described how the Okra App Framework allows you easily add multi-page settings panes to your Windows Store applications using the MVVM pattern.

However, the built in Windows 8 applications have a very distinctive style of settings pane and many Windows Store applications will want to recreate this style. To aid with this the Okra App Framework provides a SettingsChrome control to recreate the standard UI chrome.

Using the SettingsChrome control

If you remember from previously, you define the UI for an Okra App Framework settings pane using a standard UserControl with the PageExportAttribute applied to it.

[PageExport("MySettings")]

public sealed partial class MySettingsPage : UserControl

{

    ...

}

In the XAML we can add the Okra SettingsChrome control as the first child element (this can be done either manually in the XAML or added in the designer). SettingsChrome is a content control, and anything that you add inside it will be displayed within the content region of the settings pane. Also you may wish to set the width of the UserControl to define the size of the resulting settings pane.

<UserControl

    ...

    xmlns:ui="using:Okra.UI"

    Width="346">

    <ui:SettingsChrome Title="Sample"

        Logo="ms-appx:///Assets/SmallLogo.png"

        BackButtonCommand="{Binding ...}"

        HeaderBackgroundBrush="{StaticResource ...}"

        HeaderForegroundBrush="{StaticResource ...}">

        <!-- Insert settings pane content here -->

    </ui:SettingsChrome>

</UserControl>

There are a number of properties that you can set on SettingsChrome,

• “Title” – This property allows you to set the text that is displayed at the top of the settings pane


• “Logo” – This should point to an image resource to use as the application logo in the top-right corner of the settings pane


• “BackButtonCommand” – This can be bound to a relevant command on the view-model and will be called whenever the user clicks on the settings pane back button


• “HeaderBackgroundBrush” – This allows you to set the background colour for the settings pane header. Generally this will be a static resource set to the same colour used for application tile background


• “HeaderForegroundBrush” – This allows you to set the foreground colour for the settings pane header

Summary

To summarise, the Okra App Framework allows you to easily recreate the standard settings pane UI within your own application by simply adding a SettingsChrome control into the pane’s XAML.

A sample application demonstrating the use of SettingsChrome, as well as how to define a settings pane using MVVM is available from the Okra CodePlex downloads page.