Home > C#, WinRT > Adding settings to Windows 8.1 Store apps with the new SettingsFlyout control

Adding settings to Windows 8.1 Store apps with the new SettingsFlyout control

05/08/2013

We need to follow precise guidelines to add settings management in Windows Store apps: we must add commands to the Settings Charm and create a UI that respects strict rules. However, Windows 8 doesn’t provide a built-in control to define the so called Settings Flyout, so it is necessary to manually create it starting from the Popup control, or use third-party toolkits like Callisto.

Things change with Windows 8.1. The new SettingsFlyout control makes it easy to create settings panels that conform to UI guidelines.

First of all, we need to add a new Settings Flyout item to the project:

Settings Flyout definitions

Settings Flyout definitions

Let’s take a look to the XAML declaration of the item:

<SettingsFlyout
    ...
    IconSource="Assets/SmallLogo.png"
    Title="GeneralSettings"
    d:DesignWidth="346">

    <!--This StackPanel acts as a root panel for vertical layout of the content sections-->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The StackPanel(s) below define individual content sections -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}" 
                       Text="Lorem ipsum" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" 
                       Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </TextBlock.Text>
            </TextBlock>

        </StackPanel>

        <!-- Define more Content Sections below as necessary -->

    </StackPanel>
</SettingsFlyout>

This code defines the following user interface:

SettingsFlyoutExample

The IconSource and Title properties represent, respectively, the icon image and the title displayed in the settings flyout header. By default, the icon is set to the small logo app image, as defined in the app manifest. Moreover, we can easily change header background and foreground color using the HeaderBackground and HeaderForeground properties.

Note that the Back button is added automatically and is fully funcional, so we don’t need to write any code to handle it.

The rest of the XAML defines the content of the flyout. The default template provides an example with some framework theme resources, that we are encouraged to use in order to create a consistent UI among all the apps.

Now we need to register the Settings Flyout to be available in the Settings Charm. This task can be accomplished using the SettingsPane class. So, let’s add the following code to the App.xaml.cs file:

protected override void OnWindowCreated(WindowCreatedEventArgs args)
{
    SettingsPane.GetForCurrentView().CommandsRequested += (s, e) =>
    {
        SettingsCommand defaultsCommand = new SettingsCommand("general", "General",
            (handler) =>
            {
                GeneralSettingsFlyout sf = new GeneralSettingsFlyout();
                sf.Show();
            });
        e.Request.ApplicationCommands.Add(defaultsCommand);
    };

    base.OnWindowCreated(args);
}

The OnWindowCreated method is called once for the creation of the main window. We register for the CommandsRequested event, that occurs when the user opens the settings pane. In its event handler, we create a new SettingsCommand, that represents a settings entry in the Charm. The corresponding action shows the flyout we have defined before, automatically aligned to the right of the screen.

SettingsFlyout object implements the light-dismiss bahavior, so it automatically disappears when the user touches anywhere on the screen outside of it.

By default, the flyout has a width of 346 pixel, that is the standard value for settings pane in Windows 8. If we want to use a larger flyout, we must set the Width property of the control (wide settings flyouts tipically have a width of 646 pixel).

Categories: C#, WinRT
  1. Shivam
    28/10/2013 at 08:28

    Can we have flyout on left side of screen by using this control . please help me out to find the answer . its been couple of days for me to search this thing .

    • 28/10/2013 at 09:49

      Flyouts are placed on left or right side of the screen based on the regional settings of the device: with Left-To-Right Language, it is shown on the right, while if you’re using a Right-To-Left Languange, the popup appears on the left.

  1. 07/08/2013 at 02:07
  2. 07/08/2013 at 09:43
  3. 07/10/2013 at 09:07
Comments are closed.
%d bloggers like this: