Tips and tricks for C# metro developers–The Flyout control

Tips and tricks for C# metro developers–The Flyout control

David Catuhe

3 Jul 2012 5:32 AM

Comments 4

This article starts a new series about small (but I hope useful) tips that can help you during your development phase.

Today I will talk about how you can create a flyout control.

A flyout control is a popup control you can make appear when you click on a button.

I used this control for WorldMonger (a game I currently working on):

The code to create this control is as follows:

public static Popup ShowPopup(FrameworkElement source, UserControl control)
{
    Popup flyout = new Popup();

    var windowBounds = Window.Current.Bounds;
    var rootVisual = Window.Current.Content;

    GeneralTransform gt = source.TransformToVisual(rootVisual);

    var absolutePosition = gt.TransformPoint(new Point(0, 0));

    control.Measure(new Size(Double.PositiveInfinity, double.PositiveInfinity));

    flyout.VerticalOffset = absolutePosition.Y  - control.Height - 10;
    flyout.HorizontalOffset = (absolutePosition.X + source.ActualWidth / 2) - control.Width / 2;
    flyout.IsLightDismissEnabled = true;

    flyout.Child = control;
    var transitions = new TransitionCollection();
    transitions.Add(new PopupThemeTransition() { FromHorizontalOffset = 0, FromVerticalOffset = 100 });
    flyout.ChildTransitions = transitions;
    flyout.IsOpen = true;

    return flyout;
}

This helper method just takes a source FrameworkElement (to detect where the flyout must pop up) and a UserControl control to display.

Please note the usage of the PopupThemeTransition to obtain and fluid and cool animation Sourire

XAML, Windows 8

Leave a Comment

Name
Comment
Please add 6 and 7 and type the answer here:
Post

Comments

ArchieCoder

4 Aug 2012 9:05 PM

Hi,

How do you create the UserControl? I do it in code, but your code throws an exception because the control has an infinite height.

I do not want to set a specific height when creating the control because I want it to be calculated automatically.

Any idea?

Thank you

ArchieCoder
Tomas

29 Oct 2012 3:50 PM

Archie,

This might be a little late.

But have you considered using the loaded event of the control (it might even work if you use the popup's loaded event).

Once this event has been loaded, you can get it's ActualHeight and ActualWidth to figure out the size the popup should have and re-position it.

Cheers,

Tomas
anon

31 Oct 2012 9:41 AM

When does the PopupThemeTransition run? The documentation says "Provides the animated transition behavior that applies to pop-in components of controls (for example, tooltip-like UI on an object) as they appear" which is NOT helpful. With Theme transitions, there are two things that would be great to know: what they do and when they run. But the documentation does not explain either of these things. If you know, please let us devs know too, thanks! (If you want to let the documentation writers know too, that would be excellent!). Thank you.
David Catuhe

4 Nov 2012 11:56 PM

The PopupThemeTransition will run when the flyout will be displayed (flyout.isopen=true)