Click here to Skip to main content
13,596,321 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 29 Oct 2012
Licenced CPOL

CharmFlyout - Another Charming Custom Control

, 29 Oct 2012
Rate this:
Please Sign up or sign in to vote.
Settings charm flyouts to a C# Metro application.

My goal is to make adding Settings Charm Flyouts to a C# Metro application as easy as possible. To that end, I created a custom control called CharmFlyout.

Posts in this series:

Install CharmFlyout from and add to your existing Metro application:

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

If you have a single page application with a MainPage.xaml, then edit MainPage.xaml to:

  1. Add the using:CharmFlyoutLibrary.
  2. Add the CharmFlyout custom control.
  3. Add content to the CharmFlyout. In the example below, the content is a StackPanel.











           Heading="My Flyout"


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

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





                Swipe the right side of the screen to show the Settings Charm
                <LineBreak />
                <LineBreak />
                CharmFlyout Demo
                <LineBreak />
                By John Michael Hauck


                       FromHorizontalOffset="0" />

The location of the CharmFlyout should be such that it occupies the entire MainPage. That is, don’t embed it inside of a StackPanel or otherwise restrict its size.

Add the code-behind in MainPage.xaml.cs as shown here:

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

namespace CharmDemoApp
    public sealed partial class MainPage : Page
        public MainPage()
            SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;

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

That's it.  When you run your application, you will see "My Flyout" in the settings charm, and when you click “My Flyout”, this will fly out:


Here is a comparison of the CharmFlyout vs. the Permissions flyout:


CharmFlyout binaries reside here:

CharmFlyout source resides here:

Further Reading

If you are developing an application based on Grid App where there is no MainPage, then consider reading: CharmFrame – Adding CharmFlyout to GridApps.

If you are supporting sub-flyouts (like the Accounts in the Mail application), then consider reading: CharmFlyout – Supporting sub-flyouts.


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

QuestionFormatting... Pin
Sandeep Mewara29-Oct-12 1:46
mvpSandeep Mewara29-Oct-12 1:46 

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 | Cookies | Terms of Use | Mobile
Web04 | 2.8.180621.3 | Last Updated 29 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid