sgcNavigation, la stessa barra di navigazione per FireMonkey, .NET e Delphi 7 a 13

Layout e modalità

Una moderna sidebar per app in un solo componente

La maggior parte delle applicazioni gestionali ha bisogno della stessa cosa sul bordo sinistro del form principale: un elenco di pagine, raggruppate per area, con la pagina corrente ben evidenziata. Inserisci una TsgcVCLNavigationBar nel form, allineala a sinistra e aggiungi le voci. Le intestazioni di gruppo danno il titolo alle righe sottostanti con un colore attenuato e non vengono mai selezionate. La riga selezionata ha uno sfondo con tinta di accento e una barra di accento da 3 pixel, così gli utenti vedono sempre dove si trovano. Gli stati hover e premuto, i suggerimenti e le righe disabilitate sono tutti disegnati per te, quindi la barra sembra rifinita fin dalla prima esecuzione.

• Mode := nbmSidebar è lo stile predefinito
• IsGroup trasforma una voce in un'intestazione di gruppo
• ItemHeight e GroupHeight impostano l'altezza delle righe
• La rotellina del mouse scorre gli elenchi lunghi e ScrollIntoView mostra qualsiasi voce
• Da destra a sinistra per arabo ed ebraico: icone e didascalie si scambiano di posto, e il rientro, i chevron, i badge e il pulsante di compressione sono speculari

Layout e modalità

Riduci a una barra di icone, con animazione

Le sidebar larghe sottraggono spazio ai dati che i tuoi utenti sono venuti a vedere. Imposta Collapsed e la barra passa dalla larghezza espansa a una stretta barra di icone in circa 150 ms. Nella barra vengono disegnate solo le icone, la didascalia diventa il suggerimento, le intestazioni di gruppo diventano linee di separazione e i badge diventano punti, quindi non si perde nulla di importante. La barra imposta da sola la propria larghezza, perciò il contenuto accanto la segue semplicemente con alClient. Collega la proprietà Collapsed a un pulsante hamburger, a un'impostazione dell'utente o alla larghezza del form, e la barra si apre e si chiude allo stesso modo sia in modalità sidebar sia in modalità accordion.

• Collapsed passa da una larghezza all'altra
• ExpandedWidth (220) e CollapsedWidth (56) in pixel logici
• AnimateCollapse attiva o disattiva l'animazione
• OnCollapsedChange ti avvisa quando la barra si apre o si chiude

Shell di navigazione

Un albero a più livelli con ricerca

Le applicazioni grandi superano presto un elenco piatto di pagine. Imposta Mode su nbmTree e la barra diventa un albero con tutti i livelli che servono: le voci restano una collezione piatta e il Depth di una voce ne fissa il livello, quindi il codice che riempie la barra cambia appena. Ogni livello è rientrato e ogni genitore può essere compresso. Attiva ShowSearch e una riga di ricerca sopra le voci filtra l'albero mentre l'utente digita, mantiene aperti i genitori di ogni risultato ed evidenzia i caratteri corrispondenti. La corrispondenza approssimata trova 'Settings' da 'stg'. La modalità albero e la ricerca fanno parte di ogni edizione.

• Mode := nbmTree e Depth per voce
• ExpandAll, CollapseAll e Expand(aIndex, aRecursive)
• Filter con FilterMode nfmContains o nfmFuzzy
• ShowSearch disegna la riga di ricerca, Esc la svuota
• Destra e Sinistra espandono e comprimono, * espande un intero ramo

Shell di navigazione

Un breadcrumb che segue l'albero

Gli alberi profondi richiedono un modo per vedere dove ci si trova e per risalire. Il breadcrumb mostra il percorso come una fila di segmenti, per esempio Mail, Folders, Work. Un clic su un segmento torna a quel punto, e il chevron dopo un segmento elenca i suoi figli per andare altrove. Collegalo a una barra di navigazione e segue la voce selezionata, oppure riempilo da solo da un Path o dai Segments. Quando il percorso è troppo lungo, i primi segmenti si ripiegano in un pulsante di overflow. Nell'edizione Registered un clic sull'area vuota, F4 o Ctrl+L trasforma il breadcrumb in un campo di modifica con il percorso completo, come la barra degli indirizzi di un file manager.

• NavigationBar collega il breadcrumb a una barra
• Path, PathDelimiter e OnGetChildren in autonomia
• OnSegmentClick e AutoTruncate
• Solo Registered modalità di modifica con OnPathEdit

Shell di navigazione

Un form a schede con le schede nella barra del titolo

I browser, i terminali e gli editor moderni mettono le loro schede nel titolo della finestra, così i documenti hanno tutta l'altezza dello schermo. Il form a schede fa lo stesso per la tua applicazione. Trascinalo su un form e collegalo alla striscia di schede: sgcUI rimuove la barra del titolo nativa e disegna una barra del titolo con tema con l'icona della finestra, le schede, il pulsante di nuova scheda e i pulsanti Riduci a icona, Ingrandisci e Chiudi, nel tema sgcUI dell'applicazione, Classic o Fluent, chiaro o scuro. La finestra mantiene l'ombra, i bordi di ridimensionamento e il comportamento da ingrandita, e Windows 11 mostra i layout snap quando il puntatore si ferma sul pulsante Ingrandisci. Lo spazio vuoto a destra dell'ultima scheda trascina la finestra. Nell'edizione Registered l'utente trascina una scheda fuori dalla striscia in una nuova finestra e la rilascia sulla barra del titolo di un'altra finestra, come in un browser web.

• TsgcVCLNavigationTabbedForm e TsgcFMXNavigationTabbedForm in Delphi e C++ Builder, TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow e TsgcAvaloniaNavigationTabbedWindow in .NET
• Tabs collega la striscia di schede. In Delphi, Notebook sposta la striscia di un notebook nella barra del titolo, mentre le pagine restano nel notebook
• Un doppio clic sulla striscia vuota ingrandisce la finestra e un clic destro mostra il menu di sistema
• In WPF e Avalonia la proprietà associata Tabs della finestra la configura da XAML
• Solo Registered distacco: TearOffMode sposta una scheda staccata nella finestra sotto il puntatore, e ttmNewForm la apre in una nuova finestra da OnCreateTearOffForm che segue il puntatore

Il form a schede è in ogni edizione, Community compresa. Il distacco è nell'edizione Registered, come il distacco delle schede. La cornice con tema richiede Windows con la composizione del desktop, e in FireMonkey viene applicata solo su Windows: su macOS, Linux, iOS e Android resta la barra del titolo nativa.

Gestore di docking Solo Registered

Trascina i pannelli sulle guide di rilascio

Le applicazioni con molte finestre strumenti hanno bisogno di uno spazio di lavoro che l'utente possa disporre. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager e TsgcAvaloniaDockManager agganciano i pannelli strumenti ai quattro lati del form, in suddivisioni annidate con splitter e in gruppi a schede. L'utente trascina una didascalia o una scheda, e le guide di rilascio mostrano dove può atterrare: una bussola sul gruppo sotto il puntatore divide quel gruppo su un lato o vi inserisce il pannello come scheda, le guide sui bordi lo agganciano a un bordo dell'intero sito, e un rettangolo di anteprima nel colore d'accento mostra lo spazio che occuperà. Esc annulla il trascinamento. La pagina Docking per Avalonia mostra TsgcAvaloniaDockManager in XAML e C#.

• Panels.Add con Name, Caption, Placement e DockSize, e il tuo controllo come Control
• DockPanel, ClosePanel, ShowPanel e ActivatePanel nel codice
• OnPanelDock può rifiutare un cambio di aggancio, di mobilità o di scomparsa automatica
• Pulsanti di chiusura, fissaggio, ingrandimento e menu su ogni didascalia

Gestore di docking Solo Registered

Finestre mobili sul desktop

Un pannello rilasciato lontano dalle guide diventa una finestra propria, che l'utente sposta in un altro punto o su un altro monitor. Una finestra mobile contiene una disposizione come il sito di docking, quindi altri pannelli si possono agganciare al suo interno affiancati o come schede, e un doppio clic sulla sua didascalia la aggancia di nuovo. Le finestre mobili sono finestre strumento senza bordo appartenenti al form e tenute fuori dalla barra delle applicazioni, con una didascalia disegnata e un bordo che le ridimensiona, e ognuna usa la scala del proprio monitor. Funzionano nelle applicazioni desktop VCL, WinForms, WPF, Avalonia e FireMonkey su Windows e macOS. Su iOS e Android i pannelli non diventano mobili, e un trascinamento mostra solo le guide.

• FloatPanel(aPanel, aLeft, aTop) nel codice
• AllowFloating sul gestore di docking e CanFloat per pannello
• Placement := dplFloat avvia un pannello come mobile con FloatWidth per FloatHeight
• Una finestra mobile fuori dall'area di lavoro visibile torna al suo interno quando si carica una disposizione

Gestore di docking Solo Registered

Salva la disposizione e ripristinala

Gli utenti si aspettano di ritrovare i pannelli dove li hanno lasciati. SaveLayout scrive l'intera disposizione come JSON compatto: le suddivisioni e le loro dimensioni, i gruppi e i loro pannelli attivi, i gruppi a scomparsa automatica di ogni lato, le finestre mobili con i loro limiti, il gruppo ingrandito e i pannelli nascosti. LoadLayout la ripristina al prossimo avvio. Il testo è lo stesso in Delphi e in .NET, quindi un solo file di disposizione serve per entrambi. Un pannello che la disposizione nomina ma che il form non ha ancora, come un documento che era aperto, arriva a OnRestorePanel, dove il tuo codice ne crea il contenuto o lo scarta.

• SaveLayout, SaveLayoutToFile e SaveLayoutToStream
• LoadLayout, LoadLayoutFromFile e LoadLayoutFromStream restituiscono False con un testo estraneo e non cambiano nulla
• OnRestorePanel per i pannelli creati a runtime
• Un comando "Window" per pannello trasforma il riquadro comandi in un selettore di finestre

Edizione Registered su FireMonkey, VCL, WinForms, WPF e Avalonia, con supporto per C++ Builder. Tastiera, UI Automation, da destra a sinistra, temi e high DPI inclusi.

Voci che informano

Badge per i contatori non letti

Gli utenti devono vedere che qualcosa richiede attenzione prima di aprire la pagina. Assegna a una voce un Badge, come un contatore non letti o la parola Nuovo, e la barra lo disegna come una pillola nel colore di accento a destra della riga, con testo nero o bianco, a seconda di quale si legge meglio. Impostalo da codice ogni volta che il valore cambia e la barra si ridisegna da sola. Nella barra di icone compressa il badge diventa un punto sull'icona. Poiché il badge è testo semplice, la stessa proprietà copre contatori, etichette brevi e parole di stato senza alcun codice di disegno personalizzato.

• Badge è un breve testo per ogni voce
• Un Badge vuoto non disegna nulla
• La pillola usa l'accento del tema o il tuo AccentColor
• Combinalo con Hint per spiegare il contatore

Voci che informano Solo Registered

Collega le voci ai tuoi TAction

Le applicazioni costruite su una TActionList hanno già comandi, didascalie e regole di abilitazione in un unico posto. Collega una voce a qualsiasi TAction VCL o FireMonkey tramite la sua proprietà Action e Caption, Enabled, Visible, Hint e ImageIndex seguono l'azione. Un clic esegue l'azione con la barra come ActionComponent, e OnUpdate viene eseguito a riposo, quindi una voce diventa grigia non appena la sua azione viene disabilitata. In .NET lo stesso compito è svolto da Command e CommandParameter. Una sola TActionList può gestire il menu, la barra degli strumenti e le scorciatoie da tastiera del form.

• Action collega una voce a qualsiasi TBasicAction
• L'OnClick di una voce viene eseguito al posto dell'azione
• Compilato con SGC_NAVIGATION_ACTIONS
• .NET: Command e CommandParameter con ICommand

Community: assegna l'OnClick della voce o l'OnItemClick della barra al posto di un'azione.

Tastiera, temi e output

Chiaro, scuro e il tuo colore di accento

Un menu che ignora il tema dell'applicazione sembra aggiunto a posteriori. Theme imposta i colori di superficie, bordo, testo, intestazione di gruppo, hover e accento a partire dai token condivisi di sgcUICore, così una barra e un sgcDashboard con lo stesso Theme coincidono esattamente. AccentColor sostituisce l'accento con il colore del tuo marchio per la barra di selezione, il rettangolo di focus e i badge. Una barra ospitata in una tessera di dashboard segue da sola il tema della dashboard. Cambia il tema a runtime e la barra si ridisegna subito, pronta per un interruttore della modalità scura nella tua pagina delle impostazioni.

• Theme: utDefault (predefinito, segue il tema dell'applicazione), utLight o utDark
• AccentColor come valore $AARRGGBB, 0 mantiene l'accento del tema
• Gli stessi token di ogni prodotto sgcUI
• Le tessere della dashboard trasmettono il loro tema alla barra