Erstellen eines Flyout für die Metropolis-UI

Nach oben zu Entwickeln von Metropolis-UI-Anwendungen

Ein Flyout im Metropolis-UI-Stil ist ein Popup-Fenster, das vorübergehend angezeigt wird. Ein Flyout wird durch Klicken auf eine beliebige Position außerhalb des Flyout geschlossen. In diesem Tutorial wird die Erstellung eines Flyout erklärt, das von rechts in den Bildschirm gleitet und eine Bestätigung zum Beenden anfordert.

Erstellen eines neuen FireMonkey-Projekts

1. Wählen Sie Datei > Neu > Weitere > <Personality>-Projekte > FireMonkey-Anwendung für Metropolis-UI, und wählen Sie die Vorlage Leere Desktop-Anwendung für Metropolis-UI, um eine neue FireMonkey-Anwendung für die Metropolis-UI zu erstellen.
2. Wählen Sie Datei > Alles speichern, um das neue Projekt zu speichern.

Entwerfen des Flyout

1. Fügen Sie dem Formular ein TPopup-Steuerelement hinzu, und setzen Sie es an die linke obere Formularecke (legen Sie im Objektinspektor die Positionseigenschaften (X,Y) auf Position=(0,0) fest).

2. Fügen Sie dem TPopup eine TPanel-Komponente hinzu.

• Setzen Sie die Eigenschaft Align von TPanel auf Contents.
• Setzen Sie die Eigenschaft StyleLookup von TPanel auf flyoutpanel.

3. Fügen Sie dem Bereich eine TLabel- und eine TLayout-Komponente hinzu.

• Setzen Sie die Eigenschaft Align von TLabel auf Left.
• Setzen Sie die Eigenschaft Align von TLayout auf Bottom.
• Setzen Sie die Eigenschaft StyleLookup von TLabel auf flyouttitlelabel.
• Geben Sie in die Eigenschaft Text der TLabel-Komponente Really close? oder einen anderen Text ein, der für die Schließen-Aktion geeignet ist.

4. Fügen Sie TLayout eine TButton-Komponente hinzu.

• Setzen Sie die Eigenschaft Align von TButton auf Client.
• Setzen Sie die Eigenschaft StyleLookup von TButton auf flyoutbutton.
• Geben Sie in die Eigenschaft Text der TButton-Komponente Yes oder einen anderen Text ein, der für die Schließen-Aktion geeignet ist.

5. Klicken Sie im Objektinspektor auf die Eigenschaft Position.X des TPopup-Steuerelements, und wählen Sie Neue FloatAnimation erstellen.

• Setzen Sie die Eigenschaft Trigger der hinzugefügten Animation auf IsOpen=true und die Eigenschaft TriggerInverse auf IsOpen=false.

Das Flyout sollte wie folgt aussehen:

Implementierung des Flyout-Codes

1. Doppelklicken Sie auf die Schaltfläche des Flyout, um eine OnClick-Ereignisbehandlungsroutine hinzuzufügen:

• Delphi:

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

• C++:

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

2. Deklarieren Sie eine private Methode für die Klasse TForm1, um das Flyout anzuzeigen:

• 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++:

• Fügen Sie den private-Deklarationen der .h-Datei die folgende Funktionsdeklaration hinzu:

private: 
   void ShowFlyout(bool AShow);

• Fügen Sie der .cpp-Datei die folgende Funktionsimplementierung hinzu:

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

Verwenden des Flyout

1. Fügen Sie dem Formular ein TButton-Objekt hinzu.

• Setzen Sie die Eigenschaft StyleLookup von TButton auf closebutton.
• Doppelklicken Sie auf die Schaltfläche, und fügen Sie eine OnClick-Ereignisbehandlungsroutine hinzu.

• Delphi:

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

• C++:

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

2. Fügen Sie dem Formular eine TLayout-Komponente hinzu. Die TLayout-Komponente wird als Dummy-Objekt zur Positionierung des Flyout bei der Anzeige verwendet.

• Setzen Sie die Eigenschaft Align von TLayout auf Center.

3. Setzen Sie die Eigenschaft PlacementTarget von TPopup auf das Dummy-Layout.

4. Führen Sie die Anwendung durch Drücken von F9 aus.

Siehe auch

• Erstellen einer Anwendungsleiste für die Metropolis-UI
• Erstellen von Kombinationsfeldern für die Metropolis-UI
• Erstellen von Kurzhinweisen für die Metropolis-UI
• Erstellen von Bearbeitungsschaltflächen mit eingebetteten Glyphen für die Metropolis-UI
• Erstellen von TMetropolisUIListBoxItem-Steuerelementen für die Metropolis-UI