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.
1 thought on “Adding a settings Page to the Windows 8 Settings Charm”