How to use SettingsPane with MVVM Light in metro style app - windows-8

Question

I use MVVM Light Framework for a metro style app.
I want add a command in SettingsPane to show an about page. The about page should be displayed on the right (like preinstalled calendar app). For a test I have added following line in OnLaunched method in App.xaml.cs:
SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;
and following event handler:
void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
// Add an About command
var about = new SettingsCommand("about", "About", (handler) =>
{
// show about page in flyout transition...
});
args.Request.ApplicationCommands.Add(about);
}
Is this the only way?
How can I flyout the about page? Any tips...?
Thanks for help!
Michael

Answer 1

to answer the first question:
as far as I know, This is the only way to do something like that.
To answer the second question:
To flyout the the about page you can do this:
// Add an About command
var about = new SettingsCommand("about", "About", (handler) =>
{
// show about page in flyout transition...
var currentPane = new AboutPane(); // the aboutpane is a page
var myPopup = new Popup();
myPopup.IsLightDismissEnabled = true;
myPopup.Width = _settingsWidth;
myPopup.Height = Window.Current.Bounds.Height;
myPopup.Width = 346;
myPopup.Height = Window.Current.Bounds.Height;
myPopup.Child = currentPane;
myPopup.SetValue(Canvas.LeftProperty, Window.Current.Bounds.Width - 346);
myPopup.SetValue(Canvas.TopProperty, 0);
myPopup.IsOpen = true;
});
args.Request.ApplicationCommands.Add(about);
I hope this will solve you're problem.

Answer 2

Michael, try using the SettingsFlyout control from the Callisto project on github
You will need something like:
using Callisto.Controls;
//... other code here
//in your callback for handling the settings command:
// show about page in flyout transition...
var settingsFlyout = new SettingsFlyout();
settingsFlyout.Content = new AboutControl(); //this would be your own user control that contains the about page content
settingsFlyout.IsOpen = true;