sgcUI Fluent: der Windows-11-Look für jedes Steuerelement, in einer Zeile

Ihre Anwender leben den ganzen Tag in Windows 11. Die abgerundeten Ecken, die ruhigen Rahmen, die geschichteten Oberflächen und die Akzentfarbe sind zum Erscheinungsbild einer modernen Desktop-Anwendung geworden. Ab sgcUI 2026.11 können Ihre Delphi- und C++ Builder-Anwendungen genau so aussehen, ohne dass Sie ein einziges Formular anfassen müssen.

Das neue Themenpreset Fluent gestaltet alle sgcUI-Produkte auf einmal neu. Es ist ein echtes Designsystem und kein bloßer Farbtausch: Ein Theme definiert jetzt auch den Eckenradius jeder Elementart, die Strichstärken sowie die Farben für Hover, gedrückt, ausgewählt und deaktiviert, und jedes Produkt liest sie aus dem aktiven Preset.

Fluent in 60 Sekunden

Von Classic zu Fluent, von Hell zu Dunkel, und die ganze Suite in einer Minute. Auch auf YouTube.

Eine Zeile schaltet die ganze Suite um

Rufen Sie sie einmal beim Start auf, bevor das Hauptformular angezeigt wird, und jedes sgcUI-Steuerelement der Anwendung wird im Fluent-Look gezeichnet. Rufen Sie sie zur Laufzeit erneut auf, und jedes sichtbare Steuerelement wird sofort neu gezeichnet.

uses
  sgcUICore_Theme;

// every sgcUI control of the application takes the Windows 11 look
sgcUISetApplicationThemePreset('Fluent');

Classic bleibt die Vorgabe. In einer bestehenden Anwendung ändert sich nichts, bis Sie sich dafür entscheiden. So können Sie sgcUI heute aktualisieren und auf Fluent umstellen, wenn es Ihnen passt.

Was Fluent verändert

Aus der Nähe

Der Unterschied liegt in den Details. Hier sehen Sie das Kanban-Board aus dem Screenshot oben in doppelter Größe. Ziehen Sie den Regler und achten Sie auf die Spalten, die Karten, die Tag-Chips und den Text.

Hell, Dunkel und hoher Kontrast

Fluent liefert eine helle und eine dunkle Variante, und der hohe Kontrast behält die Fluent-Formen mit den Farben des Windows-Schemas für hohen Kontrast. Ihre Anwendung kann der Einstellung Hell oder Dunkel von Windows live folgen: Wenn der Anwender den Schalter in Windows umlegt, wird jedes sgcUI-Steuerelement ohne Neustart neu gezeichnet.

uses
  sgcUICore_Theme;

sgcUISetApplicationThemePreset('Fluent');
// follow the light / dark setting of Windows, live, and theme the forms too
sgcUISetApplicationThemeFollow(utfSystem, True);

// optional: your brand colour instead of the Windows accent
sgcUISetApplicationAccentColor($FFE2571E);

Dem System zu folgen ist standardmäßig ausgeschaltet. Fluent übernimmt die Windows-Akzentfarbe, und eine von der Anwendung gesetzte Akzentfarbe hat immer Vorrang.

Ein echtes Windows-11-Fenster

Die Steuerelemente sind nur die halbe Wahrheit. Solange Fluent oder das Folgen des Systems aktiv ist, gibt sgcUIApplyThemeToForm VCL- und FireMonkey-Formularen im dunklen Modus außerdem eine dunkle Titelleiste und die abgerundeten Fensterecken von Windows 11. Sie können den Rahmen jedes Formulars auch direkt festlegen.

uses
  sgcUICore_Theme, sgcUICore_Theme_VCL;

// dark title bar and Windows 11 rounded corners for this form
sgcUIApplyWindowFrameVCL(Self, utDefault);

FireMonkey-Formulare verwenden sgcUIApplyWindowFrameFMX aus sgcUICore_Theme_FMX.

Jedes Produkt, ein Look

Jedes der 14 sgcUI-Produkte bezieht seine Eckenradien, Rahmenbreiten und Zustandsfarben aus dem Preset, sodass der Fluent-Look die gesamte Suite erreicht: die Navigationsleiste und das Ribbon, den Assistenten-Stepper, das Pivot-Grid mit seiner Feldliste, den Scheduler und das Gantt-Diagramm. Der PDF-Viewer zieht mit der neuen Eigenschaft UseUITheme mit, die Karten mit ihrer neuen Eigenschaft Theme, sodass auch Zoom-Schaltflächen, Kompass, Maßstabsleiste und Popups dem Theme folgen.

Sie verwenden bereits VCL Styles?

Behalten Sie sie. Mit dem neuen Host-Follow übernehmen die sgcUI-Steuerelemente ihre Farben vom aktiven VCL Style (Delphi XE2 und neuer), während Fluent weiterhin die Formen liefert. Ändern Sie den Style zur Laufzeit, und die sgcUI-Steuerelemente folgen.

uses
  Vcl.Themes, sgcUICore_Theme, sgcUICore_Theme_VCL;

TStyleManager.TrySetStyle('Amakrits');
sgcUISetApplicationThemePreset('Fluent');
// colours from the active VCL style, shapes from Fluent
sgcUISetApplicationThemeFollow(utfHost, True);

Machen Sie es zu Ihrem

Fluent und Classic sind zwei Presets, nicht die einzigen beiden. Gehen Sie von der Fluent-Definition aus, ändern Sie, was Ihre Marke braucht, und registrieren Sie sie unter Ihrem eigenen Namen. Jedes Produkt übernimmt sie auf dieselbe Weise.

uses
  sgcUICore_Theme;

var
  vLight, vDark: TsgcUIThemeDef;
begin
  // start from Fluent and make the cards and tiles rounder
  vLight := sgcUIFluentThemeDef(False);
  vDark := sgcUIFluentThemeDef(True);
  vLight.RadiusMedium := 12;
  vDark.RadiusMedium := 12;
  vLight.RadiusLarge := 16;
  vDark.RadiusLarge := 16;
  sgcUIRegisterThemePreset('Rounded', vLight, vDark);
  sgcUISetApplicationThemePreset('Rounded');
end;

Auch die Anwendungsschrift hat Vorrang vor dem Preset: Legen Sie Ihre eigene mit sgcUISetDefaultFontName oder sgcUISetDefaultFontFiles fest, und Fluent behält alles andere bei.

Selbst ausprobieren: die Theme-Gallery-Demo

Die neue Theme-Gallery-Demo für VCL, FireMonkey und C++ Builder stellt Classic und Fluent in Hell, Dunkel und hohem Kontrast nebeneinander, auf den Seiten Overview, Document, Map und Controls. Sie bietet eine Host-Follow-Option und eine VCL-Style-Auswahl und kann von jeder Kombination einen Screenshot speichern. Jeder Screenshot in diesem Artikel wurde damit aufgenommen.

Fragen oder Feedback? Nehmen Sie Kontakt auf, Sie erhalten eine Antwort von den Leuten, die den Code geschrieben haben.