locked
Flyouts from C#? RRS feed

  • Question

  • I've searched high and low for information on using flyouts from C# but have only found references to HTML/JavaScript.

     

    How are flyouts created/used from C#?

     

    Thanks,

    Jeff

    Monday, September 19, 2011 8:59 PM

Answers

  • The main functionality of a flyout is honoring the UI guidelines for something like that, primarily a light-dismiss model for the flyout, as well as it being contextually correct for the app.  If you look at my session on tips/tricks in XAML you'll see that I use a simple technique for the preview bits and a settings pane (which in apps is typically a flyout).  This involves, creating a usercontrol for my UI and either hiding it (and bringing it in using RepositionThemeTransitions to bring in the animations library effect), or adding it when needed.  The light dismiss model is covered by listening to the root visual layout and any PointerPressed event on that. 

    This is definitely an area we are looking to see how people would look at using Flyouts in XAML.  Additionally you could use this technique on a Popup control.


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer
    Wednesday, September 21, 2011 12:15 AM
  • C#/XAML does not have a flyout control.  This is something we'd like to see in the platform but did not have time to address by the Build release.  Do you need this for app settings or for something else?

    Joe

    • Marked as answer by JeffreyKey Monday, September 19, 2011 9:31 PM
    Monday, September 19, 2011 9:18 PM

All replies

  • C#/XAML does not have a flyout control.  This is something we'd like to see in the platform but did not have time to address by the Build release.  Do you need this for app settings or for something else?

    Joe

    • Marked as answer by JeffreyKey Monday, September 19, 2011 9:31 PM
    Monday, September 19, 2011 9:18 PM
  • Thanks for the quick reply, Joe.

     

    In this case, the user clicks a button and I'd like to prompt her for some additional information before starting a process. I only need one (maybe two) textboxes worth of information, so thought this would be appropriate. Very similar to the JS login flyout example.

     

    Jeff

    Monday, September 19, 2011 9:26 PM
  • What is a flyout ?  Can I see an example somewhere ?

     

     


    Marcheur extrême...
    Monday, September 19, 2011 9:32 PM
  • Here's the sample. It's also included in the Metro samples from BUILD. If you were at the conference, it's on your thumb drive; if not, you can find it somewhere on MSDN.

     

    Jeff

    Monday, September 19, 2011 9:37 PM
  • What is a flyout ?  Can I see an example somewhere ?

     

     


    Marcheur extrême...
    The sample full code is here: http://code.msdn.microsoft.com/windowsapps/Flyout-sample-33bbfe34
    • Edited by leo_mck Monday, September 19, 2011 9:45 PM
    Monday, September 19, 2011 9:44 PM
  • Jeff, did you ever find a control that works well for what you were doing? I need something similar and I don't want to break my UI style just to have a user login...
    Tuesday, September 20, 2011 2:07 AM
  • Jeff, did you ever find a control that works well for what you were doing? I need something similar and I don't want to break my UI style just to have a user login...

    I didn't.

     

    Joe, do you have any guidance for this scenario?

     

    Thanks,

    Jeff

    Tuesday, September 20, 2011 3:00 AM
  • You can create a flyout-like control by creating a hidden panel (Grid, Canvas, UserControl whatever is appropriate) with the flyout's information and animations to slide it fluidly into view.  When you want to show the flyout, set the panel visible and trigger the storyboard.

    --Rob

    Tuesday, September 20, 2011 11:29 PM
    Moderator
  • The main functionality of a flyout is honoring the UI guidelines for something like that, primarily a light-dismiss model for the flyout, as well as it being contextually correct for the app.  If you look at my session on tips/tricks in XAML you'll see that I use a simple technique for the preview bits and a settings pane (which in apps is typically a flyout).  This involves, creating a usercontrol for my UI and either hiding it (and bringing it in using RepositionThemeTransitions to bring in the animations library effect), or adding it when needed.  The light dismiss model is covered by listening to the root visual layout and any PointerPressed event on that. 

    This is definitely an area we are looking to see how people would look at using Flyouts in XAML.  Additionally you could use this technique on a Popup control.


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer
    Wednesday, September 21, 2011 12:15 AM
  • Thanks gents. Tim, I'll check out your session. Don't know how I missed it last week!

    Jeff

    Wednesday, September 21, 2011 1:53 AM
  • Thanks Tim! That was extremely helpful. Are you planning on posting the source code from the demos you showed on your blog?
    Wednesday, September 21, 2011 2:04 AM
  • Is there any plans for a native C#/XAML settings flyout? This seems like a pretty big omission to simply not have it and release.
    Thursday, July 5, 2012 10:46 PM
  • @JC - there will be an SDK sample on Popup (which is the equivalent).  There are also some 3rd party open source libraries that have this.  Essentially this is a Popup with IsLightDismissEnabled set to true.


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Thursday, July 5, 2012 11:02 PM
  • Jeff,

    Check out CharmFlyout which is a custom (style-able) control written in C#/XAML and is available on codeplex as source and nuget as binary, with a discussion here.  It looks very similar to the Permissions flyout.

    - John


    John Michael Hauck

    Monday, July 23, 2012 8:33 PM
  • Another C# FlyOut sample here
    Tuesday, December 25, 2012 10:03 AM