C#

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 comments

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

  2. ishashah

    this is really awesome !! Thanks !

  3. Joe Luhman (@mnjoe)

    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

  4. thecake

    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?

  5. Thomas

    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?

    1. thecake

      That sounds strange – I’d like to have a look at this later today. Could you make a screenshot of this behaviour? Can you reproduce this issue in the simulator? (I don’t have a tablet yet..)
      Also stay tuned, there’ll be an update later today. Here’s a sneak preview: https://nuget.org/packages/TCD.Controls/ 😉

  6. Matt Small

    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.

  7. Thomas

    Tomorrow I’m working at home again on the app so I’ll try to post you a screenshot then.

    Keep up the good work!

  8. ruth

    Its Rally Helpful Thanks!!!cant we do this without using TCD.Controls package?

    1. thecake

      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.

  9. ruth

    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.

  10. YuYu

    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.

    1. thecake

      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^

      1. Sunny

        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 ?

  11. zakkar

    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

    1. thecake

      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^

  12. zakkar

    Thank you very much .I’m OK now.

  13. zakkar

    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

    1. thecake

      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 🙂

  14. zakkar

    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

  15. seetharam

    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

    1. thecake

      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);

  16. Richard

    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.

    1. thecake

      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 =/

      1. Rich

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

  17. Lieve

    Hi,

    Can I create a settings entry that directly navigate to a view without flyout the settingspane?

    Thanks

    1. thecake

      Not with the SettingsContractWrapper – a TCD.Controls.Settings.SettingsEntry is always associated with a Flyout.

      But you can use the ‘standard’ way to add an entry to the settings charm and attach a delegate event handler to it. Take a look at the code in this thread: http://stackoverflow.com/questions/10557601/add-dropdown-to-settings-charm-in-windows-8-metro-c

  18. shivam

    is there any other way from which i can create left flyout if available then please let me know .

    1. thecake

      Not with my Flyout control, but there is a native Flyout control available in Windows 8.1.

Leave a Reply to thecake Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.