Click here to Skip to main content
13,048,766 members (79,172 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

4K views
2 bookmarked
Posted 19 Oct 2012

CharmFlyout – Supporting sub-flyouts

, 19 Oct 2012
Rate this:
Please Sign up or sign in to vote.
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:

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!

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...

Pro

Comments and Discussions

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