Using a Windows 10 UWP Flyout control with other types of controls than a Button

In Windows 10 UWP (Universal) applications, there's a neat control called a Flyout. A flyout is similar to a popup window, but it can easily be dismissed by simply clicking (or touching) outside its area. Furthermore, it is great for informative windows, where you want to display extra information, but want to keep things light.

Now, a flyout is designed to work with a button control automatically. However, you can attach a flyout to any FrameworkElement. I'm currently working on a dashboard-like UWP application, and I wanted to draw the classic traffic lights, based on three ellipse controls. When one of the lights clicked, I wanted to display a flyout on the screen.

You cannot simply add a "Ellipse.Flyout" inside the ellipse (like you can for a button), you can use the "FlyoutBase.AttachedFlyout" attached property. You can add this inside an ellipse (or other control), and then show the flyout from code (it cannot pop up automatically with other controls).

Here's an example:

private void mEllipse_Tapped(object sender,
    Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
    // get the ellipse object the user tapped
    Ellipse ellipse = (Ellipse)e.OriginalSource;
    FlyoutBase.ShowAttachedFlyout(ellipse);
}

Here, I'm getting the tapped ellipse control through the event parameters, and then calling the FlyoutBase.ShowAttachedFlyout method to show the flyout. Pretty simple indeed.

Hope this helps!