Creating a Metropolis UI Flyout

Go Up to Developing Metropolis UI Applications

A Metropolis UI style flyout is a lightweight pop-up window temporarily displayed. A flyout is dismissed by clicking outside its area. This tutorial explains how to build a flyout that enters the scene from the right side of the screen, and asks for exit confirmation.

Create a new FireMonkey project:

1. Go to File > New > FireMonkey Metropolis UI Desktop Application - Delphi > Blank Metropolis UI Desktop Application.
2. Save the project.

Design the Flyout

1. Add a TPopup to the form and position it to the top left corner of the form, so that its Position=(0,0).

2. Add a TPanel to the TPopup.

• Set the Align property of the panel to alContents.
• Set the StyleLookup property of the panel to flyoutpanel.

3. Add a TLabel and a TLayout to the panel.

• Set the Align property of the label to alLeft.
• Set the Align property of the layout to alBottom.
• Set the StyleLookup property of the panel to flyouttitlelabel.
• Set the Text property of the panel to Really close? or other text that you consider suggestive for the exit action.

4. Add a TButton to the layout.

• Set the Align property of the button to alClient.
• Set the StyleLookup property of the button to flyoutbutton.
• Set the Text property of the button to Yes or other text that you consider suggestive for confirming the exit action.

5. In the Object Inspector, click the Left property of the TPopup, and choose Create New FloatAnimation.

• Set the Trigger property of the animation to IsOpen=true, and set its TriggerInverse property to IsOpen=false.

The flyout should look like this:

Flyout Code Implementation

1. Double-click the flyout's button to attach an OnClick event handler to it.

procedure TForm1.Button1Click(Sender: TObject);
begin
   Application.Terminate;
end;

2. Declare a private method to the TForm1 class to make the flyout visible.

//Declaration
private
procedure ShowFlyout(AShow: Boolean);
 
//Implementation
procedure TForm1.ShowFlyout(AShow: Boolean);
begin
  FloatAnimation1.StartValue := ClientWidth;
  FloatAnimation1.StopValue :=
    Width/2 - Popup1.Width/2;
  Popup1.IsOpen := AShow;
end;

Using the Flyout

1. Add a TButton object to the form.

• Set the StyleLookup property of the button to closebutton.
• Double-click the button to attach an OnClick event handler to it.

procedure TForm1.Button2Click(Sender: TObject);
begin
   ShowFlyout(True);
end;

2. Add a TLayout to the form. The TLayout is used as a dummy object to position the flyout when it is displayed.

• Set the Align property of the layout to alCenter.
• Set the PlacementTarget property of the flyout to be the dummy layout.

3. Run the application by pressing F9.

Flyout Sample

A Metropolis UI flyout is created and demonstrated in the FireMonkey MetropolisUIFlyoutDemo application sample. This sample is available in the installed product at:

C:\Users\Public\Documents\RAD Studio\10.0\Samples\FireMonkey

See Also

• Creating a Metropolis UI Application Bar
• Creating a Metropolis UI ComboBox
• Creating a Metropolis UI ToolTip
• Creating Metropolis UI Edit Buttons with Embedded Glyphs
• Creating a Metropolis UI TMetropolisUIListBoxItem
• MetroToolTip Sample