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.