モダンなナビゲーションメニューを数分でアプリケーションに追加できます。1 つのコントロールがサイドバーにもアコーディオンにもなり、滑らかなアニメーションでアイコンレールに折りたたまれ、未読件数をバッジで表示し、すべてキーボードだけで操作できます。ライトとダークのテーマも標準で備え、タブ付きフォームはドキュメントのタブを Web ブラウザーのようにテーマ付きのタイトルバーに置きます。 1 つのモデルと 1 つのヘッドレスレンダラーが、FireMonkey、WinForms、WPF、Avalonia、Delphi 7 から 13 の VCL、C++ Builder でバーを動かすので、製品のすべてのフロントエンドで同じようにナビゲートできます。
ページの一覧を、ユーザーがすぐに現在地をつかめるナビゲーション構造に変える 20 の機能です。
業務アプリケーションで使われる 2 つのナビゲーションスタイルと、その中間にある細いレールを、1 つのコントロールでカバーします。
レイアウトとモード
多くの業務アプリケーションでは、メインフォームの左端に同じものが必要です。領域ごとにグループ化されたページの一覧と、現在のページがはっきり分かる表示です。TsgcVCLNavigationBar をフォームに置いて左に配置し、項目を追加するだけです。グループヘッダーは、下に続く行の見出しとして控えめな色で表示され、選択されることはありません。選択された行にはアクセントカラーの背景と幅 3 ピクセルのアクセントバーが付くので、ユーザーは常に現在位置を把握できます。ホバー状態、押下状態、ヒント、無効な行もすべて描画されるため、最初の実行から完成度の高いバーになります。
Mode := nbmSidebar が既定のスタイルですIsGroup で項目をグループヘッダーにできますItemHeight と GroupHeight で行の高さを設定しますScrollIntoView で任意の項目を表示できます
レイアウトとモード
設定画面や管理コンソールでは、画面に収まらないほどセクションが多いことがよくあります。Mode を nbmAccordion にすると、各グループヘッダーが、下の項目を開閉するセクションになります。右側にシェブロンが表示され、子項目はインデントされます。既定では同時に開くグループは 1 つだけなので、長いメニューもコンパクトに保てます。複数のセクションを同時に開きたい場合は、AllowMultiExpand を設定します。項目、イベント、コードはまったく変わりません。最初のヘッダーより前に置いた項目はどのグループにも属さず、常に表示されるため、セクションの上に Home や Dashboard を置くのに向いています。
Mode := nbmAccordion でバー全体を切り替えますExpanded でコードからグループを開閉できますAllowMultiExpand で複数のグループを開いたままにできますIndent で子項目のインデント幅を設定しますレイアウトとモード
幅の広いサイドバーは、ユーザーが見たいデータの領域を奪ってしまいます。Collapsed を設定すると、バーは約 150 ms で展開時の幅から細いアイコンレールへ折りたたまれます。レールではアイコンだけが描画され、キャプションはヒントになり、グループヘッダーは区切り線に、バッジはドットになるので、大切な情報は失われません。バーが自分で幅を設定するため、隣のコンテンツは alClient で自然に追従します。Collapsed プロパティをハンバーガーボタン、ユーザー設定、フォームの幅などに連動させれば、サイドバーモードでもアコーディオンモードでも同じようにレールが開閉します。
Collapsed で 2 つの幅を切り替えますExpandedWidth（220）と CollapsedWidth（56）は論理ピクセルで指定しますAnimateCollapse でアニメーションのオンとオフを切り替えますOnCollapsedChange でレールの開閉を通知しますレイアウトとモード
ナビゲーションバーは、ユーザーに表示する内容を切り替えてこそ役に立ちます。有効な項目をクリックまたはタップすると、バーはその項目を選択し、OnItemClick を発生させてから、項目の OnClick を実行します。OnSelectionChange は、対応するページを表示するための唯一の場所です。たとえば、タブを非表示にした TPageControl のタブを切り替えます。SidebarApp デモはまさにこの方法で作られています。SelectedIndex を使うと、コードから現在のページを読み取ったり設定したりできます。ユーザーがまだ使えない項目は無効にしてヒントで理由を説明するか、見せたくないロールには非表示にできます。その間も選択のロジックは正しく動作します。
SelectedIndex はユーザーが選んだページですOnSelectionChange でページやフレームを切り替えますOnItemClick と、項目ごとの OnClick がありますEnabled、Hint、Visible を設定できます検索付きの多階層ツリー、ドキュメントタブ、パンくずリスト、コマンドパレットを、バーと同じフレームワーク非依存のモデルの上に構築しています。
ナビゲーションシェル
大規模なアプリケーションでは、フラットなページ一覧では足りなくなります。Mode を nbmTree に設定すると、バーは必要な深さまで階層化できるツリーになります。項目は引き続きフラットなコレクションで、項目の Depth がその階層を決めるため、バーを構築するコードはほとんど変わりません。各階層はインデントされ、各親項目は折りたたむことができます。ShowSearch を有効にすると、項目の上の検索行が入力に合わせてツリーを絞り込み、一致した項目の親を開いたままにして、一致した文字を強調表示します。あいまい一致では、'stg' から 'Settings' が見つかります。ツリーモードと検索は、すべてのエディションに含まれます。
Mode := nbmTree と項目ごとの DepthExpandAll、CollapseAll、Expand(aIndex, aRecursive)FilterMode に nfmContains または nfmFuzzy を指定できる FilterShowSearch で検索行を表示し、Esc でクリア* で枝全体を展開ナビゲーションシェル
ドキュメント型のアプリケーションは、開いているページをタブとして表示します。TsgcFMXNavigationTabs、TsgcVCLNavigationTabs、および WinForms、WPF、Avalonia のタブストリップは、アイコン、タイトル、閉じるボタン、変更済みを示すドットを持つタブに加えて、新しいタブのボタンとすべてのタブの一覧を描画します。タブが収まらない場合は、TabSizing が縮小するか、スクロールボタンが表示されます。タブの Control は、そのタブがアクティブなときにストリップが表示するページです。登録版では、ユーザーがタブをドラッグして並べ替えたり、残したいタブを固定したり、タブをストリップの外へドラッグして独自のウィンドウで開いたりでき、SaveLayout がそのレイアウトを次回の実行まで保持します。
Tabs.AddTab、ActiveIndex、ControlTabSizing、CloseButtons、ShowNewButton、ShowListButtonOnTabClose で拒否可能Pinned タブ、OnTabTearOff、SaveLayout と LoadLayoutナビゲーションシェル
深いツリーでは、現在地を確認して上の階層へ移動する手段が必要です。パンくずリストは、パスを Mail、Folders、Work のようなセグメントの並びとして表示します。セグメントをクリックするとそこへ戻り、セグメントの後ろのシェブロンをクリックすると、その子項目が一覧表示されて別の場所へ移動できます。ナビゲーションバーにバインドすると選択中の項目に追従します。Path や Segments から自分で設定することもできます。パスが長すぎる場合は、先頭のセグメントがオーバーフローボタンにまとめられます。登録版では、空白部分のクリック、F4、Ctrl+L のいずれかで、パンくずリストがファイルマネージャーのアドレスバーのように完全なパスを編集できる入力欄に切り替わります。
NavigationBar でパンくずリストをバーにバインドPath、PathDelimiter、OnGetChildrenOnSegmentClick と AutoTruncateOnPathEdit による編集モードナビゲーションシェル 登録版のみ
上級ユーザーは、メニューをたどるより入力することを好みます。Ctrl+Shift+P を押すとコマンドパレットがウィンドウの上部に開き、数文字入力するだけで、あいまい一致ですべてのコマンドが並べ替えられます。たとえば 'tgsb' で 'Toggle sidebar' が見つかり、一致した文字が強調表示され、カテゴリやパスは薄い色で、ショートカットは右側に表示されます。クエリが空のときは、最近使ったコマンドが最初に表示されます。パレットは、自身のコマンドと、追加したすべてのコマンドソースを一覧表示します。ナビゲーションバーの項目、リボンやツールバーのボタン (Delphi)、アクションリストのアクション、または独自のソースです。
Commands.AddCommandSources.AddSourceSaveRecent と LoadRecent が最近使った一覧を保持ICommandFireMonkey、VCL、WinForms、WPF、Avalonia の登録版。IsgcUICommandSource インターフェイスはすべてのエディションに含まれます。
ヘルプのトピックを読む コマンドソースナビゲーションシェル
ブラウザー、ターミナル、モダンなエディターは、タブをウィンドウのタイトルバーに置き、ドキュメントが画面の高さをフルに使えるようにしています。タブ付きフォームは、アプリケーションでも同じことを行います。フォームに配置してタブストリップにリンクするだけで、sgcUI がネイティブのタイトルバーを取り除き、ウィンドウアイコン、タブ、新規タブボタン、最小化、最大化、閉じるボタンを備えたテーマ付きのタイトルバーを、アプリケーションの sgcUI テーマ（Classic または Fluent、ライトまたはダーク）で描画します。ウィンドウは影、サイズ変更の境界、最大化時の動作を保ち、最大化ボタンにポインターを置くと Windows 11 がスナップレイアウトを表示します。最後のタブの右側の空きスペースをドラッグすると、ウィンドウを移動できます。登録版では、ユーザーがタブをストリップの外へドラッグして新しいウィンドウにしたり、別のウィンドウのタイトルバーにドロップしたりできます。Web ブラウザーと同じ操作です。
TsgcVCLNavigationTabbedForm と TsgcFMXNavigationTabbedForm（Delphi と C++ Builder）、TsgcWinFormsNavigationTabbedForm、TsgcWpfNavigationTabbedWindow、TsgcAvaloniaNavigationTabbedWindow（.NET）Tabs でタブストリップをリンクします。Delphi では Notebook でノートブックのストリップをタイトルバーに移し、ページはノートブックに残りますTabs で XAML から設定できますTearOffMode は切り離したタブをポインターの下のウィンドウに移し、ttmNewForm はポインターに追従する OnCreateTearOffForm の新しいウィンドウでタブを開きますタブ付きフォームは Community 版を含むすべてのエディションに含まれます。切り離しは、タブの切り離しと同じく登録版に含まれます。テーマ付きフレームにはデスクトップコンポジションが有効な Windows が必要で、FireMonkey では Windows のみに適用されます。macOS、Linux、iOS、Android ではネイティブのタイトルバーのままです。
ヘルプのトピックを読む ウィンドウフレーム .NET のタブ付きフォームIDE スタイルのワークスペースです。ツールパネルは各辺にドッキングしたり、自動的に隠したり、フローティングしたりでき、中央にはタブ付きドキュメント領域があり、レイアウトは JSON として保存されます。
ドッキングマネージャー 登録版のみ
ツールウィンドウが多いアプリケーションには、ユーザーが自分で配置できるワークスペースが必要です。TsgcVCLDockManager、TsgcFMXDockManager、TsgcWinFormsDockManager、TsgcWpfDockManager、TsgcAvaloniaDockManager は、ツールパネルをフォームの 4 辺に、スプリッター付きの入れ子の分割とタブ付きグループとしてドッキングします。ユーザーがキャプションまたはタブをドラッグすると、ドロップガイドが配置先を示します。ポインターの下にあるグループのコンパスは、そのグループを辺で分割するか、パネルをタブとして追加し、辺のガイドはサイト全体の端にドッキングし、アクセントカラーのプレビュー矩形は、パネルが占める領域を示します。Esc でドラッグをキャンセルできます。 Avalonia ドッキングのページで、TsgcAvaloniaDockManager を XAML と C# で紹介しています。
Panels.Add に Name、Caption、Placement、DockSize を指定し、独自のコントロールを Control に設定しますDockPanel、ClosePanel、ShowPanel、ActivatePanelOnPanelDock で、ドッキング、フロート、自動非表示の変更を拒否できますドッキングマネージャー 登録版のみ
たまにしか必要としないツールパネルが、常に場所を取るべきではありません。キャプションのピンボタンでそのグループを自動非表示にすると、パネルはフォームの端にある細いストリップのタブになり、マウスを重ねるかタブをクリックすると、パネルがコンテンツの上にスライドして現れます。ユーザーが別の場所で作業すると元に戻り、フライアウトのピンボタンで、以前の辺とサイズのままグループを再びドッキングできます。iOS と Android では、タップでフライアウトが開きます。
Model.SetAutoHide(aPanel, True)AutoHideDelay はマウスを重ねてからの遅延で、既定値は 400 ms ですCanAutoHide。ドキュメントは自動非表示になりませんドッキングマネージャー 登録版のみ
ガイドから離れた場所にドロップしたパネルは、独自のウィンドウとしてフローティングし、ユーザーは別の場所や別のモニターへ移動できます。フロートはドックサイトと同じようにレイアウトを持つため、ほかのパネルを横に並べて、またはタブとしてドッキングでき、キャプションをダブルクリックすると再びドッキングします。フロートは、フォームが所有しタスクバーに表示されない枠なしのツールウィンドウで、描画されたキャプションとサイズ変更用の枠を持ち、それぞれが自分のモニターのスケールを使います。VCL、WinForms、WPF、Avalonia のデスクトップアプリケーションと、Windows および macOS 上の FireMonkey で動作します。iOS と Android ではパネルはフローティングせず、ドラッグ中はガイドだけが表示されます。
FloatPanel(aPanel, aLeft, aTop)AllowFloating とパネルごとの CanFloatPlacement := dplFloat で、パネルを FloatWidth x FloatHeight のフローティング状態で開始しますドッキングマネージャー 登録版のみ
ドックサイトの中央にはドキュメントが置かれます。1 つ以上のドキュメントグループがあり、それぞれの上部にタブストリップがあります。ストリップはナビゲーションのタブと同じように動作し、ドラッグによる並べ替え、先頭に固定されるドキュメント、閉じるボタン、変更済みを示すドット、中ボタンクリックで閉じる操作、Ctrl+Tab、すべてのタブの一覧を備えます。ドキュメントタブをコンパスの辺の矢印へドラッグすると、領域が左右または上下に並ぶ 2 つのドキュメントグループに分割されます。切り離してフローティングにしたり、ダブルクリックでそのグループを最大化したりもできます。新規タブボタンは OnNewDocument を発生させ、コードが次のドキュメントを作成します。
Kind := dpkDocument、Pinned、ModifiedDocumentTabSizing、DocumentCloseButtons、DocumentShowNewButton、DocumentShowListButtonOnActiveDocumentChange がアクティブなドキュメントを通知しますOnPanelClose で、ドキュメントを開いたままにできますドッキングマネージャー 登録版のみ
ユーザーは、パネルが前回の場所にあることを期待します。SaveLayout は、配置全体をコンパクトな JSON として書き出します。分割とそのサイズ、グループとそのアクティブなパネル、各辺の自動非表示グループ、境界を含むフロート、最大化されたグループ、非表示のパネルが含まれます。次回の起動時に LoadLayout がそれを復元します。テキストは Delphi と .NET で同じなので、1 つのレイアウトファイルを両方で使えます。レイアウトに名前があるのにフォームにまだ存在しないパネル(たとえば開いていたドキュメント)は OnRestorePanel に届き、コードがそのコンテンツを作成するか、破棄します。
SaveLayout、SaveLayoutToFile、SaveLayoutToStreamLoadLayout、LoadLayoutFromFile、LoadLayoutFromStream は、認識できないテキストでは False を返し、何も変更しませんOnRestorePanelFireMonkey、VCL、WinForms、WPF、Avalonia の登録版で、C++ Builder にも対応します。キーボード、UI Automation、右から左、テーマ、ハイ DPI を含みます。
ヘルプのトピックを読む行には、キャプションだけでなく、アイコン、件数、すでに書いたロジックへのリンクを持たせられます。
情報を伝える項目
ページを開く前に、対応が必要なものがあることをユーザーに伝えたい場合があります。項目に Badge を設定します。未読件数や New といった言葉などです。すると、バーは行の右側にアクセントカラーのピルとして描画し、見やすい方の黒または白の文字を使います。値が変わるたびにコードから設定すれば、バーは自動的に再描画されます。折りたたんだレールでは、バッジはアイコン上のドットになります。バッジは単なるテキストなので、件数、短いラベル、状態を表す言葉のいずれも、独自の描画コードなしで同じプロパティで扱えます。
Badge は項目ごとの短いテキストですBadge が空の場合は何も描画されませんAccentColor が使われますHint と組み合わせると、件数の意味を説明できます
情報を伝える項目
すべての行にアイコン用のスロットがあります。すでに使っているイメージリストをバーに指定し、項目ごとに ImageIndex を設定すると、マスク付きや 32 ビットの画像は一度だけ変換され、リストが変更されるまでキャッシュされます。まだイメージリストがない場合は、代わりに Glyph を設定します。テーマの色に従う文字や短い記号で、デモの見た目はこの方法です。無効な項目の画像は 40 パーセントの不透明度で描画されるため、状態が一目で分かります。両方を混在させても問題ありません。イメージインデックスを持つ項目は画像を、それ以外はグリフを表示するので、アイコンを少しずつ追加できます。
Images と ImageIndexGlyph情報を伝える項目 登録版のみ
TActionList を使って作られたアプリケーションでは、コマンド、キャプション、有効かどうかのルールがすでに 1 か所にまとまっています。Action プロパティで項目を任意の VCL または FireMonkey の TAction にリンクすると、Caption、Enabled、Visible、Hint、ImageIndex がアクションに追従します。クリックすると、バーを ActionComponent としてアクションが実行され、OnUpdate がアイドル時に実行されるため、アクションが無効になるとすぐに項目がグレーアウトされます。.NET では、同じ役割を Command と CommandParameter が担います。1 つの TActionList で、フォームのメニュー、ツールバー、キーボードショートカットをまとめて制御できます。
Action で項目を任意の TBasicAction にリンクしますOnClick は、アクションの代わりに実行されますSGC_NAVIGATION_ACTIONS の下でコンパイルされますCommand と CommandParameterCommunity 版では、アクションの代わりに項目の OnClick またはバーの OnItemClick を割り当ててください。
ヘルプのトピックを読むバーをネイティブらしく感じさせ、アプリケーションの他の部分と一貫させるための細部です。
キーボード、テーマ、出力
上級ユーザーはマウスを使わずにページを切り替えます。アクセシビリティの審査でも求められる機能です。バーは Tab キーでフォーカスを受け取り、フォーカスされた行は表示されている有効な項目の間を移動します。上下キーで 1 つずつ移動し、Home と End で先頭と末尾に移動し、Enter または Space で実行します。アコーディオンでは、左キーでグループを閉じ、右キーで開きます。破線のフォーカス枠はキーボードを使っている間だけ表示され、フォーカスは選択中のページとは別に管理されます。FireMonkey のバーでも CanFocus を通じて同じキーが使えるため、デスクトップのユーザーはどのプラットフォームでも同じ動作になります。
TabStop が既定でオンですFocusedIndex がキーボードで選んでいる行ですSelectedIndex は選ばれたページのままです
キーボード、テーマ、出力
アプリケーションのテーマを無視するメニューは、取って付けたように見えます。Theme は、共有の sgcUICore トークンから、背景、枠線、文字、グループヘッダー、ホバー、アクセントの各色を設定します。そのため、同じ Theme を指定したバーと sgcDashboard は完全に調和します。AccentColor を使うと、選択バー、フォーカス枠、バッジのアクセントをブランドカラーに置き換えられます。ダッシュボードのタイルに配置したバーは、ダッシュボードのテーマに自動的に従います。実行時にテーマを切り替えるとバーはすぐに再描画されるので、設定ページのダークモード切り替えにそのまま使えます。
Theme: utDefault（既定、アプリケーションのテーマに従う）、utLight、または utDarkAccentColor は $AARRGGBB 形式の値で、0 ならテーマのアクセントを使います
キーボード、テーマ、出力
ドキュメント、ビジュアルテスト、Web バックエンドでは、メニューそのものではなく、メニューの画像が必要になることがあります。sgcNavigation_Render のレンダラーは、ウィンドウも VCL や FireMonkey も使わずに TsgcNavigationModel を描画するため、コンソールプログラム、サービス、サーバーでも、同じバーを PNG や SVG として生成できます。このユニットはすべてのプラットフォームでビルドでき、Linux64 も含まれます。scale パラメーターを使えば、高 DPI の画面でも鮮明な画像が得られます。イメージリストをレンダラーに渡すと、出力された画像には実行中のアプリケーションと同じアイコンが表示されます。
sgcNavigationSaveToPNG は PNG ファイルまたはストリームに書き出しますsgcNavigationSaveToSVG は同じバーを SVG として書き出しますsgcNavigationRender は任意の sgcUICore キャンバスに描画しますsgcUI スイートのデモに含まれる sgcNavigation：組み込みのシミュレーションデータでオフラインで動作する完全なアプリケーションです。
ERP のサイドバーは 10 個のモジュールを 6 つの見出しにまとめます。
Altamira ERP →
トレーディングデスクのシェル：デスクの横に折りたたんだアイコンレール。
Altamira Markets →
ライトテーマの制御室のシェル。
Altamira Plant →
リスクと過剰割り当ての人員をライブのバッジで示す PMO のサイドバー。
Altamira PMO →
すでに数十のフォームがあり、メインウィンドウがそれらをメニューバーから開いているとします。左にサイドバーを置き、領域ごとに 1 項目を割り当て、OnSelectionChange でタブを非表示にした TPageControl のタブを切り替えます。バッジで保留中の注文や未読メッセージを示し、アイコンレールでフォームに広い領域を返せます。SidebarApp を実行すると、sgcDashboard ページと組み合わせたこのパターンの動作を確認できます。
設定画面では、Sales、Inventory、Admin のような少数の見出しの下に、数十のページがまとめられます。アコーディオンは、同時に 1 つのセクションを開いたままにし、AllowMultiExpand を使えば複数を開けます。アクションリンクは、TActionList のコマンドと有効かどうかのルールをそのまま再利用します。キーボードのユーザーは、矢印キーでセクション間を移動できます。Accordion デモでは、3 つのグループ、展開の切り替え、クリックログを確認できます。
Windows、macOS、iOS、Android で動く FireMonkey アプリケーションが、プラットフォームごとに異なるメニューを必要とするべきではありません。TsgcFMXNavigationBar は VCL のバーと同じ項目、モード、イベントを備え、WinForms、WPF、Avalonia 向けの .NET バーも同じ名前に従っています。Delphi のデスクトップアプリと .NET のツールの両方を提供するチームでも、考え方を 1 つに保てます。SidebarFMX は、サイドバーデモの FireMonkey 版です。
FireMonkey、C#、Delphi VCL、C++ Builder で同じ API を使えます。グループ、バッジ、無効な項目、Collapse ボタンを備えたアコーディオンバーです。FireMonkey と C# のタブでは、タブストリップとコマンドパレットが加わります。
uses
FMX.Types, FMX.Controls, FMX.Forms, FMX.StdCtrls,
sgcUICore_Theme, sgcNavigation_Model, sgcNavigation_FMX;
procedure TMainForm.CreateNavigation;
begin
// an accordion bar on the left, dark theme, several groups open at once
FNav := TsgcFMXNavigationBar.Create(Self);
FNav.Parent := Self;
FNav.Align := TAlignLayout.Left;
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);
FNav.Items.AddItem('Users', 'U').Hint := 'Manage the users';
FNav.Items.AddItem('Billing', 'B').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.Text := 'Collapse';
FButton.OnClick := ButtonClick;
end;
procedure TMainForm.NavItemClick(Sender: TObject; aItem: TsgcNavigationItem);
begin
Caption := 'Clicked: ' + aItem.Caption;
end;
procedure TMainForm.NavSelectionChange(Sender: TObject);
begin
FPage.Text := FNav.Items[FNav.SelectedIndex].Caption + ' page';
end;
procedure TMainForm.ButtonClick(Sender: TObject);
begin
FNav.Collapsed := not FNav.Collapsed;
end;uses
FMX.Types, FMX.Controls,
sgcNavigation_Tabs, sgcNavigation_Tabs_FMX,
sgcNavigation_Palette, sgcNavigation_Palette_FMX;
procedure TMainForm.CreateShell;
var
oTab: TsgcNavigationTab;
oCommand: TsgcCommandPaletteCommand;
begin
// a tab strip on top: every tab shows its own page
FTabs := TsgcFMXNavigationTabs.Create(Self);
FTabs.Parent := FContent;
FTabs.Align := TAlignLayout.Top;
oTab := FTabs.Tabs.AddTab('Orders');
oTab.Control := FOrdersPage;
FTabs.ActiveIndex := oTab.Index;
// the command palette (Registered edition), Ctrl+Shift+P opens it
FPalette := TsgcFMXCommandPalette.Create(Self);
oCommand := FPalette.Commands.AddCommand('Toggle sidebar', 'View', 'Ctrl+B');
oCommand.OnExecute := ButtonClick;
// every item of the bar becomes a "Go to" command
FPalette.Sources.AddSource(FNav);
end;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;ブラウザースタイルのウィンドウ: TsgcVCLNavigationTabbedForm がタブストリップをテーマ付きのタイトルバーに移します。
uses
Classes, Controls, Forms,
sgcNavigation_Tabs, sgcNavigation_Tabs_VCL, sgcNavigation_TabbedForm_VCL;
procedure TMainForm.CreateTabbedForm;
begin
// a browser style strip with close buttons and a new tab button
FTabs := TsgcVCLNavigationTabs.Create(Self);
FTabs.Parent := Self;
FTabs.ShowNewButton := True;
FTabs.CloseButtons := tcbAlways;
FTabs.Tabs.AddTab('Home');
FTabs.Tabs.AddTab('Orders');
FTabs.ActiveIndex := 0;
// the window frame: the strip moves into the themed title bar
FTabbedForm := TsgcVCLNavigationTabbedForm.Create(Self);
FTabbedForm.Tabs := FTabs;
// Registered edition: a tab dropped on another tabbed window moves there
FTabbedForm.TearOffMode := ttmEvent;
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);
}
}// tabs and a command palette on the same form
private readonly TsgcWinFormsNavigationTabs Tabs = new TsgcWinFormsNavigationTabs();
private readonly TsgcWinFormsCommandPalette Palette = new TsgcWinFormsCommandPalette();
private void CreateShell(Control aOrdersPage)
{
// a tab strip on top: every tab shows its own page
Tabs.Dock = DockStyle.Top;
TsgcNavigationTab oTab = Tabs.Tabs.AddTab("Orders");
oTab.Control = aOrdersPage;
Tabs.ActiveIndex = oTab.Index;
Controls.Add(Tabs);
// the command palette (Registered edition), Ctrl+Shift+P on this form opens it
Palette.OwnerForm = this;
TsgcCommandPaletteCommand oCommand = Palette.Commands.AddCommand("Toggle sidebar", "View", "Ctrl+B");
oCommand.OnExecute = sender => Nav.Collapsed = !Nav.Collapsed;
// every item of the bar becomes a "Go to" command
Palette.Sources.AddSource(Nav);
}dotnet add package esegece.sgcNavigation.WinFormsNavigationShell と DockingShell のデモは FireMonkey、VCL、WinForms、WPF、Avalonia 向けに付属します。サイドバーデモは FireMonkey 向けに付属し、SidebarApp と Accordion のデモは .NET エディションに WinForms、WPF、Avalonia のプロジェクトとして、また Delphi VCL と C++ Builder 向けに付属します。
FireMonkey 向けの完全なナビゲーションシェルです (Delphi のみ)。左に検索行付きのツリー、開いているページごとのタブ、ツリーに追従するパンくずリスト、バーの項目とアクションリストを一覧表示するコマンドパレット (Ctrl+Shift+P) を備えます。ダークテーマと右から左のレイアウトの切り替えも含まれます。パレットを使うため、登録版または体験版が必要です。
VCL と FireMonkey 向けの、ドッキングマネージャーの上に構築した IDE スタイルのシェルです。左にナビゲーションバーのツリーを Explorer として、右に Properties、下部に自動的に隠された Output、中央に固定タブと変更済みタブを持つメモのドキュメントを配置します。コマンドパレットにはパネルごとに 1 つの Window コマンドが並び、テーマの切り替えと Reset layout ボタンを備え、レイアウトは終了時に JSON へ保存されて次回の起動時に読み込まれます。
.NET エディションのドッキングシェルです。WinForms 向けの DockingShell、DockingShellWpf、DockingShellAvalonia があり、いずれもドッキング、自動非表示、フローティングの各パネル、ドキュメント領域、保存されたレイアウトを備えます。
タイトルバーにタブを置くブラウザースタイルのウィンドウで、VCL 版と FireMonkey 版があり、C++ Builder 版も付属します。新規タブボタン、閉じるボタン、ライト、ダーク、Fluent ライト、Fluent ダークのテーマ選択を備えています。タブをストリップの外へドラッグするとポインターに追従する新しいウィンドウで開き、別のウィンドウのタイトルバーにドロップできます。切り離しには登録版が必要です。.NET 版では、WinForms 用の TabbedForm、TabbedFormWpf、TabbedFormAvalonia として提供します。
FireMonkey 向けの TsgcFMXNavigationBar で作ったサイドバーデモで、Delphi 専用です。VCL 版と同じ項目、モード、イベントを備え、Windows、macOS、モバイルの各ターゲットで使えます。
非表示タブの付いたページコントロールをサイドバーで操作するデモです。アイコン、バッジ、無効な項目、Collapse ボタン、テーマのコンボボックス、sgcDashboard の KPI ページを備えています。アプリケーションシェルのパターンを最初から最後まで確認できます。
Sales、Inventory、Admin の 3 つのグループ、AllowMultiExpand の切り替え、アクションリンク、クリックログを備えたデモです。アクションリンクを使うため、Registered 版または体験版が必要です。
Delphi (VCL) 向けの QuickStart デモ 5 つが Demos\Navigation\Delphi\00.QuickStart に入っています。PDF ガイドが、それらを順を追って解説します。最初のナビゲーションバー、コードで組み立てるメニュー、ドキュメントタブ、テーマとスタイル、小さなメールクライアント。
RAD Studio 13.2 Florence では、TNavigationView と TTabView という 2 つの VCL コントロールが追加されました。アプリケーションが VCL のみで、13.2 以降でビルドするなら、これらは優れた標準の選択肢です。sgcNavigation が価値を発揮するのは、同じナビゲーションを FireMonkey や .NET でも動かす必要がある場合、古い Delphi でビルドする場合、そしてパンくずリスト、コマンドパレット、検索付きツリーが必要な場合です。
TNavigationView は、通常モードとコンパクトモード、画像、複数行テキスト、スクロール、ドラッグによる並べ替えに対応した縦方向の項目リストで、項目をページコントロール、フレーム、TCardPanel にバインドします。TTabView は TTabSet の現代的な派生版で、タブにフォームやその他のコントロールを配置でき、各タブには画像、複数行テキスト、閉じるボタンがあり、タブ追加ボタン、すべてのタブのドロップダウンリスト、スクロールボタンも備えます。どちらもよく設計されており、VCL のプログラミングモデルに沿っているため、13.2 での新しい VCL プロジェクトでは試す価値があります。
sgcNavigation は、すべてのホストの背後に、フレームワーク非依存の 1 つのモデルと 1 つのヘッドレスレンダラーを保っています。バーと、今回のリリースで加わるタブ、パンくずリスト、多階層ツリー、コマンドパレットは、FireMonkey、WinForms、WPF、Avalonia、Delphi 7 から 13 の VCL で同じように動作するため、デスクトップ、モバイル、.NET のフロントエンドを持つ製品でも、どこでも同じようにナビゲートできます。
| 項目 | sgcNavigation | TNavigationView と TTabView (VCL、RAD Studio 13.2) |
|---|---|---|
| フレームワーク | FireMonkey、WinForms、WPF、Avalonia、VCL | VCL |
| Delphi と C++ Builder のバージョン | Delphi 7 から 13 (VCL)、Delphi XE6 から 13 (FireMonkey)、C++ Builder 2007 から 13 | RAD Studio 13.2 以降 |
| .NET ホスト | .NET Framework 4.7.2、.NET 8、9、10 上の WinForms、WPF、Avalonia | 該当なし (VCL コントロールのため) |
| Linux でのヘッドレスレンダリング | Delphi 10.2 以降の Linux64 で PNG と SVG を出力 | 13.2 のドキュメントには記載がありません |
| フレームワーク間で共有されるモデル | Delphi と .NET で同じ名前を使う、フレームワーク非依存の 1 つのモデル | 13.2 のドキュメントには記載がありません |
| パンくずリスト | バーの選択ノードに追従できるパンくずリストバー | 13.2 のドキュメントには記載がありません |
| コマンドパレット | コマンド、項目、アクションに対するあいまい検索を備えた、キーボード操作中心のパレット | 13.2 のドキュメントには記載がありません |
| ツリー内検索 | 一致した項目の親を表示したままにする検索行を備えた多階層ツリー | 13.2 のドキュメントには記載がありません |
TNavigationView と TTabView の詳細は、Embarcadero の RAD Studio 13 Florence Release 2 のリリースノートによるものです。
sgcNavigation は、Standard 以上のすべての sgcUI エディションに含まれており、単体でも販売しています。All-Access バンドルにも含まれています。
無料の Community 版（NuGet の esegece.sgcNavigation.Community）には、ツリーモードと検索を備えたバー、基本的なタブとパンくずリスト、タイトルバーにタブを置くタブ付きフォーム、コマンドソースのインターフェイスが含まれます。登録版では、コマンドパレット、タブの並べ替え、固定タブ、切り離しとタブレイアウトの保存、パンくずリストの編集モード、ドッキングマネージャー、項目のアクションリンクが加わります。
| 機能 | Community（無料） | 登録版 |
|---|---|---|
| サイドバーモードとアコーディオンモード | ✓ | ✓ |
| アニメーション付きのアイコンレールへの折りたたみ | ✓ | ✓ |
| アイコン、グリフ、バッジ | ✓ | ✓ |
| キーボードナビゲーション | ✓ | ✓ |
| ライトとダークのテーマ、アクセントカラー | ✓ | ✓ |
| ヘッドレスでの PNG と SVG 出力 | ✓ | ✓ |
| 多階層ツリーモードと検索 | ✓ | ✓ |
| タブ: サイズ調整、閉じるボタン、一覧ボタンと新規タブボタン、スクロール、キーボード | ✓ | ✓ |
| タブ付きフォーム: テーマ付きタイトルバーにタブを配置 | ✓ | ✓ |
| パンくずリスト: セグメント、シェブロン、オーバーフロー、バーへのバインド | ✓ | ✓ |
| コマンドソース (IsgcUICommandSource) | ✓ | ✓ |
| コマンドパレット | − | ✓ |
| ドラッグによるタブの並べ替え、固定タブ、切り離し、タブレイアウトの保存 | − | ✓ |
| タブ付きフォームのタブを新しいウィンドウへ切り離し | − | ✓ |
| パンくずリストの編集モード | − | ✓ |
| ドッキングマネージャー | − | ✓ |
| アクションリンク（Delphi）と Command（.NET） | − | ✓ |
| コンポーネント | ターゲット |
|---|---|
| TsgcFMXNavigationBar | Delphi と C++ Builder、FireMonkey（sgcNavigation_FMX） |
| TsgcWinFormsNavigationBar | .NET、WinForms |
| TsgcWpfNavigationBar | .NET、WPF |
| TsgcAvaloniaNavigationBar | .NET、Avalonia |
| TsgcVCLNavigationBar | Delphi と C++ Builder、VCL（sgcNavigation_VCL） |
| TsgcFMXNavigationTabs, TsgcFMXNavigationBreadcrumb, TsgcFMXCommandPalette | Delphi と C++ Builder、FireMonkey（sgcNavigation_Tabs_FMX, sgcNavigation_Palette_FMX） |
| TsgcWinFormsNavigationTabs, TsgcWpfNavigationTabs, TsgcAvaloniaNavigationTabs | .NET、WinForms、WPF、Avalonia。対応する Breadcrumb クラスと CommandPalette クラスを含みます |
| TsgcVCLNavigationTabs, TsgcVCLNavigationBreadcrumb, TsgcVCLCommandPalette | Delphi と C++ Builder、VCL（sgcNavigation_Tabs_VCL, sgcNavigation_Palette_VCL） |
| TsgcVCLNavigationTabbedForm, TsgcFMXNavigationTabbedForm | Delphi と C++ Builder、VCL と FireMonkey（sgcNavigation_TabbedForm_VCL、sgcNavigation_TabbedForm_FMX）、Windows ではテーマ付きタイトルバー |
| TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow, TsgcAvaloniaNavigationTabbedWindow | .NET、WinForms、WPF、Avalonia |
| TsgcVCLDockManager, TsgcFMXDockManager | Delphi と C++ Builder、VCL と FireMonkey（sgcNavigation_Dock_VCL, sgcNavigation_Dock_FMX）、登録版 |
| TsgcWinFormsDockManager, TsgcWpfDockManager, TsgcAvaloniaDockManager | .NET、WinForms、WPF、Avalonia、登録版 |
| TsgcNavigationItem, TsgcNavigationItems, TsgcNavigationModel | フレームワーク非依存のモデル（sgcNavigation_Model） |
| ターゲット | コンポーネント | プラットフォーム |
|---|---|---|
| Delphi XE6 から 13、FireMonkey | TsgcFMXNavigationBar | Windows、macOS、iOS、Android、Linux（FMXLinux） |
| .NET Framework 4.7.2、.NET 8、9 と 10 | TsgcWinFormsNavigationBar、WPF と Avalonia のバー | WinForms、WPF、Avalonia |
| Delphi 7 から 13、VCL | TsgcVCLNavigationBar | Win32 と Win64 |
| C++ Builder 2007 から 13 | TsgcVCLNavigationBar、TsgcFMXNavigationBar | 生成された .hpp ヘッダーとスタティックライブラリ |
| Delphi 10.2 から 13、フレームワーク非依存 | モデルとヘッドレスの PNG および SVG レンダラー | Linux64。たとえばサーバー上でバーを描画できます |
アプリケーションが VCL のみであれば、RAD Studio 13.2 の TNavigationView と TTabView は優れた標準の選択肢であり、喜んでお勧めします。同じナビゲーションを macOS、iOS、Android、Linux の FireMonkey や、WinForms、WPF、Avalonia のアプリケーションでも動かす必要がある場合、チームの一部がまだ古い Delphi や C++ Builder でビルドしている場合、あるいはサイドバーの上にパンくずリスト、コマンドパレット、検索付きの多階層ツリーが欲しい場合は、sgcNavigation のほうが適しています。モデルとヘッドレスの PNG と SVG レンダラーは、すべてのホストで共有されます。比較表は選び方をご覧ください。
はい、登録版にあります。TsgcFMXCommandPalette、TsgcVCLCommandPalette、および WinForms、WPF、Avalonia のパレットは Ctrl+Shift+P で開き、ユーザーの入力に合わせてあいまい一致でコマンドを並べ替え、最近使ったコマンドを最初に表示します。パレットは自身のコマンドに加えて、追加したすべてのコマンドソースを一覧表示します。ナビゲーションバーの項目、Delphi ではリボンやツールバーのコマンド、アクションリストのアクション、または IsgcUICommandSource インターフェイスによる独自のソースです。.NET ではコマンドに ICommand を持たせることができます。コマンドパレットをご覧ください。
両方です。Mode プロパティで、同じコントロールのまま nbmSidebar と nbmAccordion を切り替えられ、項目もイベントも変わりません。そのため、プロジェクトの終盤でスタイルを変更したり、ユーザー設定として両方のスタイルを提供したりできます。どちらのモードも、折りたたんだアイコンレールに対応しています。
はい。OnSelectionChange を処理し、SelectedIndex に対応するページを表示します。たとえば、タブを非表示にした TPageControl のタブを切り替えたり、必要に応じてフレームを作成したりできます。SidebarApp デモはまさにこの方法で作られており、sgcDashboard の KPI ページを表示します。
はい。TsgcFMXNavigationBar は Delphi XE6 以降で Windows、macOS、iOS、Android、Linux（FMXLinux）を対象とし、VCL のバーと同じ項目、モード、イベントを備えています。FireMonkey のイメージリストには Delphi XE8 以降が必要です。それより前のバージョンでは、各項目の Glyph を使います。
コマンドパレット、タブのドラッグによる並べ替え、固定タブと切り離し、パンくずリストの編集モード、ドッキングマネージャー、項目のアクションリンクです。アクションリンクは .NET では Command と CommandParameter プロパティに当たります。アクションリンクの代わりに項目の OnClick またはバーの OnItemClick を使ってください。検索付きツリー、タブ、アイコンレール、バッジ、テーマ、ヘッドレス出力を含む他のすべての機能は、Community 版に含まれています。エディションをご覧ください。
いいえ。.NET 版にはデザイナーのバーブもコレクションエディターもないため、項目はシリアル化されず、通常はフォームまたはウィンドウのコンストラクターでコードから追加します。Delphi と C++ Builder では、Items コレクションをデザイン時に標準のコレクションエディターで編集できます。
はい。すべてのサイズは論理ピクセルにモニターのスケールを掛けた値なので、行、アイコン、バッジはどの DPI でも鮮明です。WinForms では幅と高さが VCL と同様に DPI / 96 でスケールされ、WPF と Avalonia ではデバイス非依存単位になります。
はい。sgcNavigationSaveToPNG と sgcNavigationSaveToSVG は、ウィンドウも VCL や FireMonkey も使わず、モデルからバーを描画します。Delphi 10.2 以降では Linux64 でも動作します。ドキュメント、ビジュアル回帰テスト、アプリケーションのメニューを表示する Web ページに使えます。
いいえ。iOS と Android では、TsgcFMXDockManager のパネルはドッキング、分割、タブ化、自動非表示ができますが、フローティングはできません。AllowFloating は False に固定され、ホバーがないため自動非表示パネルはタップで開き、長押しでパネルメニューが開き、ドラッグ中はドロップガイドだけが表示されます。フローティングウィンドウは、VCL、WinForms、WPF、Avalonia のデスクトップアプリケーションと、Windows および macOS 上の FireMonkey で動作します。デスクトップで保存したレイアウトはスマートフォンでも読み込めます。そのフロートのパネルは初期の配置のままになります。フローティングウィンドウをご覧ください。
はじめに, VCL クイックスタート, FireMonkey クイックスタート, TsgcVCLNavigationBar, サイドバーモード, アコーディオンモード, 折りたたみ, バッジ, テーマ, エディション, プラットフォーム.
はじめに, C++ Builder クイックスタート, TsgcVCLNavigationBar, 折りたたみ, デモ.
Delphi、C++ Builder、.NET。いずれも sgcUI の全製品を網羅しています。
