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

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