Consume Callisto’s SettingsFlyout for #Win8Dev

With Windows 8, all Metro-style apps are supposed to publish a few things under Settings Charm. These include
1) About info
2) Privacy Policy (if you use data connection this is a must)
3) User configurable options
4) Help etc

This can be easily done using Tim Heuer’s Callisto lib for Windows 8. It ships with a handy control called SettingsFlyout. Let’s get started. I tend to register info into SettingsCharm at the start of the app and leave it at that. Lets open MainPage.xaml.cs and add to the constructor

public MainPage()
{
    // constructor
    this.InitializeComponent();

    SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
}

private void MainPage_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    SettingsCommand command = new SettingsCommand("GameRules", "Rules", (x) =>
    {
        SettingsFlyout settings = new SettingsFlyout();
        settings.Content = new GameRules();
        settings.HeaderBrush = new SolidColorBrush(Color.FromArgb(255, 0, 77, 96));
        settings.Background = new SolidColorBrush(Colors.White);
        settings.HeaderText = "Rules";
        settings.IsOpen = true;
    });

    args.Request.ApplicationCommands.Add(command);

    // and so on.. add the other commands you need to show
}

now when you app runs, you can see it in settings charm as shown

if you click the appropriate link (e.g. rules which we added), we will see

now I prefer to also show appbar icon and possible a keyboard shortcut. If we have already set both in place, lets see how we can show Rules directly from appbar, you just call ShowHelp

private void ShowHelp()
{
    SettingsFlyout settings = new SettingsFlyout();
    settings.Content = new GameRules();
    settings.HeaderBrush = new SolidColorBrush(Color.FromArgb(255, 0, 77, 96));
    settings.Background = new SolidColorBrush(Colors.White);
    settings.HeaderText = "Rules";
    settings.IsOpen = true;
}

and this is what it does.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s