If you are supporting sub-flyouts (like the Accounts in the Mail application), then this post is for you.
Posts in this series:
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!
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.