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

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.



Profile picture

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

© Paul Michaels 2022