**** NOTE: This post is valid for the Developer Preview of WinRT and MAY change in later releases ****

If you have been paying attention to any of the Windows 8/Metro stuff that has come out sense BUILD you may have noticed that with Windows 8/Metro application developers can now easily light up their applications by enabling their apps to hook into the various system Contracts.  These contracts include things like search, settings, file picker and app selection.

In this post we will walk though what is needed in order to integrate into the system settings panel in Windows8 and how to present your settings to your user in a manor which makes it feel like it is built into the application.

Few things before we get started.  The Windows 8 UI design guidelines have a few things to say about Settings Panels

• The settings panel should be contextual, meaning that the panel should change based on the active screen
• The panel should be either 346 or 646 pixels wide
• The panel should be able to be closed by the ‘light dismissal’ concept.  Meaning that if someone touched off the panel it should close.
• The panel should use smooth animations/transitions which mimic the look/feel of the native panel in Metro
• The changed settings should take affect immediately, no waiting for a save or commit action.

Ok enough of what it ‘should’ do, lets move on to how to make it do these things.  What exactly is it we need to do in order to enable our application to hook into the Settings API?

Step 1: Create the User Control you are going to use as your Settings Panel for the given page.

We will create our User Control and call it SettingsUserControl

Step 2: In the Xaml of your page which can trigger the Panel add the following

There are a few things in the above code (sorry it is a screen shot but the XAML was not rendering correctly).

1. local: SttingsUserControl – local is a xmlns alias to the full namespace of my SettingsUserControl
2. Margin=”0,0,-346,0 is needed to start the visual element off screen.  It will transition on screen later
3. .Transitions is a way to setup the transition correctly
   1. We use the RepositionThemeTransition which is a built in transition which allows you to avoid using a story board for your animation

Step 3: In the code behind, or better yet the View Model, configure the Panel so that it can be hooked into the Win8 Panel

pane = SettingsPane.GetForCurrentView();
var preferencesCommand = new SettingsCommand(KnownSettingsCommand.Preferences,
    (handler) =>
    {
        SettingsUserControl.Margin = ThicknessHelper.FromUniformLenght(0);

 }
);

pane.ApplicationCommands.Add(preferencesCommand);

Couple of things about the code above

1. By setting the margin you are triggering it to be visible
2. You do not need to manually enable the control to be visible.
3. To be a good citizen and to follow the guidelines you need to enable light dismissal and hide the control when the user presses off the control (see step 5)

Step 4: Run your application and open up the Setting Charm

In order to open up the Settings Charm all you need to do is call the following

Windows.UI.ApplicationSettings.SettingsPane.Show();

By calling the line above the pane will pop out and you should see a line which says 'Preference'.  If you click on this you should see your user control slide into view.

Step 5: Enabling Light Dismissal

1. Handle the PointerPressed Event on the form which is visible
2. Check to see if the right margin is 0, if so reset it

private void LayoutRoot_PointerPressed(object sender, PointerEventArgs args)
{
     if ( SettingsUserControl.Margin.Right == 0 )
     {
          SettginsUserControl.Margin = ThicknessHelper.FromLengths(0,0,-346,0);
     }
}

As you can see the plumbing for showing a settings screen is not very difficult or lengthy.

Till next time.