Adding a settings Page to the Windows 8 Settings Charm

I recently completed by second game in Windows 8 (the first using the MonoGame framework). Given the MonoGame architecture, displaying a settings screen seemed a little more complicated than it should have been; obviously displaying this using native Windows controls will mean that I have some re-work should I ever try to port to Android.

This first thing with WIndows is always to hook up the Windows settings charm (don’t confuse this with your own settings page):

        private void AddFlyouts()
        {
            var settingsPane = SettingsPane.GetForCurrentView();           
            settingsPane.CommandsRequested += settingsPane_CommandsRequested;           
        }

This function should be called from the OnLaunched event of you app (for C# apps this is in App.xaml.cs).

Next, create the CommandsRequested event handler, and show the settings screen:

        void settingsPane_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPanesender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
        {
             var commandSettings = 
                              new SettingsCommand ("settings" , "Settings" , settingsCommandInvoked);
            args.Request.ApplicationCommands.Add(commandSettings);
        }

And here’s what settingsCommandInvoked looks like:

        private Popup _popUp;
        private const double WIDTH = 646;
        private void settingsCommandInvoked(Windows.UI.Popups.IUICommand command)
        {
            Rect window = Window.Current.Bounds;

            _popUp = new Popup
            {
                Width = WIDTH,
                Height = window.Height,
                IsLightDismissEnabled = true,
                IsOpen = true
            };
            _popUp.Child = new Pages.SettingsPage () 
                              { Width = WIDTH, Height = window.Height };
            _popUp.SetValue( Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation .Right ? (window.Width - WIDTH) : 0);
            _popUp.SetValue( Canvas.TopProperty, 0);
        }

If you’re just copying this verbatum and now compile that, you’ll discover that you need Pages.SettingsPage. That’s basically a XAML page that actually displays the settings. Mine looks something like this:

< UserControl
    x: Class ="MyApp.Pages.SettingsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns: x ="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns: d ="http://schemas.microsoft.com/expression/blend/2008"
    xmlns: mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc: Ignorable ="d"
    d: DesignHeight ="300"
    d: DesignWidth ="646">
    <Border BorderBrush ="#FF590151" BorderThickness ="1">
        < Grid Background ="AliceBlue" VerticalAlignment="Stretch">
            < Grid.RowDefinitions>
                < RowDefinition Height ="80"/>
                < RowDefinition Height ="*"/>
            </ Grid.RowDefinitions>
            < Grid Background ="Aqua" Grid.Row="0">
                < Grid Margin ="40,20,17,13">
                    < Grid.Transitions>
                        < TransitionCollection>
                            < EntranceThemeTransition FromHorizontalOffset ="50" />
                        </ TransitionCollection>
                    </ Grid.Transitions>
                    < Grid.ColumnDefinitions>
                        < ColumnDefinition Width ="50" />
                        < ColumnDefinition Width ="*" />
                        < ColumnDefinition />
                    </ Grid.ColumnDefinitions>
                    < Button Click ="Button_Click_1" Margin="0,3,0,0" Grid.Column="0"
                        HorizontalAlignment ="Left" Style ="{ StaticResourceBackButtonStyle}"/>
                    < TextBlock Margin ="10,5,0,0" Grid.Column="1" FontFamily ="Segoe UI"
                        FontWeight ="SemiLight" FontSize ="24.6667" Text="Settings"HorizontalAlignment="Left" />
                    < Image Source ="/Assets/icon.png" HorizontalAlignment="Right"Grid.Column="2" Margin="0,0,6,0" />
                </ Grid>
            </ Grid>
            < Grid Grid.Row ="1" Margin="40,24,23,0" VerticalAlignment ="Top">
               
                < Grid.Transitions>
                    < TransitionCollection>
                        < EntranceThemeTransition FromHorizontalOffset ="120" />
                    </ TransitionCollection>
                </ Grid.Transitions>
                               
                < Button x : Name="MySetting" Foreground ="Black" BorderThickness="1"
                        Click ="MySetting_Click">Do Something</ Button>
               
            </ Grid>
        </ Grid>
    </Border >
</ UserControl>

That should be it. Inside the settings page itself, my suggestion would be that you use a instance of a class defined in App.Xaml.cs, and then use that elsewhere in your app / game to reference the setting. This means that you’re not constantly passing indiviual settings around.

Conclusion

As I said at the start, although this does work, if you’re using a cross platform framework for your game or app then this might not be the best approach; however, you do need to have your settings here if you intend to get into the Windows Store.