A SettingsFlyout has both a header section and a content section. The header contains the back button, title, and an optional icon. You can set the header’s background and foreground to match the color scheme of your app. The flyout will always be full height but you can control the width when displayed.
There is an example for using the flyout control that were published with it’s introduction at //Build but this example assumes you’re defining the settings pane at the page level. While there are a number of reasons why you might want to scope your settings to the page, the vast majority of developers want them scoped to the application. I’m going to outline a model for doing just this that leverages User Controls to define the UX and functionality.
User Controls give you a clean separation of concerns when it comes to your settings. When you are working within the scope of the page your flyout’s code and bindings get intermingled with your page’s code which, depending on the complexity of the page, can be a bear to keep straight. Extracting the flyout to a user control allows you to define it’s functionality in isolation.
Building the User Control
First things first, we need a User Control to display our content. To do this I simply went to Project -> Add Item and selected User Control from the menu. In my example I’m calling this control FlyoutSample. Within this control I used the following XAML:
Because this is a standard user control, you can layer in as much functionality as you wish including bindings and other controls. In a couple of cases I’ve even gone so far as to build complete view models for a flyout because there was both data binding and business logic that needed to be applied.
Connecting the Dots
Once we have our controls build, we need to wire them up to the SettingsPane. This is done within App.xaml.cs during the OnLaunched event by declaring a handler for CommandsRequested. Within that handler I’ll wire up each of the Commands I want to display on the SettingsPane as well as the code to handle it being selected. In my previous post I used multiple handlers to achieve this, but I find the inline handling of the events makes for a cleaner implementation.