Vorlagen für Metropolis-UI-Anwendungen

Nach oben zu Entwickeln von Metropolis-UI-Anwendungen

In diesem Thema werden die drei Vorlagen für Anwendungen oder Formulare für die Metropolis-UI in RAD Studio beschrieben. Das Thema enthält die Implementierungsdetails für die beiden Frameworks FireMonkey und VCL. Der Hauptunterschied zwischen den beiden Frameworks besteht darin, dass FireMonkey neue Steuerelemente für die Metropolis-UI (wie TMetropolisUIListBoxItem) implementiert, während die VCL die vorhandenen mit Stilen für Windows 8 versehenen Windows-Steuerelemente verwendet.

Die folgenden Vorlagen können Sie in den Metropolis-UI-Experten auswählen:

• Leere Metropolis-UI-Vorlage
• Metropolis-UI-Rastervorlage
• Metropolis-UI-Vorlage mit Teilbereich

Metropolis-UI-Vorlagen sind Windows-spezifisch

Metropolis-UI-Vorlagen für die Layouts Raster und Teilbereich wurden speziell für Windows 8 entwickelt, können aber auch für Windows 7, Vista und XP eingesetzt werden. Die Vorlagen entsprechen allgemeinen Anwendungen in Windows 8.

Die Verwendung von Metropolis-UI-Vorlagen auf dem Mac wird nicht empfohlen, weil die Vorlagendesigns spezifisch für Windows 8 sind und nicht für eine allgemeine UI oder für die Mac-Benutzern vertraute Oberfläche entwickelt wurden. Sie können aber den Metropolis-UI-Stil aus einer Anwendung entfernen und die Anwendung dann auf dem Mac bereitstellen.

Allgemeine von allen Metropolis-UI-Vorlagen verwendete Eigenschaften

Die Metropolis-UI-Vorlagen verfügen über gleiche Eigenschaften, die charakteristisch für das Aussehen und Verhalten der Metropolis-UI sind, wie etwa die folgenden:

• Vollbildmodus: Die Formulare der Metropolis-UI werden automatisch im auf die volle Bildschirmhöhe ohne Nicht-Client-Bereich gesetzt, sodass Ihre Anwendung wirklich im Vollbildmodus ausgeführt wird:
  • WindowState ist auf wsMaximized gesetzt.
  • BorderStyle ist auf None gesetzt.
  • GlassFrame-Eigenschaften sind nicht festgelegt.

Merkmale der FireMonkey-Vorlagen

• AppBar: Die Fenster mit der Rastervorlage und der Vorlage mit Teilbereich verfügen über eine Popup-Symbolleiste (AppBar für Metropolis-UI), die durch eine Streifgeste vom unteren Bildschirmrand aufgerufen wird.

Die AppBar besteht aus einem ToolbarHolder-Layout, mit dem Gestenereignisse abgefangen werden, und einem untergeordneten TPopup, das die Symbolleiste enthält. ToolbarPopupAnimation wird automatisch ausgelöst, wenn das Popup angezeigt und verborgen wird, und der Code zum Aufrufen des Popup (*Form.ShowToolbar) berechnet den Startwert der Popup-Position auf Basis der Fensterabmessungen.

• TListBox mit TMetropolisUIListBoxItem: Sowohl die Rastervorlage als auch die Vorlage mit dem Teilbereich verwenden TListBox-Steuerelemente mit TMetropolisUIListBoxItem, einem neuen Steuerelement der FireMonkey-Metropolis-UI.

• In den Metropolis-UI-Formularen verwenden FireMonkey-Steuerelemente die Eigenschaften Align und Padding, um den gesamten verfügbaren Bildschirmplatz zu belegen.

• Der FireMonkey-Stil ist Bestandteil eines Metropolis-UI-Formulars, das ein StyleBook mit dem spezifischen Metropolis-UI-Stil enthält.

• StyleLookup: Bei FireMonkey-Steuerelementen aktiviert die Eigenschaft StyleLookup das einfache Steuerelement (wie TButton), um es in ein Metropolis-UI-Steuerelement umzuwandeln, z.B. in TPasswordEditButton. Weitere Informationen finden Sie unter StyleLookup-Unterstützung für Metropolis-UI-Steuerelemente und Anwenden von FireMonkey-Stilen.

Merkmale der VCL-Vorlagen

• AppBar: Die berührungsaktivierte AppBar ist als TLabel implementiert und befindet sich am unteren Rand des Formulars genau über der horizontalen Bildlaufleiste. Wenn Sie vom unteren Rand des Formulars eine Streifbewegung ausführen, wird die AppBar angezeigt; die Vorlage enthält eine Schließen-Schaltfläche im Windows 8-Stil.
• Horizontale Bildlaufleiste: Am unteren Rand des Formulars befindet sich eine TScrollBox, deren Eigenschaft HorzScrollBar auf TControlScrollBar gesetzt ist.
• Virtuelle Tastatur: Die .dpr-Datei enthält Code zur automatischen Anzeige der Bildschirmtastatur für Komponenten, für die Benutzereingaben erforderlich sind, wenn keine physische Tastatur verbunden ist:

Delphi:

Application.UseMetropolisUI;

C++:

Application->UseMetropolisUI();

Leere Metropolis-UI-Vorlage

Die Vorlagen Leere Metropolis-UI enthalten kein vordefiniertes Layout, und daher können Sie sie als leere Zeichenfläche behandeln. Zur Laufzeit können Sie eine Streifbewegung auf dem angezeigten Formular (mit den Fingern oder der Maus) ausführen, um zu einem anderen Formular zu wechseln.

• Das Formular enthält keine Komponenten (nur die AppBar).
• Der Standardstil der Anwendung ist MetroDark.
• Bei der leeren VCL-Vorlage ist die horizontale Bildlaufleiste (die das Formular umgibt) auf Visible=True gesetzt.

Hinweis: Wenn Sie eine leere Metropolis-UI-Anwendung in der IDE im Vollbildmodus ausführen, können Sie die Anwendung durch Drücken von Alt+F4 schließen.

Metropolis-UI-Rastervorlage

Die Rasteranwendung enthält verschiedene Gruppen von Einträgen. Jede Gruppe öffnet eine DetailView-Seite.

FireMonkey-Rastervorlage

GridView:	DetailView:

Wichtige Komponenten der FireMonkey-Rastervorlage:

Das Scrollen kann über eine Bildlaufleiste erfolgen, wenn MouseTracking=True ist, können die Inhalte mit der linken Maustaste gezogen werden.

• Aktiviert für Berührungen und Gesten; GestureManager wird verwendet, auch alle Standardgesten können verwendet werden.
• TLayout wird für die Kopfzeile, den Haupt-Frame und die Fußzeile verwendet.
• Horizontales Bildlauffeld (THorzScrollBox), das wie ein horizontal ausgerichtetes TVertScrollBox-Steuerelement arbeitet, enthält alle Steuerelemente und wird zur Laufzeit zum Blättern durch die Anwendung verwendet. Die Abmessungen von THorzScrollBox werden als Vereinigungsrechteck von allen enthaltenen Steuerelementen berechnet.
• TMetropolisUIListBoxItem enthält einen Titel und einen Untertitel (beschreibender Text).
• Schaltflächen im Metro-Stil (Speichern, Anwenden, Schließen)

VCL-Rastervorlage

Die folgenden Abbildungen zeigen VCL-Laufzeitformulare für die Rastervorlage der Metropolis-UI (VCL-Stile werden nicht beim Entwurf verwendet):

Die Vorlage VCL-Metropolis-UI-Raster ist eine VCL-Formularanwendung, die aus zwei Formularen besteht:

• groupedItems

  Das Hauptformular, groupedItems.pas, zeigt die Gruppen der Einträge mit Bildern, einem Titel und Untertitel an. Das groupedItems-Formular-Layout wird mit TFlowPanel implementiert und kann gescrollt werden (nach links und rechts). Durch Klicken auf ein Bild wird das ItemDetail-Formular angezeigt.

• ItemDetail

  Zeigt das Bild, den Titel und einen Detailbereich mit Text an. Der gesamte Detailbereich kann gescrollt werden (nach links und rechts). Der Detailbereich wird mit schreibgeschützten TMemo-Komponenten implementiert.

Hauptmerkmale der Vorlage VCL-Metropolis-UI-Raster:

• Der Standardstil der Anwendung ist MetropolisUIDark (der Stil wird für die VCL nur zur Laufzeit verwendet).
• Durch Klicken auf ein Bild in groupedItems wird das itemDetail-Formular angezeigt.
• Der Detailbereich im Formular itemDetail kann gescrollt werden (nach links und rechts).
• Durch Streifen vom unteren Rand des Formulars nach oben wird eine AppBar eingeblendet. (Weitere Informationen über AppBars finden Sie unter Erstellen einer Anwendungsleiste für die Metropolis-UI.)

Metropolis-UI-Vorlage mit Teilbereich

Die Teilbereichsanwendung enthält die gleiche GridView-Komponente wie die Rasteranwendung, aber mit weniger Einträgen. Jeder Eintrag öffnet eine SplitPaneView-Ansicht, die links eine Liste der Einträge und rechts eine DetailView-Ansicht enthält.

FireMonkey-Vorlage mit Teilbereich

GridPaneView:	SplitPaneView:

Wichtige Komponenten der FireMonkey-Vorlage mit Teilbereich:

• Eine Kopfzeile, die den Titel und optionale Schaltflächen enthält: eine TLayout-Komponente mit einer TLabel-Komponente
• TImageControl für Grafiken
• TLayout mit TLabels zur Anzeige von Informationen
• TLabels zur Anzeige
• Fußzeile mit Schaltflächen:
  • TToolBar mit Schaltflächen
  • TLayout mit Schaltflächen im Metro-Stil

VCL-Vorlage mit Teilbereich

Die folgenden Abbildungen zeigen VCL-Laufzeitformulare für die Teilbereichsvorlage (VCL-Stile werden nicht beim Entwurf verwendet):

GroupedItems-Bereich:

ItemDetail-Bereich:

Die Vorlage VCL-Metro mit Teilbereich ist eine VCL-Formularanwendung, die aus zwei Formularen besteht:

• groupedItems

  Das Hauptformular ist groupedItems.pas. Dieses Formular zeigt die Eintragsgruppen, Bilder und einen Titel und Untertitel für die Gruppe an. Der Eintragsbereich kann gescrollt werden (nach links und rechts). Durch Klicken auf ein Bild wird das splitItemDetail-Formular angezeigt.

• splitItemDetail.

  Zeigt mithilfe von zwei TScrollBox-Elementen eine geteilte Ansicht an.

• Die TScrollBox auf der linken Seite simuliert das Aussehen einer Listenansicht mit Bildern und Text. Dies erfolgt mit einem TGridPanel. Durch Klicken auf ein Bild, einen Titel, einen Untertitel oder eine Beschreibung auf der linken Seite werden die Titel- und Untertitelbeschriftungen im Detailbereich auf der rechten Seite aktualisiert.
• Der Detailbereich auf der rechten Seite ist eine TScrollBox mit einer TImage- und einer schreibgeschützten TMemo-Komponente für die Anzeige von Informationen. Der Detailbereich rechts kann gescrollt werden (nach oben und unten).

Hauptmerkmale der Vorlage Metropolis-UI mit Teilbereich:

• Der Standardstil der Anwendung ist MetropolisUIDark.
• Das groupedItems-Formular-Layout ist mit TFlowPanel implementiert und kann gescrollt werden (nach links und rechts).
• Durch Klicken auf ein Bild in groupedItems wird das splitItemDetail-Formular angezeigt, und der Laufzeit-Titel wird vom Ursprungsbild im groupedItems-Bereich abgeleitet.
• Die Listenansicht auf der linken Seite in splitItemDetail ist mit TGridPane-Komponenten implementiert.
• Der Detailbereich rechts im splitItemDetail-Formular kann gescrollt werden (nach oben und unten).

Siehe auch

• Experten für Metropolis-UI-Anwendungen:
  • FireMonkey-Anwendung für Metropolis-UI
  • VCL-Anwendung für Metropolis-UI
• Schriftarten für die Metropolis-UI
• Anwenden von FireMonkey-Stilen