CharmFlyout – Supporting sub-flyouts

If you are supporting sub-flyouts (like the Accounts in the Mail application), then this post is for you.

Posts in this series:

• The Quest for a Settings Flyout
• CharmFlyout – Another Charming Custom Control
• CharmFlyout – The Design
• CharmFrame – Adding CharmFlyout to Grid Apps
• CharmFrame – The Design
• CharmFlyout – Supporting sub-flyouts

In this example, we will create two flyouts, "My Settings"and "My Sub-Settings". Our desired behavior is to allow a settings flyout to open another (sub) settings flyout – see green arrows above. When the sub flyout is opened, the original (parent) is closed. Then, when the user presses the back arrow on the sub-flyout, the parent flyout is re-opened – see blue arrows. However, if the user light-dismisses the sub-flyout (by clicking elsewhere on the application screen), then the parent is not reopened, but the application is displayed without any flyouts – see yellow arrow.

<cfo:CharmFlyout
   x:Name="cfoSettings"
   Heading="My Settings"
   HeadingBackgroundBrush="#FF4E0000">
    <StackPanel>
        <TextBlock
           FontSize="16">Setting A</TextBlock>
        <TextBlock
           FontSize="16">Setting B</TextBlock>
        <TextBlock
           FontSize="16">Setting C</TextBlock>
        <Grid
           Background="#FF4E0000" HorizontalAlignment="Left">
            <Button
               Click="OnViewSubheading"
               Content="View Sub-Settings" />
        </Grid>
    </StackPanel>
</cfo:CharmFlyout>
<cfo:CharmFlyout
   x:Name="cfoSubSettings"
   Heading="My Sub-Settings"
   HeadingBackgroundBrush="#FF4E0000"
   ParentFlyout="{Binding ElementName=cfoSettings}">
    <StackPanel>
        <TextBlock
           FontSize="16">Sub-setting 1</TextBlock>
        <TextBlock
           FontSize="16">Sub-setting 2</TextBlock>
    </StackPanel>
</cfo:CharmFlyout>

The point to notice in the second (sub-flyout) is the property called ParentFlyout. In this case, the parent of cfoSubSettings is cfoSettings.

ParentFlyout="{Binding ElementName=cfoSettings}"

Here is the code-behind for these two flyouts.

public sealed partial class MyCharmFlyouts : UserControl
{
    public MyCharmFlyouts()
    {
        this.InitializeComponent();
        SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;
    }

    private void CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
    {
        args.Request.ApplicationCommands.Add(new SettingsCommand
              ("s", "My Settings", (p) => { cfoSettings.IsOpen = true; }));
    }

    private void OnViewSubheading(object sender, RoutedEventArgs e)
    {
        cfoSubSettings.IsOpen = true;
    }
}

That’s it!

• CharmFlyout binaries reside here: http://nuget.org/packages/charmflyout/
• CharmFlyout source resides here: http://charmflyout.codeplex.com/