Adding a settings Page to the Windows 8 Settings Charm

October 09, 2013

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);

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: x =""
    xmlns: d =""
    xmlns: mc =""
    mc: Ignorable ="d"
    d: DesignHeight ="300"
    d: DesignWidth ="646">;
    < Grid Background ="AliceBlue" VerticalAlignment="Stretch">
            < Grid.RowDefinitions>
                < RowDefinition Height ="80"/>
                < RowDefinition Height ="\*"/>
            < Grid Background ="Aqua" Grid.Row="0">
                < Grid Margin ="40,20,17,13">
                    < Grid.Transitions>
                       < TransitionCollection>
                            < EntranceThemeTransition FromHorizontalOffset ="50" />
                    < Grid.ColumnDefinitions>
                        < ColumnDefinition Width ="50" />
                        < ColumnDefinition Width ="\*" />
                        <; ColumnDefinition />
                    < 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.Row ="1" Margin="40,24,23,0" VerticalAlignment ="Top">
                < Grid.Transitions>
                    < TransitionCollection>
                        < EntranceThemeTransition FromHorizontalOffset ="120" />
                < Button x : Name="MySetting" Foreground ="Black" BorderThickness="1"
                        Click ="MySetting\_Click">Do Something

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.


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.

Profile picture

A blog about one man's journey through code… and some pictures of the Peak District

© Paul Michaels 2024