Delphi, C++ Builder & .NET Teil von sgcUI

sgcNavigation, die Seitenleisten- und Akkordeon-Navigationsleiste für Delphi, C++ Builder & .NET

Gib deiner Anwendung in wenigen Minuten ein modernes Navigationsmenü. Ein Steuerelement ist Seitenleiste oder Akkordeon, klappt mit sanfter Animation zu einer Symbolleiste zusammen, zeigt Badges für ungelesene Einträge und lässt sich komplett per Tastatur bedienen. Helle und dunkle Themes sind bereits integriert.

VCL, FireMonkey, WinForms, WPF, AvaloniaDelphi 7 bis 13 und C++ Builder 2007 bis 13Kostenlose .NET Community EditionEnthalten in sgcUI Standard
SidebarApp-Demo mit einer Seitenleiste aus 8 Einträgen in den Gruppen Workspace und Business, Dashboard ausgewählt und zwei KPI-Karten rechts

Alles, was ein App-Menü braucht

Zehn Funktionen, die eine Liste von Seiten in eine Navigationsoberfläche verwandeln, in der sich deine Anwender sofort zurechtfinden.

Layout und Modi

Ein Steuerelement deckt die beiden Navigationsstile ab, die Geschäftsanwendungen nutzen, und die schmale Symbolleiste dazwischen.

Eine moderne App-Seitenleiste in einer Komponente

Layout und Modi

Eine moderne App-Seitenleiste in einer Komponente

Die meisten Geschäftsanwendungen brauchen am linken Rand des Hauptformulars dasselbe: eine nach Bereichen gruppierte Liste von Seiten, in der die aktuelle Seite klar markiert ist. Platziere eine TsgcVCLNavigationBar auf dem Formular, richte sie links aus und füge die Einträge hinzu. Gruppenkopfzeilen betiteln die darunterliegenden Zeilen in gedämpfter Farbe und werden nie ausgewählt. Die ausgewählte Zeile erhält einen Hintergrund in der Akzentfarbe und einen 3 Pixel breiten Akzentbalken, damit Anwender immer sehen, wo sie sind. Hover- und Gedrückt-Zustände, Hinweise und deaktivierte Zeilen werden für dich gezeichnet, sodass die Leiste schon beim ersten Start fertig wirkt.

  • Mode := nbmSidebar ist der Standardstil
  • IsGroup macht einen Eintrag zur Gruppenkopfzeile
  • ItemHeight und GroupHeight legen die Zeilenhöhen fest
  • Das Mausrad scrollt lange Listen, und ScrollIntoView zeigt jeden beliebigen Eintrag
  • Rechts nach links für Arabisch und Hebräisch: Symbole und Beschriftungen tauschen die Plätze, und Einzug, Chevrons, Badges und die Schaltfläche zum Einklappen sind gespiegelt
Hilfethema lesen
Mit einer Eigenschaft zum Akkordeon wechseln

Layout und Modi

Mit einer Eigenschaft zum Akkordeon wechseln

Einstellungsdialoge und Administrationskonsolen haben oft mehr Bereiche, als auf den Bildschirm passen. Setze Mode auf nbmAccordion, und jede Gruppenkopfzeile wird zu einem Abschnitt, der die Einträge darunter öffnet und schließt, mit einem Pfeil rechts und eingerückten Unterpunkten. Standardmäßig ist immer nur eine Gruppe offen, was ein langes Menü kurz hält. Setze AllowMultiExpand, wenn Anwender mehrere Abschnitte gleichzeitig öffnen sollen. Die Einträge, die Ereignisse und dein Code bleiben genau gleich. Einträge vor der ersten Kopfzeile gehören zu keiner Gruppe und sind immer sichtbar, ideal für einen Eintrag wie Start oder Dashboard über den Abschnitten.

  • Mode := nbmAccordion schaltet die ganze Leiste um
  • Expanded öffnet oder schließt eine Gruppe per Code
  • AllowMultiExpand hält mehrere Gruppen gleichzeitig offen
  • Indent legt die Einrückung der untergeordneten Einträge fest
Hilfethema lesen

Layout und Modi

Animiert zu einer Symbolleiste reduzieren

Breite Seitenleisten nehmen den Platz der Daten weg, wegen derer deine Anwender gekommen sind. Setze Collapsed, und die Leiste klappt in etwa 150 ms von ihrer vollen Breite zu einer schmalen Symbolleiste zusammen. Dort werden nur die Symbole gezeichnet, die Beschriftung wird zum Hinweis, Gruppenkopfzeilen werden zu Trennlinien und Badges zu Punkten, sodass nichts Wichtiges verloren geht. Die Leiste bestimmt ihre Breite selbst, der Inhalt daneben folgt einfach mit alClient. Binde die Eigenschaft Collapsed an eine Hamburger-Schaltfläche, eine Benutzereinstellung oder die Formularbreite, und die Symbolleiste öffnet und schließt sich im Seitenleisten- wie im Akkordeon-Modus auf dieselbe Weise.

  • Collapsed schaltet zwischen den beiden Breiten um
  • ExpandedWidth (220) und CollapsedWidth (56) in logischen Pixeln
  • AnimateCollapse schaltet die Animation ein oder aus
  • OnCollapsedChange meldet, wann sich die Symbolleiste öffnet oder schließt
Hilfethema lesen

Layout und Modi

Seiten über die Auswahl steuern

Eine Navigationsleiste ist nur nützlich, wenn sie ändert, was der Anwender sieht. Klickt oder tippt der Anwender einen aktivierten Eintrag an, wählt die Leiste ihn aus, löst OnItemClick aus und führt dann das OnClick des Eintrags aus. OnSelectionChange ist die zentrale Stelle, um die passende Seite anzuzeigen, zum Beispiel den Reiter eines TPageControl mit ausgeblendeten Reitern, genau so ist die Demo SidebarApp aufgebaut. SelectedIndex liest und setzt die aktuelle Seite per Code. Deaktiviere einen Eintrag, den der Anwender noch nicht erreichen kann, erkläre den Grund in seinem Hinweis oder blende ihn für Rollen aus, die ihn nicht sehen sollen, die Auswahllogik funktioniert weiterhin.

  • SelectedIndex ist die vom Anwender gewählte Seite
  • OnSelectionChange wechselt die Seite oder den Frame
  • OnItemClick an der Leiste und OnClick pro Eintrag
  • Enabled, Hint und Visible pro Eintrag
Hilfethema lesen

Einträge, die informieren

Zeilen bieten mehr als eine Beschriftung: ein Symbol, eine Zahl und eine Verknüpfung zur Logik, die du schon geschrieben hast.

Badges für ungelesene Einträge

Einträge, die informieren

Badges für ungelesene Einträge

Anwender sollten sehen, dass etwas Aufmerksamkeit braucht, bevor sie die Seite öffnen. Gib einem Eintrag ein Badge, etwa eine Zahl ungelesener Einträge oder das Wort Neu, und die Leiste zeichnet es als Pille in der Akzentfarbe am rechten Zeilenrand, mit schwarzem oder weißem Text, je nachdem, was besser lesbar ist. Setze es per Code, wenn sich der Wert ändert, und die Leiste zeichnet sich neu. In der reduzierten Symbolleiste wird das Badge zu einem Punkt auf dem Symbol. Da das Badge einfacher Text ist, deckt dieselbe Eigenschaft Zahlen, kurze Bezeichnungen und Statuswörter ab, ganz ohne eigenen Zeichencode.

  • Badge ist ein kurzer Text pro Eintrag
  • Ein leeres Badge zeichnet nichts
  • Die Pille nutzt die Akzentfarbe des Themes oder deine AccentColor
  • Kombiniere es mit Hint, um die Zahl zu erklären
Hilfethema lesen
Symbole aus deiner Bildliste oder ein Glyph

Einträge, die informieren

Symbole aus deiner Bildliste oder ein Glyph

Jede Zeile hat einen Symbolplatz. Verweise die Leiste auf die Bildliste, die du ohnehin nutzt, und setze ImageIndex pro Eintrag. Maskierte oder 32-Bit-Bilder werden einmal konvertiert und zwischengespeichert, bis sich die Liste ändert. Noch keine Bildliste? Setze stattdessen ein Glyph, einen Buchstaben oder ein kurzes Symbol in den Farben des Themes, so sehen die Demos aus. Ein deaktivierter Eintrag zeichnet sein Bild mit 40 Prozent Deckkraft, damit der Zustand auf einen Blick klar ist. Beides gemischt ist in Ordnung: Einträge mit Bildindex zeigen das Bild, die anderen fallen auf ihr Glyph zurück, sodass du Symbole nach und nach ergänzen kannst.

  • Images und ImageIndex für Bildlisten
  • Glyph für einen Buchstaben oder ein Symbol ohne Bilder
  • VCL zeichnet die Bilder in ihrer eigenen Größe
  • FireMonkey-Bildlisten ab Delphi XE8
Hilfethema lesen

Einträge, die informieren Nur Registered

Einträge mit deinen TActions verbinden

Anwendungen auf Basis einer TActionList haben ihre Befehle, Beschriftungen und Aktivierungsregeln bereits an einem Ort. Verknüpfe einen Eintrag über die Eigenschaft Action mit einer beliebigen VCL- oder FireMonkey-TAction, und Caption, Enabled, Visible, Hint und ImageIndex folgen der Aktion. Ein Klick führt die Aktion mit der Leiste als ActionComponent aus, und OnUpdate läuft im Leerlauf, sodass ein Eintrag sofort ausgegraut wird, wenn seine Aktion deaktiviert ist. In .NET übernehmen Command und CommandParameter dieselbe Aufgabe. Eine TActionList kann das Menü, die Symbolleiste und die Tastenkürzel des Formulars steuern.

  • Action verknüpft einen Eintrag mit einer beliebigen TBasicAction
  • Ein OnClick des Eintrags wird anstelle der Aktion ausgeführt
  • Kompiliert unter SGC_NAVIGATION_ACTIONS
  • .NET: Command und CommandParameter mit ICommand

Community: Weise stattdessen das OnClick des Eintrags oder das OnItemClick der Leiste zu, statt einer Aktion.

Hilfethema lesen

Tastatur, Themes und Ausgabe

Die Details, durch die sich die Leiste nativ anfühlt und zum Rest deiner Anwendung passt.

Navigation zuerst per Tastatur

Tastatur, Themes und Ausgabe

Power-User wechseln Seiten ohne Maus, und Barrierefreiheitsprüfungen erwarten das. Die Leiste erhält den Fokus mit Tab und bewegt eine fokussierte Zeile über die sichtbaren, aktivierten Einträge: Auf und Ab gehen schrittweise, Pos1 und Ende springen, Enter oder Leertaste aktiviert. Im Akkordeon klappt Links eine Gruppe zu und Rechts klappt sie auf. Das gestrichelte Fokusrechteck erscheint nur, solange die Tastatur benutzt wird, und der Fokus bleibt von der ausgewählten Seite getrennt. Dieselben Tasten funktionieren in der FireMonkey-Leiste über CanFocus, sodass Desktop-Anwender auf jeder Plattform dasselbe Verhalten erhalten.

  • TabStop ist bei der VCL-Leiste standardmäßig aktiviert
  • FocusedIndex des Modells ist die Tastaturzeile
  • SelectedIndex bleibt die gewählte Seite
  • Hinweise zeigen die Beschriftung in der reduzierten Symbolleiste
Hilfethema lesen
Hell, dunkel und deine Akzentfarbe

Tastatur, Themes und Ausgabe

Hell, dunkel und deine Akzentfarbe

Ein Menü, das das Theme der Anwendung ignoriert, wirkt aufgesetzt. Theme legt Oberfläche, Rahmen, Text, Gruppenkopfzeile, Hover und Akzent aus den gemeinsamen sgcUICore-Tokens fest, sodass eine Leiste und ein sgcDashboard mit demselben Theme exakt zusammenpassen. AccentColor ersetzt den Akzent durch deine Markenfarbe für den Auswahlbalken, das Fokusrechteck und die Badges. Eine Leiste in einer Dashboard-Kachel folgt von selbst dem Theme des Dashboards. Wechsle das Theme zur Laufzeit, und die Leiste zeichnet sich sofort neu, bereit für einen Dunkelmodus-Schalter auf deiner Einstellungsseite.

  • Theme: utDefault (Standard, folgt dem Anwendungs-Theme), utLight oder utDark
  • AccentColor als $AARRGGBB-Wert, 0 behält den Akzent des Themes bei
  • Dieselben Tokens wie in jedem sgcUI-Produkt
  • Dashboard-Kacheln geben ihr Theme an die Leiste weiter
Hilfethema lesen
Die Leiste ohne Fenster rendern

Tastatur, Themes und Ausgabe

Die Leiste ohne Fenster rendern

Dokumentation, visuelle Tests und Web-Backends brauchen manchmal ein Bild des Menüs statt des Menüs selbst. Der Renderer in sgcNavigation_Render zeichnet ein TsgcNavigationModel ohne Fenster und ohne VCL oder FireMonkey, sodass ein Konsolenprogramm, ein Dienst oder ein Server dieselbe Leiste als PNG oder SVG erzeugt. Die Unit lässt sich auf jeder Plattform kompilieren, auch unter Linux64, und ein Skalierungsparameter liefert scharfe Bilder für High-DPI-Bildschirme. Übergib deine Bildliste an den Renderer, und das exportierte Bild zeigt dieselben Symbole wie die laufende Anwendung.

  • sgcNavigationSaveToPNG schreibt eine PNG-Datei oder einen Stream
  • sgcNavigationSaveToSVG schreibt dieselbe Leiste als SVG
  • sgcNavigationRender zeichnet auf jede sgcUICore-Canvas
  • Breite und Höhe in logischen Pixeln, mal Skalierung
Hilfethema lesen

sgcNavigation in Aktion erleben

sgcNavigation in den sgcUI-Suite-Demos: vollständige Anwendungen, die offline mit integrierten Simulationsdaten laufen.

Wer mit sgcNavigation baut

Eine moderne Oberfläche für ERP- und Admin-Apps

Du hast Dutzende bestehende Formulare und ein Hauptfenster, das sie noch über eine Menüleiste öffnet. Setze eine Seitenleiste nach links, einen Eintrag pro Bereich, und lass OnSelectionChange die Reiter eines TPageControl mit ausgeblendeten Reitern wechseln. Badges zeigen offene Bestellungen oder ungelesene Nachrichten, und die Symbolleiste gibt den Formularen ihren Platz zurück. Starte SidebarApp, um das Muster mit einer sgcDashboard-Seite in Aktion zu sehen.

  • Seitenleisten-Modus
  • Badges
  • Auf eine Symbolleiste reduzieren
Demo SidebarApp ausführen

Einstellungs- und Administrationskonsolen

Konfigurationsdialoge fassen Dutzende Seiten unter wenigen Überschriften wie Sales, Inventory und Admin zusammen. Das Akkordeon hält jeweils einen Abschnitt offen, oder mit AllowMultiExpand mehrere, und die Aktionsverknüpfungen nutzen die Befehle und Aktivierungsregeln deiner TActionList weiter. Tastaturanwender bewegen sich mit den Pfeiltasten durch die Abschnitte. Die Demo Accordion zeigt drei Gruppen, einen Schalter zum Aufklappen und ein Klickprotokoll.

  • Akkordeon-Modus
  • Aktionsverknüpfungen
  • Tastaturnavigation
Demo Accordion ausführen

Dieselbe Navigation auf jeder Plattform

Eine FireMonkey-Anwendung, die unter Windows, macOS, iOS und Android läuft, sollte nicht auf jeder ein anderes Menü brauchen. TsgcFMXNavigationBar hat dieselben Einträge, Modi und Ereignisse wie die VCL-Leiste, und die .NET-Leisten für WinForms, WPF und Avalonia folgen denselben Namen. Teams, die eine Delphi-Desktop-App und ein .NET-Werkzeug ausliefern, behalten ein einziges Denkmodell. SidebarFMX ist die FireMonkey-Version der Seitenleisten-Demo.

  • FireMonkey-Leiste
  • Themes
  • .NET-Leisten
Demo SidebarFMX ausführen

Eine Navigationsleiste in wenigen Zeilen

Dieselbe API in Delphi, C++ Builder und C#: eine Akkordeon-Leiste mit Gruppen, einem Badge, einem deaktivierten Eintrag und einer Collapse-Schaltfläche.

procedure TMainForm.CreateNavigation;
var
  oItem: TsgcNavigationItem;
begin
  // an accordion bar on the left, dark theme, several groups open at once
  FNav := TsgcVCLNavigationBar.Create(Self);
  FNav.Parent := Self;
  FNav.Align := alLeft;
  FNav.Mode := nbmAccordion;
  FNav.AllowMultiExpand := True;
  FNav.Theme := utDark;
  // a group header (third parameter True), then the items under it
  FNav.Items.AddItem('Sales', '', True);
  FNav.Items.AddItem('Orders', 'O');
  FNav.Items.AddItem('Invoices', 'I').Badge := '3';
  FNav.Items.AddItem('Admin', '', True);
  oItem := FNav.Items.AddItem('Users', 'U');
  oItem.Hint := 'Manage the users';
  oItem := FNav.Items.AddItem('Billing', 'B');
  oItem.Enabled := False;
  FNav.SelectedIndex := 1;
  FNav.OnItemClick := NavItemClick;
  FNav.OnSelectionChange := NavSelectionChange;
  // a Collapse button folds the bar into an icon rail with an animation
  FNav.AnimateCollapse := True;
  FButton.Caption := 'Collapse';
  FButton.OnClick := ButtonClick;
end;

procedure TMainForm.NavItemClick(Sender: TObject; aItem: TsgcNavigationItem);
begin
  Caption := 'Clicked: ' + aItem.Caption;
end;

procedure TMainForm.NavSelectionChange(Sender: TObject);
begin
  FPanel.Caption := FNav.Items[FNav.SelectedIndex].Caption + ' page';
end;

procedure TMainForm.ButtonClick(Sender: TObject);
begin
  FNav.Collapsed := not FNav.Collapsed;
end;
#include <vcl.h>
#include <Vcl.ExtCtrls.hpp>
#include "sgcUICore_Theme.hpp"
#include "sgcNavigation_Model.hpp"
#include "sgcNavigation_VCL.hpp"

class TNavHandler : public TObject
{
public:
  TsgcVCLNavigationBar *Nav;
  TPanel *Content;
  void __fastcall ItemClick(TObject *Sender, TsgcNavigationItem *aItem);
  void __fastcall SelectionChange(TObject *Sender);
  void __fastcall CollapseClick(TObject *Sender);
};

void __fastcall TNavHandler::ItemClick(TObject *Sender, TsgcNavigationItem *aItem)
{
  Content->Caption = "Clicked: " + aItem->Caption;
}

void __fastcall TNavHandler::SelectionChange(TObject *Sender)
{
  Content->Caption = Nav->Items->Items[Nav->SelectedIndex]->Caption + " page";
}

void __fastcall TNavHandler::CollapseClick(TObject *Sender)
{
  Nav->Collapsed = !Nav->Collapsed;   // animated fold into an icon rail
}

void __fastcall CreateNavigation(TForm *Form, TNavHandler *Handler)
{
  // an accordion bar on the left, dark theme, several groups open at once
  TsgcVCLNavigationBar *Nav = new TsgcVCLNavigationBar(Form);
  Nav->Parent = Form;
  Nav->Align = alLeft;
  Nav->Mode = nbmAccordion;
  Nav->AllowMultiExpand = true;
  Nav->AnimateCollapse = true;
  Nav->Theme = utDark;
  // a group header (third parameter true), then the items under it
  Nav->Items->AddItem("Sales", "", true);
  Nav->Items->AddItem("Orders", "O", false);
  Nav->Items->AddItem("Invoices", "I", false)->Badge = "3";
  Nav->Items->AddItem("Admin", "", true);
  Nav->Items->AddItem("Users", "U", false)->Hint = "Manage the users";
  Nav->Items->AddItem("Billing", "B", false)->Enabled = false;
  Nav->SelectedIndex = 1;
  TPanel *Content = new TPanel(Form);
  Content->Parent = Form;
  Content->Align = alClient;
  Handler->Nav = Nav;
  Handler->Content = Content;
  Nav->OnItemClick = Handler->ItemClick;
  Nav->OnSelectionChange = Handler->SelectionChange;
  TButton *Button = new TButton(Form);
  Button->Parent = Content;
  Button->Caption = "Collapse";
  Button->OnClick = Handler->CollapseClick;
}
using System;
using System.Windows.Forms;
using esegece.sgcUICore;
using esegece.sgcNavigation;

internal class MainForm : Form
{
    private readonly TsgcWinFormsNavigationBar Nav = new TsgcWinFormsNavigationBar();
    private readonly Label lblPage = new Label { Dock = DockStyle.Fill };
    private readonly Button btnCollapse = new Button { Text = "Collapse", Dock = DockStyle.Top };

    public MainForm()
    {
        // an accordion bar on the left, dark theme, several groups open at once
        Nav.Dock = DockStyle.Left;
        Nav.Mode = TsgcNavigationMode.nbmAccordion;
        Nav.AllowMultiExpand = true;
        Nav.AnimateCollapse = true;
        Nav.Theme = TsgcUITheme.utDark;
        // a group header (third parameter true), then the items under it
        Nav.Items.AddItem("Sales", "", true);
        Nav.Items.AddItem("Orders", "O");
        Nav.Items.AddItem("Invoices", "I").Badge = "3";
        Nav.Items.AddItem("Admin", "", true);
        Nav.Items.AddItem("Users", "U").Hint = "Manage the users";
        Nav.Items.AddItem("Billing", "B").Enabled = false;
        Nav.SelectedIndex = 1;
        Nav.OnItemClick = (sender, item) => Text = "Clicked: " + item.Caption;
        Nav.OnSelectionChange = sender => lblPage.Text = Nav.Items[Nav.SelectedIndex].Caption + " page";
        // the Collapse button folds the bar into an icon rail with an animation
        btnCollapse.Click += (s, e) => Nav.Collapsed = !Nav.Collapsed;
        Controls.Add(lblPage);
        Controls.Add(btnCollapse);
        Controls.Add(Nav);
    }
}
dotnet add package esegece.sgcNavigation.WinForms

Die sgcNavigation-Demos ausführen

Die Demos SidebarApp und Accordion gibt es für VCL und C++ Builder, dazu eine FireMonkey-Version für Delphi, und in der .NET-Edition als WinForms-, WPF- und Avalonia-Projekte.

SidebarApp

SidebarApp

Eine Seitenleiste, die ein Page Control mit ausgeblendeten Reitern steuert, mit Symbolen, einem Badge, einem deaktivierten Eintrag, einer Collapse-Schaltfläche, einer Theme-Auswahl und einer sgcDashboard-KPI-Seite. Beweist das Muster einer Anwendungsoberfläche von Anfang bis Ende.

Accordion

Nur Registered Accordion

Drei Gruppen, Sales, Inventory und Admin, ein AllowMultiExpand-Schalter, Aktionsverknüpfungen und ein Klickprotokoll. Sie nutzt Aktionsverknüpfungen und braucht daher die Edition Registered oder die Testversion.

SidebarFMX

Die Seitenleisten-Demo, gebaut mit TsgcFMXNavigationBar für FireMonkey, nur für Delphi. Dieselben Einträge, Modi und Ereignisse wie in der VCL-Version, bereit für Windows, macOS und mobile Ziele.

Kompilierte Demos

Sofort lauffähige Programme jedes sgcUI-Produkts, nichts zu installieren.

sgcUI_bin.zip herunterladen →

Wo sgcNavigation enthalten ist

sgcNavigation ist in jeder sgcUI-Edition enthalten, ab Standard, und wird auch einzeln verkauft. sgcNavigation ist außerdem im All-Access-Paket enthalten.

sgcNavigation Einzelpaket

€149 / Entwickler, voller Quellcode, 1 Jahr Updates.

sgcNavigation kaufen → Preise ansehen →

sgcUI Standard

sgcNavigation, sgcGrid, sgcToolbar und sgcEditors, ab €380.

Standard ansehen →

sgcUI Professional

Standard plus sgcCharts, sgcDashboard und sgcGauges, ab €529.

Professional ansehen →

sgcUI Enterprise

Alle 14 sgcUI-Produkte, ab €699.

Enterprise ansehen →

Die kostenlose Community Edition (esegece.sgcNavigation.Community auf NuGet) hat alles außer den Aktionsverknüpfungen der Einträge.

FunktionCommunity (kostenlos)Registered
Seitenleisten- und Akkordeon-Modus✓✓
Animierte Reduzierung auf eine Symbolleiste✓✓
Symbole, Glyphs und Badges✓✓
Tastaturnavigation✓✓
Helle und dunkle Themes, Akzentfarbe✓✓
Headless-Ausgabe als PNG und SVG✓✓
Aktionsverknüpfungen (Delphi) und Command (.NET)−✓

Unterstützte Frameworks und Plattformen

Komponenten in sgcNavigation

KomponenteZiel
TsgcVCLNavigationBarDelphi und C++ Builder, VCL (sgcNavigation_VCL)
TsgcFMXNavigationBarDelphi und C++ Builder, FireMonkey (sgcNavigation_FMX)
TsgcNavigationItem, TsgcNavigationItems, TsgcNavigationModelFramework-neutrales Modell (sgcNavigation_Model)
TsgcWinFormsNavigationBar.NET, WinForms
TsgcWpfNavigationBar.NET, WPF
TsgcAvaloniaNavigationBar.NET, Avalonia
ZielKomponentePlattformen
Delphi 7 bis 13, VCLTsgcVCLNavigationBarWin32 und Win64
Delphi XE6 bis 13, FireMonkeyTsgcFMXNavigationBarWindows, macOS, iOS, Android und Linux (FMXLinux)
C++ Builder 2007 bis 13TsgcVCLNavigationBar, TsgcFMXNavigationBarGenerierte .hpp-Header und statische Bibliotheken
Delphi 10.2 bis 13, Framework-neutralModell und Headless-Renderer für PNG und SVGLinux64, zum Beispiel um eine Leiste auf einem Server zu rendern
.NET Framework 4.7.2, .NET 8, 9 und 10TsgcWinFormsNavigationBar, WPF- und Avalonia-LeistenWinForms, WPF und Avalonia

Häufig gestellte Fragen

Beides. Die Eigenschaft Mode schaltet am selben Steuerelement zwischen nbmSidebar und nbmAccordion um, mit denselben Einträgen und Ereignissen. So kannst du dich spät im Projekt umentscheiden oder beide Stile als Benutzereinstellung anbieten. Jeder Modus lässt sich außerdem auf die reduzierte Symbolleiste zusammenklappen.

Ja. Behandle OnSelectionChange und zeige die zu SelectedIndex passende Seite, zum Beispiel den Reiter eines TPageControl mit ausgeblendeten Reitern, oder erzeuge einen Frame bei Bedarf. Die Demo SidebarApp ist genau so aufgebaut und enthält eine sgcDashboard-KPI-Seite.

Ja. TsgcFMXNavigationBar unterstützt ab Delphi XE6 Windows, macOS, iOS, Android und Linux (FMXLinux), mit denselben Einträgen, Modi und Ereignissen wie die VCL-Leiste. FireMonkey-Bildlisten setzen Delphi XE8 oder neuer voraus, ältere Versionen nutzen das Glyph jedes Eintrags.

Nur die Aktionsverknüpfungen der Einträge, in .NET sind das die Eigenschaften Command und CommandParameter. Nutze stattdessen das OnClick des Eintrags oder das OnItemClick der Leiste. Jede andere Funktion, einschließlich Symbolleiste, Badges, Themes und Headless-Ausgabe, ist in Community enthalten. Siehe Editionen.

Nein. Der .NET-Port hat keine Designer-Verben und keinen Collection-Editor, Einträge werden daher nicht serialisiert und du fügst sie im Code hinzu, meist im Konstruktor des Formulars oder Fensters. In Delphi und C++ Builder wird die Items-Collection zur Entwurfszeit mit dem Standard-Collection-Editor bearbeitet.

Ja. Alle Größen sind logische Pixel multipliziert mit der Skalierung des Monitors, sodass Zeilen, Symbole und Badges bei jeder DPI scharf sind. In WinForms skalieren Breiten und Höhen mit DPI / 96 wie in VCL, in WPF und Avalonia sind es geräteunabhängige Einheiten.

Ja. sgcNavigationSaveToPNG und sgcNavigationSaveToSVG rendern eine Leiste aus ihrem Modell ohne Fenster und ohne VCL oder FireMonkey, auch unter Linux64 ab Delphi 10.2. Nutze das für Dokumentation, visuelle Regressionstests oder eine Webseite, die das Menü deiner Anwendung zeigt.

sgcNavigation Hilfe

3,000+Entwickler
20+Jahre
761+Komponenten
30+API-Integrationen
5Plattformen
30 Tage Geld-zurück-GarantieNicht zufrieden? Fordere innerhalb von 30 Tagen nach dem Kauf eine vollständige Rückerstattung an. Rückerstattungsrichtlinie ansehen

sgcNavigation heute testen

Die sgcUI-Testversion enthält sgcNavigation und jedes andere sgcUI-Produkt.