面向 ERP 和管理类应用的现代外壳
您有几十个现有窗体,主窗口仍通过菜单栏打开它们。在左侧放置一个侧边栏,每个区域一个条目,再让 OnSelectionChange 切换隐藏了标签页的 TPageControl 的标签页。徽标显示待处理订单或未读消息,图标栏则把空间还给各个窗体。运行 SidebarApp,即可看到该模式与 sgcDashboard 页面配合工作的效果。
- 侧边栏模式
- 徽标
- 折叠为图标栏
几分钟内为您的应用程序添加现代化导航菜单。一个控件既可以是侧边栏,也可以是手风琴,并能以流畅动画折叠为图标栏,用徽标显示未读数量,且完全支持键盘操作。内置浅色和深色主题,选项卡窗体则像网络浏览器一样,把文档选项卡放进带主题的标题栏。 一个模型和一个无界面渲染器,即可在 FireMonkey、WinForms、WPF、Avalonia、Delphi 7 至 13 的 VCL 以及 C++ Builder 中驱动导航栏,因此您产品的所有前端都以相同方式导航。
二十项功能,把一份页面列表变成用户一眼就能找到方向的导航结构。
一个控件即可涵盖业务应用常用的两种导航样式,以及两者之间的窄图标栏。
布局与模式
大多数业务应用都需要在主窗体左侧放置同样的东西:按区域分组的页面列表,并清楚标出当前页面。把 TsgcVCLNavigationBar 放到窗体上,对齐到左侧,再添加条目即可。分组标题以柔和的颜色为其下方的行命名,且不可被选中。选中的行带有强调色淡底和 3 像素的强调色竖条,用户随时知道自己在哪里。悬停和按下状态、提示以及禁用行都已为您绘制好,所以导航栏第一次运行就显得完整。
Mode := nbmSidebar 是默认样式IsGroup 将条目变为分组标题ItemHeight 和 GroupHeight 设置行高ScrollIntoView 可显示任意条目
布局与模式
设置界面和管理控制台的分区往往多到一屏放不下。将 Mode 设为 nbmAccordion,每个分组标题就变成一个可展开和收起其下条目的分区,右侧带箭头,子条目缩进显示。默认同一时间只展开一个分组,让长菜单保持简短。如果用户需要同时打开多个分区,请设置 AllowMultiExpand。条目、事件和您的代码完全不变。位于第一个标题之前的条目不属于任何分组,始终显示,适合在各分区上方放置“首页”或“仪表盘”入口。
Mode := nbmAccordion 切换整个导航栏Expanded 可通过代码展开或收起分组AllowMultiExpand 允许多个分组同时展开Indent 设置子条目的缩进布局与模式
宽大的侧边栏会挤占用户真正想看的数据空间。设置 Collapsed 后,导航栏会在约 150 毫秒内从展开宽度折叠为窄图标栏。图标栏中只绘制图标,标题变成提示,分组标题变成分隔线,徽标变成圆点,因此不会丢失重要信息。导航栏自行设置宽度,旁边的内容用 alClient 即可自动跟随。将 Collapsed 属性绑定到汉堡按钮、用户设置或窗体宽度,图标栏在侧边栏和手风琴模式下都以相同方式展开和收起。
Collapsed 在两种宽度之间切换ExpandedWidth(220)和 CollapsedWidth(56),单位为逻辑像素AnimateCollapse 开启或关闭动画OnCollapsedChange 在图标栏展开或收起时通知您布局与模式
导航栏只有在切换用户所见内容时才有用。点击或轻触一个已启用的条目,导航栏会选中它,触发 OnItemClick,然后运行该条目的 OnClick。OnSelectionChange 是显示对应页面的唯一位置,例如隐藏了标签页的 TPageControl 的标签页,SidebarApp 演示正是这样构建的。SelectedIndex 可通过代码读取和设置当前页面。对用户暂时无法访问的条目,可以将其禁用并在提示中说明原因,或对不应看到它的角色将其隐藏,选择逻辑照常工作。
SelectedIndex 是用户选择的页面OnSelectionChange 切换页面或框架OnItemClick 和每个条目的 OnClickEnabled、Hint 和 Visible带搜索的多级树、文档选项卡、面包屑导航和命令面板,全部构建在与导航栏相同的、独立于框架的模型之上。
导航外壳
大型应用程序很快就会超出平面页面列表的承载能力。将 Mode 设置为 nbmTree,导航栏就变成一棵层级任意的树:条目仍然是一个平面集合,条目的 Depth 决定它的层级,因此填充导航栏的代码几乎不用改动。每一级都有缩进,每个父节点都可以折叠。启用 ShowSearch 后,条目上方的搜索行会在用户输入时过滤树,保持每个匹配项的父节点展开,并高亮匹配的字符。模糊匹配可以通过 'stg' 找到 'Settings'。树模式和搜索包含在所有版本中。
Mode := nbmTree 以及每个条目的 DepthExpandAll、CollapseAll 和 Expand(aIndex, aRecursive)Filter,FilterMode 可选 nfmContains 或 nfmFuzzyShowSearch 绘制搜索行,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.AddCommand,带类别、关键字和快捷键文本Sources.AddSource,用于导航栏、功能区、工具栏或操作列表SaveRecent 和 LoadRecent 保留最近使用列表ICommand适用于 FireMonkey、VCL、WinForms、WPF 和 Avalonia 的注册版。IsgcUICommandSource 接口包含在所有版本中。
阅读帮助主题 命令源导航外壳
浏览器、终端和现代编辑器都把选项卡放在窗口标题中,让文档占满屏幕的整个高度。选项卡窗体为您的应用程序做同样的事。把它放到窗体上并关联选项卡条:sgcUI 会移除原生标题,绘制一个带主题的标题栏,其中包含窗口图标、选项卡、新建选项卡按钮以及最小化、最大化和关闭按钮,并采用应用程序的 sgcUI 主题,Classic 或 Fluent,浅色或深色。窗口保留阴影、调整大小的边框和最大化行为,指针停在最大化按钮上时,Windows 11 会显示贴靠布局。最后一个选项卡右侧的空白区域可以拖动窗口。在注册版中,用户可以把选项卡从选项卡条拖出到新窗口,再像网络浏览器那样把它放到另一个窗口的标题栏上。
TsgcVCLNavigationTabbedForm 和 TsgcFMXNavigationTabbedForm,.NET 中的 TsgcWinFormsNavigationTabbedForm、TsgcWpfNavigationTabbedWindow 和 TsgcAvaloniaNavigationTabbedWindowTabs 关联选项卡条。在 Delphi 中,Notebook 把 notebook 的选项卡条移到标题栏中,页面仍留在 notebook 里Tabs 可以直接在 XAML 中完成设置TearOffMode 把分离出的选项卡移到指针下方的窗口,ttmNewForm 则通过 OnCreateTearOffForm 把它放进一个跟随指针的新窗口选项卡窗体包含在所有版本中,社区版也不例外。分离与选项卡的分离一样,属于注册版。带主题的框架需要启用桌面合成的 Windows,在 FireMonkey 中仅应用于 Windows:在 macOS、Linux、iOS 和 Android 上保留原生标题栏。
阅读帮助主题 窗口框架 .NET 选项卡窗体IDE 风格的工作区:工具面板停靠在各个边上、自动隐藏或浮动,中央是带选项卡的文档区,布局则保存为 JSON。
停靠管理器 仅限注册版
拥有许多工具窗口的应用程序,需要一个用户可以自行排列的工作区。TsgcVCLDockManager、TsgcFMXDockManager、TsgcWinFormsDockManager、TsgcWpfDockManager 和 TsgcAvaloniaDockManager 把工具面板停靠在窗体的四个边上,可以嵌套拆分并带有拆分器,也可以放进选项卡组。用户拖动标题栏或选项卡,停靠引导会显示它可以落在哪里:指针下方组上的罗盘会把该组沿某一侧拆分,或把面板以选项卡形式放入其中,边缘引导会把它停靠到整个停靠区的某条边上,而强调色的预览矩形则显示它将占用的空间。按 Esc 取消拖动。 Avalonia 停靠页面用 XAML 和 C# 展示 TsgcAvaloniaDockManager。
Panels.Add,带 Name、Caption、Placement 和 DockSize,并以您自己的控件作为 ControlDockPanel、ClosePanel、ShowPanel 和 ActivatePanelOnPanelDock 可以拒绝停靠、浮动或自动隐藏的更改停靠管理器 仅限注册版
只是偶尔才需要的工具面板,不应该一直占用空间。标题栏的固定按钮会自动隐藏它所在的组:这些面板变成窗体侧边一条细栏上的选项卡,悬停或单击选项卡会让面板在内容之上滑出。当用户转到别处操作时它会滑回去,弹出面板的固定按钮则会让该组重新停靠,回到原来所在的一侧并恢复原来的大小。在 iOS 和 Android 上,点按即可打开弹出面板。
Model.SetAutoHide(aPanel, True)AutoHideDelay 设置悬停延迟,默认 400 毫秒CanAutoHide,文档永远不会自动隐藏停靠管理器 仅限注册版
拖离停靠引导放下的面板会浮动在自己的窗口中,用户可以把它移到别处或另一台显示器上。浮动窗口像停靠区一样包含一个布局,因此可以把更多面板并排或以选项卡形式停靠进去,双击它的标题栏即可重新停靠。浮动窗口是归窗体所有、不出现在任务栏中的无边框工具窗口,带有自绘的标题栏和可调整大小的边框,并且每个窗口都使用它所在显示器的缩放比例。它们适用于 VCL、WinForms、WPF、Avalonia 桌面应用程序,以及 Windows 和 macOS 上的 FireMonkey。在 iOS 和 Android 上面板不会浮动,拖动时只显示停靠引导。
FloatPanel(aPanel, aLeft, aTop)AllowFloating,以及每个面板的 CanFloatPlacement := dplFloat 让面板以 FloatWidth 乘 FloatHeight 的大小开始浮动停靠管理器 仅限注册版
停靠区的中央存放文档:一个或多个文档组,每个组顶部都有一条选项卡栏。这条选项卡栏的行为与导航选项卡相同,支持拖动重新排序、固定的文档排在最前、关闭按钮、已修改圆点、中键单击关闭、Ctrl+Tab,以及所有选项卡的列表。把文档选项卡拖到罗盘的某个侧臂上,可以把文档区拆分为并排或上下堆叠的两个文档组;也可以把它分离出来浮动,或者双击它来最大化它所在的组。新建选项卡按钮会触发 OnNewDocument,您的代码在其中创建下一个文档。
Kind := dpkDocument,每个面板带有 Pinned 和 ModifiedDocumentTabSizing、DocumentCloseButtons、DocumentShowNewButton 和 DocumentShowListButtonOnActiveDocumentChange 报告当前活动的文档OnPanelClose 可以让文档保持打开停靠管理器 仅限注册版
用户希望面板还在他们离开时的位置。SaveLayout 会把整个排列写成紧凑的 JSON:拆分及其大小、组及其活动面板、每一侧自动隐藏的组、带边界的浮动窗口、最大化的组和已隐藏的面板。LoadLayout 在下次启动时恢复它。该文本在 Delphi 和 .NET 中完全相同,因此一个布局文件可以同时用于两者。布局中提到、但窗体上尚不存在的面板(例如之前打开的文档)会到达 OnRestorePanel,您的代码在其中创建它的内容或放弃它。
SaveLayout、SaveLayoutToFile 和 SaveLayoutToStreamLoadLayout、LoadLayoutFromFile 和 LoadLayoutFromStream 遇到无法识别的文本时返回 False,且不做任何更改OnRestorePanel 用于在运行时创建的面板适用于 FireMonkey、VCL、WinForms、WPF 和 Avalonia 的注册版,并支持 C++ Builder。包含键盘、UI Automation、从右到左、主题和高 DPI 支持。
阅读帮助主题每一行承载的不只是标题:还有图标、计数,以及与您已编写逻辑的链接。
传递信息的条目
用户应该在打开页面之前就看到有事项需要处理。为条目设置 Badge,例如未读数量或“New”字样,导航栏会在行右侧以强调色胶囊形式绘制,文字为黑色或白色,以更清晰者为准。数值变化时通过代码设置,导航栏会自动重绘。在折叠的图标栏中,徽标会变成图标上的圆点。由于徽标是纯文本,同一个属性即可涵盖数量、短标签和状态词,无需任何自定义绘制代码。
Badge 是每个条目的一段短文本Badge 不绘制任何内容AccentColorHint 搭配可解释计数的含义
传递信息的条目
每一行都有一个图标位。让导航栏指向您已在使用的图像列表,并为每个条目设置 ImageIndex,带掩码的图像或 32 位图像只转换一次并缓存,直到列表更改。还没有图像列表?可以改设 Glyph,即一个随主题颜色变化的字母或短符号,演示程序就是这样显示的。禁用的条目以 40% 的不透明度绘制图像,状态一目了然。两者混用也没问题:有图像索引的条目显示图像,其余条目回退为字形,所以您可以逐步添加图标。
Images 和 ImageIndex 用于图像列表Glyph 用于无需图像的字母或符号传递信息的条目 仅限注册版
基于 TActionList 构建的应用程序已将命令、标题和启用规则集中在一处。通过 Action 属性将条目关联到任意 VCL 或 FireMonkey 的 TAction,其 Caption、Enabled、Visible、Hint 和 ImageIndex 会跟随该操作。点击时会以导航栏作为 ActionComponent 执行该操作,OnUpdate 在空闲时运行,因此操作一旦被禁用,条目立即变灰。在 .NET 中,由 Command 和 CommandParameter 完成同样的工作。一个 TActionList 即可同时驱动窗体的菜单、工具栏和键盘快捷键。
Action 将条目关联到任意 TBasicActionOnClick 会取代该操作运行SGC_NAVIGATION_ACTIONS 下编译Command 和 CommandParameter社区版:请改为指定条目的 OnClick 或导航栏的 OnItemClick,而不是操作。
阅读帮助主题这些细节让导航栏更有原生质感,并与您应用程序的其余部分保持一致。
键盘、主题与输出
高级用户无需鼠标即可切换页面,无障碍评审也对此有要求。导航栏可通过 Tab 获得焦点,并在可见且已启用的条目上移动焦点行:上下键逐行移动,Home 和 End 跳转,Enter 或空格激活。在手风琴中,左键收起分组,右键展开分组。虚线焦点框只在使用键盘时出现,焦点与选中的页面相互独立。FireMonkey 导航栏通过 CanFocus 支持相同的按键,因此桌面用户在每个平台上都能获得相同的行为。
TabStopFocusedIndex 是键盘所在的行SelectedIndex 仍是所选页面
键盘、主题与输出
忽略应用程序主题的菜单看起来像是硬加上去的。Theme 根据共享的 sgcUICore 令牌设置表面、边框、文字、分组标题、悬停和强调色,因此使用相同 Theme 的导航栏和 sgcDashboard 完全匹配。AccentColor 会用您的品牌色替换选中条、焦点框和徽标的强调色。放在仪表盘磁贴中的导航栏会自动跟随仪表盘的主题。在运行时切换主题,导航栏会立即重绘,方便您在设置页面中加入深色模式开关。
Theme:utDefault(默认,跟随应用程序主题)、utLight 或 utDarkAccentColor 为 $AARRGGBB 值,0 表示沿用主题强调色
键盘、主题与输出
文档、可视化测试和 Web 后端有时需要的是菜单的图片,而不是菜单本身。sgcNavigation_Render 中的渲染器无需窗口,也无需 VCL 或 FireMonkey,即可绘制 TsgcNavigationModel,因此控制台程序、服务或服务器都能将同一个导航栏输出为 PNG 或 SVG。该单元可在所有平台上构建,包括 Linux64,缩放参数可为高 DPI 屏幕生成清晰的图像。将您的图像列表传给渲染器,导出的图片就会显示与运行中的应用程序相同的图标。
sgcNavigationSaveToPNG 写入 PNG 文件或流sgcNavigationSaveToSVG 将同一导航栏写为 SVGsgcNavigationRender 可在任意 sgcUICore 画布上绘制sgcUI 套件演示中的 sgcNavigation:使用内置模拟数据、可离线运行的完整应用程序。
ERP 侧边栏把十个模块归入六个标题之下。
Altamira ERP →
交易台外壳:已折叠的图标栏位于交易台旁。
Altamira Markets →
浅色主题下的控制室外壳。
Altamira Plant →
PMO 侧边栏,带风险和超负荷人员的实时徽章。
Altamira PMO →
您有几十个现有窗体,主窗口仍通过菜单栏打开它们。在左侧放置一个侧边栏,每个区域一个条目,再让 OnSelectionChange 切换隐藏了标签页的 TPageControl 的标签页。徽标显示待处理订单或未读消息,图标栏则把空间还给各个窗体。运行 SidebarApp,即可看到该模式与 sgcDashboard 页面配合工作的效果。
配置界面会把几十个页面归入“Sales”“Inventory”和“Admin”等几个标题之下。手风琴一次只展开一个分区,使用 AllowMultiExpand 则可展开多个,Action 关联则复用您 TActionList 中的命令和启用规则。键盘用户可用方向键在各分区之间移动。Accordion 演示包含三个分组、一个展开开关和一个点击日志。
在 Windows、macOS、iOS 和 Android 上运行的 FireMonkey 应用程序,不应该在每个平台上使用不同的菜单。TsgcFMXNavigationBar 的条目、模式和事件与 VCL 导航栏相同,适用于 WinForms、WPF 和 Avalonia 的 .NET 导航栏也沿用相同的名称。同时发布 Delphi 桌面应用和 .NET 工具的团队只需保持一套思维模型。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。
基于停靠管理器构建的 IDE 风格外壳,适用于 VCL 和 FireMonkey:左侧是作为 Explorer 的导航栏树,右侧是 Properties,底部是自动隐藏的 Output,中央是带固定和已修改选项卡的备忘录文档。命令面板为每个面板列出一个 Window 命令,还包含主题切换和 Reset layout 按钮,布局在关闭时保存为 JSON,并在下次启动时加载。
.NET 版中的停靠外壳:适用于 WinForms 的 DockingShell,以及 DockingShellWpf 和 DockingShellAvalonia,每个都带有停靠、自动隐藏和浮动的面板、文档区和已保存的布局。
选项卡位于标题栏中的浏览器风格窗口,适用于 VCL 和 FireMonkey,并提供 C++ Builder 对应版本:新建选项卡按钮、关闭按钮,以及包含浅色、深色、Fluent 浅色和 Fluent 深色的主题选择器。把选项卡从选项卡条拖出,它会在跟随指针的新窗口中打开,然后把它放到另一个窗口的标题栏上。分离需要注册版。在 .NET 版本中,它以 WinForms 的 TabbedForm、TabbedFormWpf 和 TabbedFormAvalonia 提供。
使用 TsgcFMXNavigationBar 为 FireMonkey 构建的侧边栏演示,仅适用于 Delphi。条目、模式和事件与 VCL 版本相同,可用于 Windows、macOS 和移动平台。
一个驱动隐藏标签页 PageControl 的侧边栏,带图标、徽标、禁用条目、折叠按钮、主题下拉框和 sgcDashboard KPI 页面。完整验证应用外壳模式。
三个分组 Sales、Inventory 和 Admin,一个 AllowMultiExpand 开关、Action 关联和点击日志。它使用了 Action 关联,因此需要注册版或试用版。
适用于 Delphi (VCL) 的五个 QuickStart 演示位于 Demos\Navigation\Delphi\00.QuickStart。PDF 指南逐步讲解这些演示:第一个导航栏、通过代码构建的菜单、文档选项卡、主题和样式,以及一个小型邮件客户端。
RAD Studio 13.2 Florence 新增了两个 VCL 控件:TNavigationView 和 TTabView。如果您的应用程序只使用 VCL,并且用 13.2 或更高版本编译,它们是不错的内置选择。当同一套导航还需要在 FireMonkey 和 .NET 中运行、需要用旧版 Delphi 编译,或者需要面包屑导航、命令面板或带搜索的树时,sgcNavigation 就能体现价值。
TNavigationView 是一个纵向的条目列表,支持常规和紧凑模式、图像、多行文本、滚动和拖动重新排序,并把它的条目绑定到页面控件、框架或 TCardPanel。TTabView 是 TTabSet 的现代变体,其选项卡可以承载窗体或其他控件,每个选项卡都有图像、多行文本和关闭按钮,另有添加选项卡按钮、全部选项卡的下拉列表和滚动按钮。两者设计良好,也遵循 VCL 的编程模型,因此在 13.2 的新 VCL 项目中值得一试。
sgcNavigation 在每个宿主背后保持一个独立于框架的模型和一个无界面渲染器。导航栏,以及在此版本中加入的选项卡、面包屑导航、多级树和命令面板,在 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 中使用相同的名称 | 13.2 文档中未作说明 |
| 面包屑导航 | 可跟随导航栏所选节点的面包屑导航栏 | 13.2 文档中未作说明 |
| 命令面板 | 以键盘为中心的面板,可对命令、条目和操作进行模糊搜索 | 13.2 文档中未作说明 |
| 树内搜索 | 带搜索行的多级树,搜索行会保持每个匹配项的父节点可见 | 13.2 文档中未作说明 |
有关 TNavigationView 和 TTabView 的详细信息来自 Embarcadero 的 RAD Studio 13 Florence Release 2 说明。
sgcNavigation 包含在每个 sgcUI 版本中(从 Standard 起),也可单独购买。sgcNavigation 同时包含在 All-Access 捆绑包中。
免费的社区版(NuGet 上的 esegece.sgcNavigation.Community)包含带树模式和搜索的导航栏、基础选项卡和面包屑导航、把选项卡放进标题栏的选项卡窗体,以及命令源接口。注册版增加命令面板、选项卡重新排序、固定选项卡、分离与选项卡布局保存、面包屑导航编辑模式、停靠管理器,以及条目的 Action 关联。
| 功能 | 社区版(免费) | 注册版 |
|---|---|---|
| Sidebar and accordion modes | ✓ | ✓ |
| Collapse to an animated icon rail | ✓ | ✓ |
| Icons, glyphs and badges | ✓ | ✓ |
| Keyboard navigation | ✓ | ✓ |
| Light and dark themes, accent colour | ✓ | ✓ |
| Headless PNG and SVG output | ✓ | ✓ |
| 多级树模式和搜索 | ✓ | ✓ |
| 选项卡:大小调整、关闭按钮、列表按钮和新建选项卡按钮、滚动、键盘 | ✓ | ✓ |
| 选项卡窗体:选项卡位于带主题的标题栏中 | ✓ | ✓ |
| 面包屑导航:分段、箭头、溢出、绑定到导航栏 | ✓ | ✓ |
| 命令源(IsgcUICommandSource) | ✓ | ✓ |
| 命令面板 | − | ✓ |
| 拖动重新排序选项卡、固定选项卡、分离、选项卡布局保存 | − | ✓ |
| 选项卡窗体中分离到新窗口 | − | ✓ |
| 面包屑导航编辑模式 | − | ✓ |
| 停靠管理器 | − | ✓ |
| Action links (Delphi) and 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。
命令面板、拖动重新排序选项卡、固定选项卡和分离、面包屑导航编辑模式、停靠管理器,以及条目的 Action 关联,在 .NET 中即 Command 和 CommandParameter 属性。请改用条目的 OnClick 或导航栏的 OnItemClick,而不是 Action 关联。其他所有功能,包括带搜索的树、选项卡、图标栏、徽标、主题和无界面输出,社区版都有。请参阅版本。
不可以。.NET 移植版没有设计器动词或集合编辑器,因此条目不会被序列化,需要在代码中添加,通常放在窗体或窗口的构造函数中。在 Delphi 和 C++ Builder 中,Items 集合可在设计时用标准集合编辑器编辑。
清晰。所有尺寸都是逻辑像素乘以显示器的缩放比例,因此行、图标和徽标在任何 DPI 下都很清晰。在 WinForms 中,宽度和高度与 VCL 一样按 DPI / 96 缩放,在 WPF 和 Avalonia 中则使用设备无关单位。
可以。sgcNavigationSaveToPNG 和 sgcNavigationSaveToSVG 无需窗口,也无需 VCL 或 FireMonkey,即可根据模型渲染导航栏,自 Delphi 10.2 起在 Linux64 上同样可用。可用于文档、视觉回归测试,或展示应用程序菜单的网页。
不能。在 iOS 和 Android 上,TsgcFMXDockManager 的面板可以停靠、拆分、以选项卡组合和自动隐藏,但不能浮动:AllowFloating 被强制为 False;由于没有悬停,点按即可打开自动隐藏的面板,长按会打开面板菜单,拖动时只显示停靠引导。浮动窗口适用于 VCL、WinForms、WPF、Avalonia 桌面应用程序,以及 Windows 和 macOS 上的 FireMonkey。在桌面上保存的布局仍然可以在手机上加载:其浮动窗口中的面板保持各自的初始放置位置。请参阅浮动窗口。
Delphi、C++ Builder 和 .NET,涵盖每款 sgcUI 产品。