sgcNavigation, ten sam pasek nawigacji dla FireMonkey, .NET i Delphi 7 do 13

Układ i tryby

Nowoczesny panel boczny aplikacji w jednym komponencie

Większość aplikacji biznesowych potrzebuje tego samego na lewej krawędzi głównego formularza: listy stron, pogrupowanej według obszarów, z wyraźnie oznaczoną bieżącą stroną. Upuść TsgcVCLNavigationBar na formularz, wyrównaj go do lewej i dodaj pozycje. Nagłówki grup opisują wiersze poniżej stonowanym kolorem i nigdy nie są zaznaczane. Zaznaczony wiersz dostaje tło w kolorze akcentu i 3-pikselowy pasek akcentu, więc użytkownicy zawsze widzą, gdzie są. Stany najechania i naciśnięcia, podpowiedzi i wyłączone wiersze są rysowane za Ciebie, dzięki czemu pasek wygląda na gotowy już przy pierwszym uruchomieniu.

• Mode := nbmSidebar to domyślny styl
• IsGroup zmienia pozycję w nagłówek grupy
• ItemHeight i GroupHeight ustawiają wysokość wierszy
• Kółko myszy przewija długie listy, a ScrollIntoView pokazuje dowolną pozycję
• Od prawej do lewej dla arabskiego i hebrajskiego: ikony i podpisy zamieniają się miejscami, a wcięcie, szewrony, plakietki i przycisk zwijania są odbite lustrzanie

Układ i tryby

Zwijanie do paska ikon, z animacją

Szerokie panele boczne zabierają miejsce danym, dla których użytkownicy przyszli. Ustaw Collapsed, a pasek zwinie się z pełnej szerokości do wąskiego paska ikon w około 150 ms. Na pasku rysowane są tylko ikony, podpis staje się podpowiedzią, nagłówki grup zamieniają się w linie oddzielające, a plakietki w kropki, więc nic ważnego nie ginie. Pasek sam ustawia swoją szerokość, więc zawartość obok po prostu podąża za nim z alClient. Powiąż właściwość Collapsed z przyciskiem hamburgera, ustawieniem użytkownika lub szerokością formularza, a pasek otwiera się i zamyka tak samo w trybie panelu bocznego i akordeonu.

• Collapsed przełącza między dwiema szerokościami
• ExpandedWidth (220) i CollapsedWidth (56) w pikselach logicznych
• AnimateCollapse włącza lub wyłącza animację
• OnCollapsedChange informuje, kiedy pasek się otwiera lub zamyka

Struktura nawigacji

Wielopoziomowe drzewo z wyszukiwaniem

Duże aplikacje szybko przerastają płaską listę stron. Ustaw Mode na nbmTree, a pasek stanie się drzewem o dowolnej liczbie poziomów: pozycje nadal tworzą płaską kolekcję, a Depth pozycji określa jej poziom, więc kod wypełniający pasek prawie się nie zmienia. Każdy poziom ma wcięcie, a każdy element nadrzędny można zwinąć. Włącz ShowSearch, a wiersz wyszukiwania nad pozycjami filtruje drzewo w trakcie pisania, utrzymuje rozwinięte elementy nadrzędne każdego dopasowania i podświetla pasujące znaki. Dopasowanie rozmyte znajduje 'Settings' po wpisaniu 'stg'. Tryb drzewa i wyszukiwanie są częścią wszystkich edycji.

• Mode := nbmTree i Depth dla każdej pozycji
• ExpandAll, CollapseAll i Expand(aIndex, aRecursive)
• Filter z FilterMode nfmContains lub nfmFuzzy
• ShowSearch rysuje wiersz wyszukiwania, Esc go czyści
• Strzałki w prawo i w lewo rozwijają i zwijają, * rozwija całą gałąź

Struktura nawigacji

Ścieżka nawigacji, która podąża za drzewem

Głębokie drzewa wymagają sposobu, by zobaczyć, gdzie jesteś, i skoczyć wyżej. Ścieżka nawigacji pokazuje drogę jako wiersz segmentów, na przykład Mail, Folders, Work. Kliknięcie segmentu wraca do niego, a strzałka za segmentem wyświetla jego elementy podrzędne, aby przejść gdzie indziej. Powiąż ją z paskiem nawigacji, a będzie podążać za wybraną pozycją, albo wypełnij ją samodzielnie z Path lub Segments. Gdy ścieżka jest zbyt długa, pierwsze segmenty zwijają się do przycisku przepełnienia. W edycji Zarejestrowana kliknięcie pustego obszaru, F4 lub Ctrl+L zamienia ścieżkę nawigacji w pole edycji z pełną ścieżką, jak pasek adresu w menedżerze plików.

• NavigationBar wiąże ścieżkę nawigacji z paskiem
• Własne Path, PathDelimiter i OnGetChildren
• OnSegmentClick i AutoTruncate
• Tylko zarejestrowana tryb edycji z OnPathEdit

Struktura nawigacji

Formularz z kartami w pasku tytułu

Przeglądarki, terminale i nowoczesne edytory umieszczają karty w nagłówku okna, dzięki czemu dokumenty dostają całą wysokość ekranu. Formularz z kartami robi to samo w Twojej aplikacji. Upuść go na formularz i połącz z paskiem kart: sgcUI usuwa natywny nagłówek i rysuje pasek tytułu z motywem, z ikoną okna, kartami, przyciskiem nowej karty oraz przyciskami minimalizacji, maksymalizacji i zamknięcia, w motywie sgcUI aplikacji, Classic lub Fluent, jasnym lub ciemnym. Okno zachowuje cień, krawędzie zmiany rozmiaru i zachowanie po maksymalizacji, a Windows 11 pokazuje układy przyciągania, gdy wskaźnik spoczywa na przycisku maksymalizacji. Puste miejsce po prawej stronie ostatniej karty przeciąga okno. W edycji Zarejestrowana użytkownik przeciąga kartę z paska do nowego okna i upuszcza ją na pasku tytułu innego okna, jak w przeglądarce internetowej.

• TsgcVCLNavigationTabbedForm i TsgcFMXNavigationTabbedForm w Delphi i C++ Builder, TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow i TsgcAvaloniaNavigationTabbedWindow w .NET
• Tabs łączy pasek kart. W Delphi Notebook przenosi pasek kart notatnika do paska tytułu, a strony zostają w notatniku
• Dwukrotne kliknięcie pustego paska maksymalizuje okno, a kliknięcie prawym przyciskiem pokazuje menu systemowe
• W WPF i Avalonia dołączona właściwość Tabs okna konfiguruje formularz z XAML
• Tylko zarejestrowana odrywanie: TearOffMode przenosi oderwaną kartę do okna pod wskaźnikiem, a ttmNewForm otwiera ją w nowym oknie z OnCreateTearOffForm, które podąża za wskaźnikiem

Formularz z kartami jest w każdej edycji, także w Community. Odrywanie jest w edycji Zarejestrowana, tak jak odrywanie kart. Ramka z motywem wymaga Windows z kompozycją pulpitu, a w FireMonkey jest stosowana tylko w Windows: w macOS, Linux, iOS i Android zostaje natywny pasek tytułu.

Menedżer dokowania Tylko zarejestrowana

Przeciągaj panele na prowadnice upuszczania

Aplikacje z wieloma oknami narzędzi potrzebują przestrzeni roboczej, którą użytkownik może sam ułożyć. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager i TsgcAvaloniaDockManager dokują panele narzędzi po czterech stronach formularza, w zagnieżdżonych podziałach z rozdzielaczami i w grupach kart. Użytkownik przeciąga nagłówek lub kartę, a prowadnice upuszczania pokazują, gdzie panel może wylądować: kompas na grupie pod wskaźnikiem dzieli tę grupę po jednej ze stron lub dodaje panel do niej jako kartę, prowadnice krawędzi dokują go na krawędzi całej powierzchni, a prostokąt podglądu w kolorze akcentu pokazuje, ile miejsca zajmie. Esc anuluje przeciąganie. Strona Dokowanie w Avalonia pokazuje TsgcAvaloniaDockManager w XAML i C#.

• Panels.Add z Name, Caption, Placement i DockSize oraz własną kontrolką jako Control
• DockPanel, ClosePanel, ShowPanel i ActivatePanel w kodzie
• OnPanelDock może odmówić zmiany dokowania, odłączenia do okna pływającego lub automatycznego ukrywania
• Przyciski zamknięcia, przypięcia, maksymalizacji i menu w każdym nagłówku

Menedżer dokowania Tylko zarejestrowana

Okna pływające na pulpicie

Panel upuszczony poza prowadnicami unosi się we własnym oknie, które użytkownik przenosi w inne miejsce lub na inny monitor. Okno pływające ma układ jak powierzchnia dokowania, więc można w nim zadokować kolejne panele obok siebie lub jako karty, a dwukrotne kliknięcie jego nagłówka dokuje je z powrotem. Okna pływające są bezramkowymi oknami narzędzi należącymi do formularza i niewidocznymi na pasku zadań, z rysowanym nagłówkiem i obramowaniem do zmiany rozmiaru, a każde używa skali własnego monitora. Działają w aplikacjach desktopowych VCL, WinForms, WPF i Avalonia oraz w FireMonkey w Windows i macOS. W iOS i Androidzie panele nie pływają, a przeciąganie pokazuje tylko prowadnice.

• FloatPanel(aPanel, aLeft, aTop) w kodzie
• AllowFloating w menedżerze dokowania i CanFloat dla każdego panelu
• Placement := dplFloat uruchamia panel jako pływający w rozmiarze FloatWidth na FloatHeight
• Okno pływające poza widocznym obszarem roboczym wraca na niego podczas wczytywania układu

Menedżer dokowania Tylko zarejestrowana

Zapisz układ i przywróć go

Użytkownicy oczekują, że znajdą panele tam, gdzie je zostawili. SaveLayout zapisuje cały układ jako zwarty JSON: podziały i ich rozmiary, grupy i ich aktywne panele, automatycznie ukryte grupy każdej strony, okna pływające z ich granicami, zmaksymalizowaną grupę i ukryte panele. LoadLayout przywraca go przy następnym uruchomieniu. Tekst jest taki sam w Delphi i .NET, więc jeden plik układu służy obu. Panel, który układ wymienia, a którego formularz jeszcze nie ma, na przykład otwarty wcześniej dokument, trafia do OnRestorePanel, gdzie Twój kod tworzy jego zawartość lub go pomija.

• SaveLayout, SaveLayoutToFile i SaveLayoutToStream
• LoadLayout, LoadLayoutFromFile i LoadLayoutFromStream zwracają False dla obcego tekstu i niczego nie zmieniają
• OnRestorePanel dla paneli tworzonych w czasie działania
• Polecenie "Window" dla każdego panelu zamienia paletę poleceń w przełącznik okien

Edycja Zarejestrowana w FireMonkey, VCL, WinForms, WPF i Avalonia, ze wsparciem dla C++ Builder. Klawiatura, UI Automation, pismo od prawej do lewej, motywy i wysoki DPI w komplecie.

Pozycje, które informują

Plakietki z liczbą nieprzeczytanych

Użytkownicy powinni widzieć, że coś wymaga uwagi, zanim otworzą stronę. Nadaj pozycji Badge, na przykład liczbę nieprzeczytanych lub słowo New, a pasek narysuje ją jako pigułkę w kolorze akcentu po prawej stronie wiersza, z czarnym lub białym tekstem, zależnie od tego, co jest czytelniejsze. Ustawiaj ją z kodu przy każdej zmianie wartości, a pasek sam się odrysuje. Na zwiniętym pasku plakietka staje się kropką na ikonie. Ponieważ plakietka to zwykły tekst, ta sama właściwość obsługuje liczniki, krótkie etykiety i słowa statusu bez własnego kodu rysującego.

• Badge to krótki tekst dla każdej pozycji
• Pusty Badge nic nie rysuje
• Pigułka używa akcentu motywu lub Twojego AccentColor
• Połącz z Hint, aby wyjaśnić licznik

Pozycje, które informują Tylko zarejestrowana

Podłącz pozycje do swoich TAction

Aplikacje zbudowane na TActionList trzymają już polecenia, podpisy i reguły włączenia w jednym miejscu. Powiąż pozycję z dowolnym TAction VCL lub FireMonkey przez właściwość Action, a jej Caption, Enabled, Visible, Hint i ImageIndex podążają za akcją. Kliknięcie wykonuje akcję z paskiem jako ActionComponent, a OnUpdate działa w czasie bezczynności, więc pozycja szarzeje, gdy tylko jej akcja zostanie wyłączona. W .NET to samo robią Command i CommandParameter. Jeden TActionList może sterować menu, paskiem narzędzi i skrótami klawiszowymi formularza.

• Action łączy pozycję z dowolnym TBasicAction
• OnClick pozycji działa zamiast akcji
• Kompilowane pod SGC_NAVIGATION_ACTIONS
• .NET: Command i CommandParameter z ICommand

Community: zamiast akcji przypisz OnClick pozycji lub OnItemClick paska.

Klawiatura, motywy i eksport

Jasny, ciemny i Twój kolor akcentu

Menu, które ignoruje motyw aplikacji, wygląda na doklejone. Theme ustawia kolory powierzchni, obramowania, tekstu, nagłówka grupy, najechania i akcentu ze wspólnych tokenów sgcUICore, więc pasek i sgcDashboard z tym samym Theme pasują idealnie. AccentColor zastępuje akcent kolorem Twojej marki dla paska zaznaczenia, ramki fokusu i plakietek. Pasek umieszczony w kafelku dashboardu sam podąża za motywem dashboardu. Przełącz motyw w czasie działania, a pasek odrysuje się od razu, gotowy na przełącznik trybu ciemnego na stronie ustawień.

• Theme: utDefault (domyślnie, podąża za motywem aplikacji), utLight lub utDark
• AccentColor jako wartość $AARRGGBB, 0 zachowuje akcent motywu
• Te same tokeny co w każdym produkcie sgcUI
• Kafelki dashboardu przekazują swój motyw do paska