Click here to Skip to main content
12,398,225 members (53,275 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3.7K views
2 bookmarked
Posted

CharmFlyout – Supporting sub-flyouts

, 19 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
If you are supporting sub-flyouts (like the Accounts in the Mail application), then this post is for you.

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

Posts in this series:

flyout

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/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

John Michael Hauck
Software Developer (Senior) LECO Corporation
United States United States
John Hauck has been developing software professionally since 1981, and focused on Windows-based development since 1988. For the past 17 years John has been working at LECO, a scientific laboratory instrument company, where he manages software development. John also served as the manager of software development at Zenith Data Systems, as the Vice President of software development at TechSmith, as the lead medical records developer at Instrument Makar, as the MSU student who developed the time and attendance system for Dart container, and as the high school kid who wrote the manufacturing control system at Wohlert. John loves the Lord, his wife, their three kids, and sailing on Lake Michigan.

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 19 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid