Adding items to the Settings pane using Prism for the Windows Runtime

Previously I extended the sample photo viewing app so that a Flyout can be displayed by tapping on the photo on the PhotoPage. The PhotoInformationFlyout displays basic photo information including filename, file type, resolution, and path. A series of value converters were used to convert the photo information into a user friendly format for display.

In this blog post I’ll further extend the app so that the Settings pane contains an item for the app’s privacy policy. If an app has the ability to transmit data, it must contain a privacy policy. For more info see Windows 8 app certification requirements. While this app does not transmit data, adding a privacy policy to the app is a suitable example for showcasing another feature of Prism for the Windows Runtime, namely that of adding items to the Settings pane. When the user invokes the Settings pane from any page of the app they will see an item named Privacy policy. Selecting this item will display a Flyout that displays the app’s privacy policy.

Implementation

Creating the Flyout view

A Flyout view is required to display the app’s privacy policy. However it does not require an associated Flyout view model, as the Flyout view does not need to bind to any data in a view model, instead displaying embedded text. Please note that in a real app a Flyout view model would most likely be required in order to handle user acknowledgement of the privacy policy, and to obtain the localized version of the privacy policy from a resource file. 

The sample app defines a Flyout view named PrivacyPolicyFlyout which simply includes a TextBlock to display the text of the privacy policy. For more info about creating Flyout views using Prism see my previous blog post.

<Grid Style="{StaticResource PhotoViewerLayoutRootStyle}">

    <Grid.RowDefinitions>

        <RowDefinition Height="80" />

        <RowDefinition Height="Auto" />

    </Grid.RowDefinitions>

    <TextBlock Margin="20,50,0,0"

               Style="{StaticResource SubheaderTextStyle}"

               Text="Privacy policy" />

    <TextBlock Grid.Row="1"

               Margin="20,50,20,0"

               Style="{StaticResource BasicTextStyle}"

               Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 

               TextWrapping="Wrap"/>

</Grid>

Adding an item to the Settings Pane

The PrivacyPolicyFlyout can be displayed by the Settings pane by overriding the GetSettingsCharmActionItems method from the MvvmAppBase class in your App class and adding code to add the item to the Settings pane.

protected override IList<SettingsCharmActionItem> GetSettingsCharmActionItems()

{

    var settingsCharmActionItems = new List<SettingsCharmActionItem>();

    settingsCharmActionItems.Add(new SettingsCharmActionItem("Privacy policy", () => FlyoutService.ShowFlyout("PrivacyPolicy")));

    return settingsCharmActionItems;

}

In this method a new SettingsCharmActionItem is created and added to a List of SettingsCharmActionItems. The SettingsCharmActionItem takes two parameters – the first represents the text to shows in the Settings pane, with the second representing the action to be performed when the SettingsCharmActionItem is selected. So here, when the user selects the Privacy policy text in the Settings pane, the PrivacyPolicyFlyout will be displayed by invoking the ShowFlyout method of Prism’s FlyoutService class.

Summary

In this blog post I’ve extended the app so that the Settings pane contains a Privacy policy item. Prism’s SettingsCharmActionItem class is used to define a Settings pane item and the action that will be performed when the item is selected. When the privacy policy item is selected Prism’s FlyoutService is used to display the PrivacyPolicyFlyout view.

The sample app can be downloaded here.