Flyout

Tim Heuer edited this page Oct 25, 2013 · 5 revisions

Flyout (Obsolete)

DEPRECATED

This control is deprecated in favor of using the Windows.UI.Xaml.Controls.Flyout control in Windows 8.1. Visit Callisto Migration Tips for specific information.

What it is

Flyout is a general purpose concept/control to give you a content control for the 'popup' behavior including light dismiss and positioning in accordance with Windows UI guidelines.

This control is likely primarily going to be used from some type of event handler from an AppBar button to accept input. It is not meant to be a message dialog of any sorts.

Usage

Declarative:

At present time, Flyout does not work well declaratively

Code (example from a button click from AppBar):

private void ShowFlyoutMenu2(object sender, RoutedEventArgs e)
{
    // create the Flyout
    Flyout f = new Flyout();

    // creating some content
    // this could be just an instance of a UserControl of course
    Border b = new Border();
    b.Width = 300;
    b.Height = 125;

    TextBlock tb = new TextBlock();
    tb.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
    tb.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
    tb.TextWrapping = TextWrapping.Wrap;
    tb.FontSize = 24.667;
    tb.Text = "This is a basic ContentControl so put anything you want in here.";

    b.Child = tb;

    // set the Flyout content
    f.Content = b;

    // set the placement
    f.Placement = (PlacementMode)Enum.Parse(typeof(PlacementMode), positioning.SelectionBoxItem.ToString());
    f.PlacementTarget = sender as UIElement;
    
    // open the flyout
    f.IsOpen = true;
}

Code (sample using parenting to visual tree):

private void ShowFlyoutMenu3(object sender, RoutedEventArgs e)
{
    Flyout f = new Flyout();

    f.Margin = new Thickness(20, 12, 20, 12);
    
    // SampleInput is a user control with a TextBox in it
    f.Content = new SampleInput(); 
    
    f.Placement = PlacementMode.Top;
    f.PlacementTarget = sender as UIElement;

    var parentGrid = ((FrameworkElement)this.Parent).FindName("FrameLayoutRoot") as Grid;

    parentGrid.Children.Add(f.HostPopup);

    f.Closed += (b, c) =>
    {
        parentGrid.Children.Remove(f.HostPopup);
    };

    f.IsOpen = true;
}

Example UI

Flyout with Input from Callisto

Using with content that gathers input

If you are using the Flyout with a UserControl that perhaps would gather input, you need to take account the fact that the input host manager (IHM) or 'soft keyboard' will show up in touch situations. An un-parented Flyout control will not automatically scroll into view when the soft keyboard shows up. This means that if you have input on the bottom AppBar as an example, your input would be hidden because the soft keyboard will likely cover it.

This is solvable by adding the Flyout to the view. You must now, however, manage the removal of it so you don't get a leak. Here is a pseudo example

using Callisto.Controls;

Flyout f = new Flyout();

// other stuff here

LayoutRoot.Children.Add(f.HostPopup); // add this to some existing control in your view like the root visual

// remove the parenting during the Closed event on the Flyout
f.Closed += (s,a) =>
	{
		LayoutRoot.Children.Remove(f.HostPopup);
	};

This should prevent a leak of the object when it is dismissed.

Commands and Clicks

When using just the Flyout, you own the Content within it. When using the Menu and MenuItem you can attach an event to the Tapped event in MenuItem or also by providing a command that has implemented ICommand in your code.

Known Issues

  • Does not work well declaratively
  • If you do not parent the Flyout to something in the visual tree and it has input (e.g., TextBox) then the software keyboard may occlude the input area as it won't scroll into view.