sgcUI Fluent: wygląd Windows 11 dla każdej kontrolki, w jednej linii

Twoi użytkownicy spędzają cały dzień w Windows 11. Jego zaokrąglone rogi, stonowane obramowania, warstwowe powierzchnie i kolor akcentu stały się wzorcem nowoczesnej aplikacji desktopowej. Począwszy od sgcUI 2026.11, Twoje aplikacje Delphi i C++ Builder mogą wyglądać dokładnie tak, bez dotykania choćby jednego formularza.

Nowy preset motywu Fluent zmienia wygląd wszystkich produktów sgcUI naraz. To prawdziwy system projektowy, a nie zwykła zamiana kolorów: motyw definiuje teraz także promień zaokrąglenia każdego rodzaju elementu, grubości linii oraz kolory stanów najechania, wciśnięcia, zaznaczenia i wyłączenia, a każdy produkt odczytuje je z aktywnego presetu.

Fluent w 60 sekund

Od Classic do Fluent, od jasnego do ciemnego, a do tego cały pakiet w jedną minutę. Również w serwisie YouTube.

Jedna linia przełącza cały pakiet

Wywołaj ją raz przy starcie, przed wyświetleniem formularza głównego, a każda kontrolka sgcUI w aplikacji zostanie narysowana w stylu Fluent. Wywołaj ją ponownie w czasie działania, a każda widoczna kontrolka odświeży się natychmiast.

uses
  sgcUICore_Theme;

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

Classic pozostaje domyślny. W istniejącej aplikacji nic się nie zmienia, dopóki sam tego nie włączysz, więc możesz zaktualizować sgcUI już dziś i przejść na Fluent, kiedy Ci to odpowiada.

Co zmienia Fluent

Z bliska

Różnica tkwi w szczegółach. Oto tablica Kanban ze zrzutu ekranu powyżej w podwójnym rozmiarze. Przeciągnij uchwyt i przyjrzyj się kolumnom, kartom, znacznikom i tekstowi.

Jasny, ciemny i wysoki kontrast

Fluent zawiera wariant jasny i ciemny, a wysoki kontrast zachowuje kształty Fluent z kolorami schematu wysokiego kontrastu Windows. Twoja aplikacja może podążać za jasnym lub ciemnym ustawieniem Windows na żywo: gdy użytkownik przełączy tryb w Windows, każda kontrolka sgcUI odświeża się bez restartu.

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

Podążanie za systemem jest domyślnie wyłączone. Fluent przejmuje kolor akcentu Windows, a kolor akcentu ustawiony przez aplikację zawsze ma pierwszeństwo.

Prawdziwe okno Windows 11

Kontrolki to tylko połowa obrazu. Gdy aktywny jest Fluent lub podążanie za systemem, sgcUIApplyThemeToForm nadaje też formularzom VCL i FireMonkey ciemny pasek tytułu w trybie ciemnym oraz zaokrąglone rogi okien Windows 11. Ramkę dowolnego formularza możesz też ustawić bezpośrednio.

uses
  sgcUICore_Theme, sgcUICore_Theme_VCL;

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

Formularze FireMonkey używają sgcUIApplyWindowFrameFMX z sgcUICore_Theme_FMX.

Każdy produkt, jeden wygląd

Każdy z 14 produktów sgcUI pobiera promienie zaokrągleń, szerokości ramek i kolory stanów z presetu, dzięki czemu wygląd Fluent obejmuje cały pakiet: pasek nawigacji i wstążkę, pasek kroków kreatora, siatkę przestawną wraz z listą pól, harmonogram i wykres Gantta. Przeglądarka PDF dołącza dzięki nowej właściwości UseUITheme, a mapy dzięki nowej właściwości Theme, więc przyciski powiększenia, kompas, skala i okna podręczne także podążają za motywem.

Już używasz stylów VCL?

Zachowaj je. Dzięki nowemu podążaniu za hostem kontrolki sgcUI pobierają kolory z aktywnego stylu VCL (Delphi XE2 i nowsze), a Fluent nadal dostarcza kształty. Zmień styl w czasie działania, a kontrolki sgcUI za nim podążą.

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

Dopasuj do siebie

Fluent i Classic to dwa presety, ale nie jedyne. Zacznij od definicji Fluent, zmień to, czego potrzebuje Twoja marka, i zarejestruj ją pod własną nazwą. Każdy produkt przejmuje ją w ten sam sposób.

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;

Czcionka aplikacji również ma pierwszeństwo przed presetem: ustaw własną za pomocą sgcUISetDefaultFontName lub sgcUISetDefaultFontFiles, a Fluent zachowa wszystko pozostałe.

Zobacz sam: demo Theme Gallery

Nowe demo Theme Gallery, dla VCL, FireMonkey i C++ Builder, zestawia Classic i Fluent obok siebie w trybie jasnym, ciemnym i wysokiego kontrastu, na stronach Przegląd, Dokument, Mapa i Kontrolki. Ma opcję podążania za hostem i wybór stylu VCL, a także potrafi zapisać zrzut ekranu każdej kombinacji. Wszystkie zrzuty ekranu w tym artykule zostały wykonane za jego pomocą.

Pytania lub uwagi? Skontaktuj się z nami, odpowiedzą Ci osoby, które napisały ten kod.