Flyout control for Windows 8 Metro (XAML/C#)

IMPORTANT: This post ist partly outdated. TCD.Controls is now available on NuGet, so you don’t have to import the *.xaml into your project anymore! All code shown in this post still applies. Please refer to this post for more information on the changes.


In Windows 8 Metro style apps there’s something called ‘Flyouts’. It’s a panel that slides in from the right. Sadly the control is not available to C#/VB developers. In this post Tim Heuer shows how to integrate with the settings contract using flyouts. Based on his code I developed a Flyout control for XAML/C# solutions. Here’s a list of what it can or can’t do:

It does:

  • light dismissal, back button
  • easy integration of ‘content’
  • swipe-in transition
  • custom color theme
  • ‘narrow’ and ‘wide’ mode

It does not:

  • theming of the BackButton
  • beeing attached to the left
  • construct it in XAML

I would like to provide you with a dll, but there’s a bug in the compiler (aka something I don’t understand yet) some stupid architechture thing in WinRT/XAML prevents me from doing so.

To use the Flyout control you can get the TCD.Controls package from NuGet or you can add ‘Flyout.xaml’ to your project and reference the namespace:

using TCD.Controls;

Then use it like this:

TextBlock sampleContent = new TextBlock() { TextWrapping = TextWrapping.Wrap, Text = "Some stupid sample Text."};
Flyout f = new Flyout(new SolidColorBrush(Colors.White), new SolidColorBrush(Colors.Green), "Flyout", FlyoutDimension.Narrow, sampleContent);
f.Show();

This is what it looks like in the sample:

In the FlyoutAndSettingsSample you find all you need to integrate it in your app.

That’s it! In the next post I’ll introduce the SettingsContractWrapper, that let’s you integrate with the settings contract in just a few lines of code!

UPDATE: The sample application above now contains Windows 8 Release Preview compatible code =)

30 thoughts on “Flyout control for Windows 8 Metro (XAML/C#)

  1. Pingback: SettingsContractWrapper – the easy way to integrate w/ settings « Kuchenzeit

  2. Just to let everyone know – with the release of the Release Preview, a number of the Static Resources used in the Flyout.xaml have been renamed. So things like BackButtonGlyphBrush are now known as BackButtonForegroundThemeBrush. SO – if you download the samples as-is – just double check the resource names. Microsoft has published a doc here with API name changes: http://go.microsoft.com/fwlink/?LinkID=251943

  3. Thanks for the tip – I just migrated most of my Win8 CP projects to RP, including the Flyout stuff. I will update this post tomorrow and share the new version. The code is now updated.
    Does anyone know the proper way to pack XAML controls into libraries in WinRT?

  4. First of all it’s a great control! One major issue I’m having with this is that it doesn’t seem to be layoutaware on my tablet so my keyboard hovers over some textboxes when showing the flyout… any solutions to this one?

  5. Really nice flyout. I’m using it in a sample app to show my coworkers who don’t know much about Metro style apps yet.

    • thanks :)
      Short: Yes
      Long: You’d have to add the Flyout.xaml/cs to your project and then use it, but I found this to be very uncomfortable (I’m using the NuGet package in all of my projects as well..) Especially when it comes to updates it’s much more convenient to use. (Speaking of updates, there’s one in the tube, which brings a customizable header color, corresponding to the system ones – I’ll upload it this evening.)
      If you want to avoid NuGet anyways, I can upload the xaml file for you.

  6. Thank you!!!

    I am doing the application where that flyout should be displayed when clicking on the charms and also on a button in the app..can you please help me in doing this..I created a usercontrol of the similar height and width of flyout..that should seen when clicked on the Setting charms.

  7. Thanks a lot for this sample. Can you please share your thoughts on how can we loadaccess StackPanel from XAML instead of creating it at runtime? Thanks in advance.

    • You can make a UserControl and just create a new instance of it at runtime, handling it to the Flyout constructor. Usually I design UserControls like “SettingsPanel.xaml” and when creating the Flyout, I use ‘new SettingsPanel()’ for the Flyouts Content.
      hope that helps^

      • Thanks theCake, your inputs were valuable. But now is am stuck with another issue while disaplaying a usercontrol on flyout with combobox. I have a combox on my usercontrol and if i specify values for this combobox thro’ xaml then the combobox is able to dropdown properly on flyout. But if i don’t set values thro’ xaml and instead set it thro’ .cs file using code, comboboxctrl.Text = “Test” then the combo box does not dropdown. Have you ever encountered such issue ?

  8. Hi and great control , although I have a question.
    If i want to create a button with a clicked event inside the flyout how do I do that ????
    Thank you

    • Hey,
      You can either create a full UserControl (XAML Definition + c# code) and put it inside the Flyout, or you can construct the Button in code, like this:
      Button bu = new Button();
      bu.Click += bu_Click; //where bu_Click is a void (object Sender, RoutedEventArgs e)
      cheers^

  9. Hi ,
    If I create a custom button in the flyout , when I press it in order for me to navigate to a second screen it goes to the second screen but the flyout stays on screen.
    How can I make the flyout disappear when I press my custom button ?
    thank you

    • Sorry for the late response.. I was on vacation.. =)
      I’m not sure, maybe you can hand the flyout over and use the .IsOpen property.. I think it depends on how you do the navigation as well^
      You can use Flyout.Hide() to make it disappear.

      Oups – I just noticed that there was no .IsOpen property in the current version – fixed it :)

  10. Hi ,
    I don’t know if this is a bug or not. I ‘m opening the flyout control which inside I have a list view filled with items.
    When I click inside this listview(an item) I want to create a different listview with different items.
    So what I did is the below
    StackPanel s = new StackPanel();
    List MyBrowserList = new List();
    MyBrowserList = item as List;
    if (MyBrowserList == null)
    {
    s.Children.Add(this.CreateTheListViewSubFolder(MyPassBrowsers));
    }
    Myf = new TCD.Controls.Flyout(
    new SolidColorBrush(Colors.White),//the foreground color of all flyouts
    (Brush)App.Current.Resources[“AppBarItemPressedForegroundThemeBrush”],//the background color of all flyouts
    new SolidColorBrush(Color.FromArgb(202, 202, 202, 0)),//the theme brush of the app
    “Browsers…”, FlyoutDimension.Narrow,//switch between narrow and wide depending on the check box
    s);
    Myf.Show();
    So far so good. The flyout is displayed with the items I want .
    But when I click one Item , the same code runs again , I get the flyout populates with the new listview items but….
    If I tap, out of the flyout area I have to tap twice in order for the flyout to disappear.
    For eg.
    the first time the Level is 1. The second time the level is 2. If I want for the flyout to disappear and I have created the flyout twice (even though it is a local variable) I have to tap twice or three times(it depends on how many times I have populate the flyout) in order for the flyout to disappear.
    I tried to put a tapped event where i do the below
    Myf.Hide(CloseReason.LightDismissal);
    Myf = null;
    but nothing.
    Still I must tap second and third time (depends how many times I have created).
    Also if I ‘ve noticed that everytime I call the Show method , if the flyout is created , it creates a new layer-flyout over the flyout. It doesn’t destroy the previous one it justs displays it over the previous one and i believe that is the reason why I have to tap several times.
    Do we have a solution for this ? Is it something that I need to do ?
    Is it possible to completely destroy the flyout if it is opened already ? And if it is possible how can I do that ?

    Also one more question.
    How can I update with the most recent using NugetManager in order to get the Isopen property ?

    Appreciate if you could help me on this.
    thank you

  11. hi , first of all thanks a lot it was a great post , i have a doubt , i was able use the control and open it but on press of a button which is present in the user control i want to close the flyout , but i am not able to do that can you let me know how can i close the flyout on press of button on the usercontrol , 1) since the cursor will now go to usercontrol when it opening the flyout right , there in codebehind of usercontrol i want to close the flyout , please let me know how can i do this , thanks in advance

    • I suppose you Button is inside of a custom UserControl. In that case you need to tell the UserControl which Flyout it is in. For example:
      userControl mycontent = …;
      Flyout f = new Flyout(…);
      mycontrol.ParentFlyout = f;

      YThen in the event handler of the Button, you can use:
      ParentalFlyout.Hide(CloseReason.Other);

  12. I’m having a slight issue with the flyout control where I have a browser control on a page and when the flyout pops out, it opens up but is hidden behind the browser control. The browser control isn’t on the entire page so I can clearly see it at the top and bottom parts of the page but it is just hidden where the browser control is. Is there a property on the flyout to show in front of the browser control? I don’t have any issues with any of the other pages.

    • uhm.. try to set the ZIndex property of the browser control.
      the flyout is just a standard Popup control – I have no clue what may cause this issue =/

      • Thanks but it still seems to go behind the control. I’ll try a few things I guess. This windows Certificate Tester of course caught it. :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>