Creating a Metropolis UI Flyout

Go Up to Developing Metropolis UI Applications

A Metropolis UI style flyout is a temporarily-displayed, lightweight, pop-up window. 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. Select File > New > Other > <personality> Projects > FireMonkey Metropolis UI Application and select the Blank Metropolis UI Desktop Application template to create a new FireMonkey Metropolis UI application.
2. Select File > Save All to save your new project.

Design the Flyout

1. Add a TPopup to the form and position it in the top left corner of the form (In the Object Inspector set its position properties (X,Y) to Position=(0,0)).

2. Add a TPanel to the TPopup.

• Set the Align property of the panel to Contents.
• 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 Left.
• Set the Align property of the layout to Bottom.
• Set the StyleLookup property of the label to flyouttitlelabel.
• Set the Text property of the label 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 Client.
• 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 approving the exit action.

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

• Set the Trigger property of the added animation to IsOpen=true and the 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:

• Delphi:

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

• C++:

void __fastcall TForm1::Button1Click(TObject *Sender) {
   Application->Terminate();
}

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

• Delphi:

//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;

• C++:

• Add the following function declaration to the private: declarations of the .h file:

private: 
   void ShowFlyout(bool AShow);

• Add the following function implementation to the .cpp file:

void TForm1::ShowFlyout(bool AShow) {
   FloatAnimation1->StartValue = ClientWidth;
   FloatAnimation1->StopValue = (Width / 2 - (Popup1->Width / 2));
   Popup1->IsOpen = AShow;
}

Using the Flyout

1. Add a TButton object to the form.

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

• Delphi:

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

• C++:

void __fastcall TForm1::Button2Click(TObject *Sender)
{
        ShowFlyout(true);
}

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

• Set the Align property of the layout to Center.

3. Set the PlacementTarget property of the TPopup to the dummy layout.

4. Run the application by pressing F9.

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