Click here to Skip to main content
13,192,426 members (47,509 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 23 Oct 2012

CharmFrame – Adding CharmFlyout to Grid Apps

, 23 Oct 2012
Rate this:
Please Sign up or sign in to vote.
Adding CharmFlyout to Grid Apps

It appears that adding CharmFlyouts to apps like those generated with the Grid App template is difficult. The problem comes from the fact that there is no MainPage.xaml. Placing the CharmFlyout in each page, like GroupedItemsPage, GroupDetailPage, and ItemDetailPage is fraught with problems as Martin Bennedik comments. Martin suggests placing the code in the LayoutAwarePage, and the UI in a UserControl. This makes a fair amount of sense and is worth pursuing.

Posts in this series:

In thinking about the problem, I wondered if there might be a different solution. Again, the root of the problem in Grid Apps is that there is no MainPage that is always visible (in which we can embed our CharmFlyouts). It turns out, though, there is another user interface element that is always visible that can suit our purposes. Grid Apps have a Frame. This can be seen here:


var rootFrame = new Frame();

Our goal is to embed our CharmFlyouts into this frame. It will take a few steps to get there, but I think the end result is worth it. Let’s set the stage by creating a Metro Grid App and adding the CharmFlyout library to it:

  1. Install the NuGet Package Manager if you have not already.
  2. Create your Metro Grid application in Visual Studio.
  3. Select Manage NuGet Packages from the Project menu.
  4. Click Online. Search for CharmFlyout. Click Install.

Create a UserControl to host your flyouts and call it MyCharmFlyouts. Here is what I created:











           Heading="My About"


                   FontSize="16">CharmFlyout by John Michael Hauck</TextBlock>

                   FontSize="16">For support:</TextBlock>



           Heading="My Settings"


                   FontSize="16">Setting A</TextBlock>
                <CheckBox />

                   FontSize="16">Setting B</TextBlock>
                <CheckBox />

                   FontSize="16">Setting C</TextBlock>
                <CheckBox />


using System;
using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CharmDemoGridApp
    public sealed partial class MyCharmFlyouts : UserControl
        public MyCharmFlyouts()
            SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;

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

        private async void OnMailTo(object sender, RoutedEventArgs args)
            var hyperlinkButton = sender as HyperlinkButton;
            if (hyperlinkButton != null)
                var uri = new Uri("mailto:" + hyperlinkButton.Content);
                await Windows.System.Launcher.LaunchUriAsync(uri);

Modify App.xaml.cs to use a frame that supports additional content, and add your new flyout user control to it. One such handy frame is now included in the CharmFlyoutLibrary, called CharmFrame.


var rootFrame = new CharmFrame { CharmContent = new MyCharmFlyouts() };

That’s it!



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


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

QuestionAdding an event listener? Pin
BillOsuch9-Jan-13 6:12
memberBillOsuch9-Jan-13 6:12 
I need to have my pages do various things when the flyout is closed - how can I raise an event from the user control? I know there's the IsOpenChanged event handler, but I'm not sure what to do with that when you're using a user control rather than embedding the flyout on the page (since the page doesn't have a reference to the UC).


General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171017.2 | Last Updated 23 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid