Earlier today Ginny Caughey asked a question about how to maintain an app with support for Windows 8 and 8.1. It’s hard to answer a question that broad so I asked her what she wanted to take advantage of with 8.1. Her main use case is handling of screen [and app] sizes but while she was working, wanted to replace the Callisto SettingsFlyout control with the new native SettingsFlyout control in 8.1. I suggested a few ideas throughout the day from #if separation to MEF.
I started tonight working on a sample on how you could inject a SettingsFlyout using MEF but decided that it was just too complex for this example. I took a step back and thought about how to make this as easy as possible. I recently blogged about how to use the new Geolocator API within a Windows Phone 8 and Phone 7 application and thought that wrapping the Callisto API would be best suited for this situation as well.
The idea behind this blog is that you have one application that supports both Windows 8 and 8.1. You might do this because you want to start upgrading to 8.1 while still supporting Windows 8 (bug fixes, new features etc). to accomplish this you need to projects, one that targets 8 and one targeting 8.1. One project houses the files while the other adds the files as links.
The first step is to create a SettingsFlyout class. You want this class to be in the Windows.UI.Xaml.Controls namespace so that your app can use the same code. The new SettingsFlyout control has nine properties, three methods and one event that are specific to it. You may or may not need all of the properties/methods. Some are not supported in Callisto so while we can stub them, they will have no effect.
using Windows.UI.Xaml.Media;
namespace Windows.UI.Xaml.Controls
{
public class SettingsFlyout
{
private readonly Callisto.Controls.SettingsFlyout _settings = new Callisto.Controls.SettingsFlyout();
public Brush HeaderBackground
{
get { return _settings.HeaderBrush; }
set { _settings.HeaderBrush = (SolidColorBrush)value; }
}
public string Title
{
get { return _settings.HeaderText; }
set { _settings.HeaderText = value; }
}
public object Content
{
get { return _settings.Content; }
set { _settings.Content = value; }
}
public ImageSource IconSource
{
get { return _settings.SmallLogoImageSource; }
set { _settings.SmallLogoImageSource = value; }
}
public void Show()
{
_settings.IsOpen = true;
}
public void Hide()
{
_settings.IsOpen = false;
}
}
}
I only implemented a few of the properties/methods for this sample. If you need more it’s easy to add them. The biggest drawback of this implementation is that it can only be used through code. This does not work if you want to declare your SettingsFlyout in xaml. To create the SettingsFlyout in code subscribe to the Loaded event of the rootFrame within App.xaml.cs. Within the Laded event tell the app that you have settings.
private void RootFrameOnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;
}
Within the OnCommandsRequested event is where you build up your settings. Now that we have wrapped the Callisto SettingsFlyout, we can use the 8.1 API for creating one!
private void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
var flyout = new Windows.UI.Xaml.Controls.SettingsFlyout
{
HeaderBackground = new SolidColorBrush(Colors.Blue)
};
args.Request.ApplicationCommands.Add(
new SettingsCommand("MySettings", "General Settings",
command =>
{
flyout.Title = "General Settings";
// replace this content with a control that houses yor settings
flyout.Content = new Rectangle
{Fill = new SolidColorBrush(Colors.Red), Width = 100, Height = 100};
flyout.Show();
}));
}
It’s as simple as that.