新手引导与首次运行设置
最初的几分钟决定新用户是否留下。将账户创建、偏好设置和摘要拆分为四个简短页面,在用户继续之前用 OnBeforePageChange 验证姓名和电子邮件,并为想使用默认设置的用户跳过选项页面。OnPageChanged 填充摘要,OnFinish 保存账户。Onboarding 演示正是这样的流程,并带有浅色和深色开关以及可试用的步骤条位置选择器。
- 验证
- 已跳过的页面
- 完成与取消
引导用户一步一步清晰地完成设置、新手引导和结账。您添加的每个页面都会成为步骤条中的一步,上一步、下一步、完成和取消均已内置,只需一个事件即可在页面通过验证之前阻止跳转。
十二项功能,把冗长的表单变成用户能够完成的引导流程,规则和外观都由您的应用程序决定。
向导的结构已经就绪:您只需添加页面并制定规则。
页面、步骤与规则
冗长的表单会让用户望而生畏,而同样的字段拆分为几个清晰的步骤后,就更容易完成。TsgcVCLWizard 将每个页面变成一个步骤:AddPage 会同时创建页面及其在步骤条中的条目,包含标题、说明行和可选的字形。步骤条显示用户所处的位置和剩余的步骤,“上一步”“下一步”“完成”和“取消”按钮栏也已就位。每个页面都是一个容器,因此您可以用普通控件设计其内容,而向导会在每次打开页面时把焦点移到第一个控件。
AddPage 创建 TsgcVCLWizardPage 及其步骤Caption、Description 和 StepGlyph 标注每一步ActivePageIndex 和 ActivePage 可通过代码直接切换页面Next、Back 和 GoToPage 的跳转方式与按钮完全相同页面、步骤与规则
让用户带着空的电子邮件地址进入摘要页,意味着稍后出现的错误会远离引发它的字段。OnBeforePageChange 在每次跳转之前触发,无论用户按下的是“下一步”“上一步”还是“完成”,点击了某个步骤,还是您的代码调用了 GoToPage。它会告诉您正要离开的页面和即将打开的页面,并通过 var aAllow 标志阻止跳转。由于每次前进的目标索引都更大,只需一次判断就能验证页面,无论用户按下了什么。当您否决时,一切保持不变,因此您可以显示原因并把焦点放到对应字段上。
OnBeforePageChange(Sender, aFromIndex, aToIndex, aAllow) 可否决任何跳转aToIndex = PageCount 表示用户按下了“完成”aToIndex < aFromIndex 可放行后退操作OnPageChanged 在跳转之后触发,例如用于填充摘要页
页面、步骤与规则
真实的流程会产生分支。选择标准配送的客户不需要快递页面,个人账户没有公司步骤。为页面设置 Skip 后,它仍留在向导中,但“下一步”和“上一步”会跳过它,步骤条则用虚线轮廓将该步绘制为已跳过,因此用户仍能看到完整的流程。Skip 可随时更改,通常由前面页面上的复选框或选项触发。当没有更早的页面可以到达时,“上一步”按钮会自动禁用,因此用户绝不会落到与自己无关的页面上。
TsgcVCLWizardPage 上的 Skip 会将其移出路径wssSkipped 状态绘制GoToPage 只会跳到未被跳过的页面
页面、步骤与规则
向导通常以保存某些内容结束,而您希望这段代码集中在一处。在最后一页,“下一步”按钮会显示“完成”标题并成为默认按钮。按下它、按 Enter 或调用 Finish 会先运行您的验证,然后触发 OnFinish,您可以在其中保存数据、关闭窗体或设置对话框的 ModalResult。“取消”按钮、Escape 键和对 Cancel 的调用都会触发 OnCancel,因此您可以在丢弃工作成果之前先询问用户。向导绝不会自行关闭任何内容,所以流程始终由您掌控。
OnFinish 在 OnBeforePageChange 允许完成之后运行OnCancel 处理“取消”按钮、Escape 键和 CancelShowCancel 为必须完成的流程隐藏“取消”按钮FinishCaption 设置最后一个“下一步”按钮的文字进度条告诉用户当前所在位置、已完成的步骤以及出错之处。
自带说明的步骤条
较短的流程适合把步骤横排在顶部,而带说明的较长流程更适合像安装程序那样放在左侧的列中。StepperPosition 可移动步骤条而无需改动您的页面:wspTop 显示高 80 逻辑像素的横向条,wspLeft 显示宽 200 像素的纵向条,wspNone 则为普通的分页对话框隐藏它。按钮栏始终位于底部。Onboarding 演示提供了一个可在运行时切换位置的下拉框,您可以用自己的内容在几秒内比较这三种布局。
StepperPosition 取值为 wspTop、wspLeft 或 wspNoneOrientation 为 woHorizontal 或 woVerticalCircleSize 和 ConnectorThickness 设置步骤标记和连线的大小ShowDescriptions 显示或隐藏每个标签的第二行
自带说明的步骤条
用户扫一眼步骤条就要明白,因此每种状态都必须一目了然。待处理步骤是带淡色数字的轮廓,当前步骤是带柔和光晕的强调色圆盘和粗体标题,已完成步骤带有对勾,出错步骤是带感叹号的红色圆盘,已跳过的步骤则是虚线轮廓。开启 AutoStates 后,设置 ActiveIndex 会将其之前的步骤标记为已完成,之后的保持待处理,而出错和已跳过状态会保留。当您的应用程序自行决定每个状态时,请关闭 AutoStates。
wssPending、wssActive、wssCompleted、wssError 和 wssSkippedAutoStates 根据 ActiveIndex 推导状态AccentColor 为当前和已完成的步骤重新着色
自带说明的步骤条
并非每个流程都是向导。结账、订单状态页或工单生命周期只需要进度指示,不需要页面。TsgcVCLStepper 就是作为独立控件的同一个步骤条,可横向或纵向排列,带标题、说明和五种状态。设置 Clickable 后,用户可以通过点击或方向键回到已完成的步骤,OnStepClick 则可让您否决跳转。Stepper 演示并排展示了横向和纵向步骤条,并带有可将当前步骤标记为出错或已跳过的按钮。
TsgcVCLStepper 和 TsgcFMXStepper 无需向导即可使用Steps 是可用标准集合编辑器编辑的集合Clickable 和 OnStepClick 让已完成的步骤成为导航ActiveIndex 可通过您自己的代码推进进度您的语言、您的设计器、您的主题和您的框架。
贴合您的应用程序
在西班牙语应用程序中出现英文的“Next”按钮,显得不够完善。按钮栏的四个标题是已发布的属性,默认值为 Back、Next、Finish 和 Cancel。您可以在对象检查器中设置它们,用 IDE 常用的资源工具翻译它们,或在代码中根据您自己的翻译表赋值。只有当标题与默认值不同时,才会存入窗体文件,按钮也会随较长的文字自动加宽。步骤标签来自各页面的 Caption 和 Description,因此会与页面一起翻译。
BackCaption、NextCaption、FinishCaption 和 CancelCaptionShowCancel 移除“取消”按钮Caption 和 Description贴合您的应用程序
向导就是窗体,而窗体最适合在窗体设计器中设计。SGC Wizard 工具面板页注册了适用于 VCL 和 FireMonkey 的向导和步骤条。右键单击向导并选择 Add Page:会创建、显示并选中一个新页面,随时可以放置标签和复选框。Next Page 和 Previous Page 可在设计器中在各页面之间切换,点击步骤条上的某一步则会显示其页面。只有当前页面可见,设计时显示的页面就是存入窗体文件的页面。
TsgcVCLWizard、TsgcVCLStepper、TsgcFMXWizard 和 TsgcFMXStepperSteps 使用标准集合编辑器
贴合您的应用程序
无论是否使用鼠标,向导都应与应用程序的其余部分浑然一体。Theme 在 sgcUICore 的浅色和深色主题之间切换,AccentColor 设置当前步骤、已完成连线和默认按钮的颜色。向导还会把主题应用到其页面上的控件,因此 TLabel、TEdit 或 TCheckBox 在深色页面上仍然清晰可读。当焦点在向导内时,Enter 即“下一步”(在最后一页则为“完成”),Escape 即“取消”,但备忘录控件仍保留 Enter 用于换行。
Theme 取值为 utDefault(跟随应用程序主题)、utLight、utDark 或 utCustomAccentColor 是 ARGB 颜色,0 表示沿用主题强调色Theme 属性的子控件会获得向导的主题Clickable 时,获得焦点的步骤条可用方向键移动
贴合您的应用程序
文档、电子邮件和视觉回归测试通常需要的是步骤的图片,而不是活动的控件。sgcWizard_Render 中的渲染器无需窗口,也无需 VCL 或 FireMonkey,即可绘制 TsgcStepperModel 和按钮栏,因此控制台程序、服务、单元测试或 Web 服务器都能将同一个步骤条输出为图片。它可在所有平台上构建,包括 Linux64。宽度和高度为逻辑像素,缩放系数可生成清晰的图片:640 乘 100、缩放 2 即得到 1280 乘 200 的 PNG。
sgcWizardSaveToPNG 和 sgcWizardSaveToSVG 写入文件或流sgcWizardRender 可在任意 sgcUICore 画布上绘制sgcWizardSaveButtonBarToPNG 和 sgcWizardSaveButtonBarToSVG 绘制按钮栏esegece.sgcWizard.Rendering 包可在 Windows、Linux 和 macOS 上写出 PNG贴合您的应用程序
WPF 和 Avalonia 开发者期望的是绑定,而不是编写后台代码。在这些宿主中,向导、其页面和步骤条的面向用户的属性都是依赖属性或 Avalonia 属性,因此可以绑定到视图模型、从 Style 取值并支持动画。ActivePageIndex 默认以 TwoWay 方式绑定,因为向导在“下一步”“上一步”和点击步骤时会自行修改它,所以您的视图模型始终知道当前步骤。WinForms 控件使用普通属性,三种宿主都使用 Delphi 的名称。
TsgcWpfWizard 和 TsgcAvaloniaWizard,及其页面和步骤条ActivePageIndexPropertyOnBeforePageChange,以委托属性形式提供sgcUI 套件演示中的 sgcWizard:使用内置模拟数据、可离线运行的完整应用程序。
四步下单票据,其风险检查会阻止“下一步”。
Altamira Markets →
批次放行:在每项检查都签字之前,“下一步”保持锁定。
Altamira Plant →
带地图上预计路线的新货运向导。
Altamira Fleet →
在复核步骤带甘特图预览的新项目向导。
Altamira PMO →
最初的几分钟决定新用户是否留下。将账户创建、偏好设置和摘要拆分为四个简短页面,在用户继续之前用 OnBeforePageChange 验证姓名和电子邮件,并为想使用默认设置的用户跳过选项页面。OnPageChanged 填充摘要,OnFinish 保存账户。Onboarding 演示正是这样的流程,并带有浅色和深色开关以及可试用的步骤条位置选择器。
订单录入遵循固定的路径:购物车、地址、配送、付款和确认。当每一步都是一页字段时使用向导,或者在您已有的表单上方放置一个独立步骤条。已完成的步骤成为可点击的回退捷径,付款失败会显示为红色的出错步骤,不适用的配送步骤则以虚线轮廓保持可见。Stepper 演示展示了每种状态,包括横向和纵向。
技术工具需要为用户很少执行的任务提供向导:连接数据库、导入文件、设置设备。步骤条位于左侧的向导会列出每一步及其说明,OnBeforePageChange 在用户继续之前检查输入,按钮标题则跟随工具的语言。如 OnboardingFMX 演示所示,同一个向导也可在 FireMonkey 以及 WinForms、WPF 和 Avalonia 中运行。
Delphi、C++ Builder 和 C# 中使用相同的 API:添加页面,将其中一个标记为可选,并在用户离开 Account 页面之前进行验证。
procedure TMainForm.CreateWizard;
var
oPage: TsgcVCLWizardPage;
begin
// the wizard fills the form: stepper on the left, buttons at the bottom
FWizard := TsgcVCLWizard.Create(Self);
FWizard.Parent := Self;
FWizard.Align := alClient;
FWizard.StepperPosition := wspLeft;
FWizard.Theme := utDark;
FWizard.NextCaption := 'Continue';
FWizard.FinishCaption := 'Create account';
// every page is a step of the stepper
oPage := FWizard.AddPage('Welcome');
oPage.Description := 'Start here';
oPage := FWizard.AddPage('Account');
oPage.Description := 'Your details';
FName := TEdit.Create(Self);
FName.Parent := oPage;
FName.SetBounds(24, 24, 240, 24);
// an optional page the user can skip: Next and Back jump over it
FOptions := FWizard.AddPage('Options');
FOptions.Description := 'Optional';
FOptions.Skip := True;
oPage := FWizard.AddPage('Done');
oPage.Description := 'Summary';
FWizard.ActivePageIndex := 0;
FWizard.OnBeforePageChange := WizardBeforePageChange;
FWizard.OnFinish := WizardFinish;
end;
procedure TMainForm.WizardBeforePageChange(Sender: TObject;
aFromIndex, aToIndex: Integer; var aAllow: Boolean);
begin
// veto: leaving Account forwards needs a name
if (aFromIndex = 1) and (aToIndex > aFromIndex) then
aAllow := Trim(FName.Text) <> '';
end;
procedure TMainForm.WizardFinish(Sender: TObject);
begin
ShowMessage('Welcome, ' + FName.Text);
end;#include <vcl.h>
#include <Vcl.StdCtrls.hpp>
#include "sgcUICore_Theme.hpp"
#include "sgcWizard_Model.hpp"
#include "sgcWizard_VCL.hpp"
class TWizardHandler : public TObject
{
public:
TEdit *Name;
void __fastcall BeforePageChange(TObject *Sender, int aFromIndex,
int aToIndex, bool &aAllow);
void __fastcall Finish(TObject *Sender);
};
void __fastcall TWizardHandler::BeforePageChange(TObject *Sender,
int aFromIndex, int aToIndex, bool &aAllow)
{
// veto: leaving Account forwards needs a name
if ((aFromIndex == 1) && (aToIndex > aFromIndex))
aAllow = !Name->Text.Trim().IsEmpty();
}
void __fastcall TWizardHandler::Finish(TObject *Sender)
{
ShowMessage("Welcome, " + Name->Text);
}
void __fastcall CreateWizard(TForm *Form, TWizardHandler *Handler)
{
// the wizard fills the form: stepper on the left, buttons at the bottom
TsgcVCLWizard *Wizard = new TsgcVCLWizard(Form);
Wizard->Parent = Form;
Wizard->Align = alClient;
Wizard->StepperPosition = wspLeft;
Wizard->Theme = utDark;
Wizard->NextCaption = "Continue";
Wizard->FinishCaption = "Create account";
// every page is a step of the stepper
TsgcVCLWizardPage *Page = Wizard->AddPage("Welcome");
Page->Description = "Start here";
Page = Wizard->AddPage("Account");
Page->Description = "Your details";
Handler->Name = new TEdit(Form);
Handler->Name->Parent = Page;
Handler->Name->SetBounds(24, 24, 240, 24);
// an optional page the user can skip: Next and Back jump over it
Page = Wizard->AddPage("Options");
Page->Description = "Optional";
Page->Skip = true;
Page = Wizard->AddPage("Done");
Page->Description = "Summary";
Wizard->ActivePageIndex = 0;
Wizard->OnBeforePageChange = Handler->BeforePageChange;
Wizard->OnFinish = Handler->Finish;
}using System;
using System.Windows.Forms;
using esegece.sgcUICore;
using esegece.sgcWizard;
internal class MainForm : Form
{
private readonly TsgcWinFormsWizard Wizard = new TsgcWinFormsWizard();
private readonly TextBox txtName = new TextBox();
public MainForm()
{
// the wizard fills the form: stepper on the left, buttons at the bottom
Wizard.Dock = DockStyle.Fill;
Wizard.StepperPosition = TsgcWizardStepperPosition.wspLeft;
Wizard.Theme = TsgcUITheme.utDark;
Wizard.NextCaption = "Continue";
Wizard.FinishCaption = "Create account";
Controls.Add(Wizard);
// every page is a step of the stepper
TsgcWinFormsWizardPage oPage = Wizard.AddPage("Welcome");
oPage.Description = "Start here";
oPage = Wizard.AddPage("Account");
oPage.Description = "Your details";
txtName.SetBounds(24, 24, 240, 24);
oPage.Controls.Add(txtName);
// an optional page the user can skip: Next and Back jump over it
oPage = Wizard.AddPage("Options");
oPage.Description = "Optional";
oPage.Skip = true;
oPage = Wizard.AddPage("Done");
oPage.Description = "Summary";
Wizard.ActivePageIndex = 0;
Wizard.OnBeforePageChange = WizardBeforePageChange;
Wizard.OnFinish = sender => MessageBox.Show("Welcome, " + txtName.Text);
}
private void WizardBeforePageChange(object sender, int aFromIndex, int aToIndex, ref bool aAllow)
{
// veto: leaving Account forwards needs a name
if (aFromIndex == 1 && aToIndex > aFromIndex)
aAllow = txtName.Text.Trim() != "";
}
}dotnet add package esegece.sgcWizard.WinFormsOnboarding 和 Stepper 提供 Delphi VCL 和 C++ Builder 版本,OnboardingFMX 适用于 Delphi FireMonkey,.NET 版本则提供适用于 WinForms、WPF 和 Avalonia 的 Onboarding 和 Stepper。
四个页面:Welcome、Account、Options 和 Summary。在姓名和电子邮件有效之前,OnBeforePageChange 会否决“下一步”,复选框会跳过 Options 页面,OnPageChanged 填充摘要,OnFinish 显示摘要。主题开关和 StepperPosition 下拉框让您可以试用每种布局。
两个独立的 TsgcVCLStepper 控件,一个横向一个纵向,步骤相同,共五步。AutoStates 将当前步骤之前的步骤标记为已完成,按钮可将某一步标记为出错或已跳过,点击已完成的步骤会让两个步骤条一起回退。
使用 TsgcFMXWizard 和四个 TsgcFMXWizardPage 子对象实现的 Onboarding 流程:相同的验证否决、相同的已跳过 Options 页面、完成时的摘要,以及深色主题复选框。仅适用于 Delphi。
NuGet 上的 esegece.sgcWizard.WinForms、.Wpf 和 .Avalonia,价格与 Delphi 版相同。免费的社区版(esegece.sgcWizard.Community)拥有全部功能,只有试用提示不同。
注册版、试用版和社区版都包含 sgcWizard 的全部功能,只有试用提示不同。
| 功能 | 社区版(免费) | 注册版 |
|---|---|---|
| Wizard with pages and the stepper band | ✓ | ✓ |
| Validation with OnBeforePageChange | ✓ | ✓ |
| Skipped pages and the five step states | ✓ | ✓ |
| Standalone stepper | ✓ | ✓ |
| Button captions, light and dark themes, accent colour | ✓ | ✓ |
| Headless PNG and SVG output | ✓ | ✓ |
VCL 向导及其页面。组件编辑器可在设计时通过 SGC Wizard 工具面板页添加页面。
适用于 FireMonkey 的同一个向导,支持 Windows、macOS、iOS、Android 和 Linux (FMXLinux)。
独立的步骤条控件,可横向或纵向排列,适用于任何多步流程。
两种控件背后与框架无关的模型:步骤、状态和布局,并提供 sgcWizardSaveToPNG 和 sgcWizardSaveToSVG 用于无界面输出。
TsgcWinFormsWizard、TsgcWpfWizard 和 TsgcAvaloniaWizard,各自带有页面和步骤条类。
Onboarding 是带验证的四页注册流程,Stepper 是带状态的独立步骤条。
| 目标 | 组件 | 平台 |
|---|---|---|
| Delphi 7 至 13,VCL | TsgcVCLWizard, TsgcVCLStepper | Win32,XE2 起支持 Win64 |
| Delphi XE6 至 13,FireMonkey | TsgcFMXWizard, TsgcFMXStepper | Windows、macOS、iOS、Android 和 Linux (FMXLinux) |
| C++ Builder 2007 至 13 | TsgcVCLWizard, TsgcVCLStepper | 生成的 .hpp 头文件和静态库 |
| Delphi 10.2 至 13,框架无关 | TsgcStepperModel | Linux64,例如在服务器上将步骤条渲染为 PNG 或 SVG |
| .NET | TsgcWinFormsWizard, TsgcWpfWizard, TsgcAvaloniaWizard | WinForms、WPF 和 Avalonia |
可以。OnBeforePageChange 在每次跳转之前触发,无论来自按钮、键盘、点击步骤还是您自己的代码。它会收到正要离开的页面和即将打开的页面,将 aAllow 设为 False 即可让用户停留在原处。“完成”也会触发它,目标为 PageCount,因此最后一页以同样的方式验证。
可以。将 TsgcVCLWizard 或 TsgcFMXWizard 放到窗体上,右键单击并选择 Add Page。每个页面都像任何其他容器一样用您自己的控件设计。Next Page 和 Previous Page 命令,或点击步骤条上的某一步,可在设计器中显示其他页面。
是的。sgcWizard 由同一份源代码构建,注册版、试用版和社区版拥有全部功能:向导、步骤条、验证、已跳过的页面、步骤状态、主题以及无界面 PNG 和 SVG 输出。社区版是 NuGet 上免费的 esegece.sgcWizard.Community 包。
可以。TsgcWpfWizard 和 TsgcAvaloniaWizard 带有各自的页面和步骤条,其属性是可绑定到视图模型的依赖属性和 Avalonia 属性。在这两种宿主中,一个页面只容纳一个子元素,通常是面板或网格。WinForms 提供带容器页面的 TsgcWinFormsWizard,与 VCL 相同。
可以。TsgcVCLStepper、TsgcFMXStepper 和 .NET 步骤条都是独立控件,具有相同的五种状态。把它放在现有表单上方,用于结账、订单状态或工单生命周期,通过代码设置 ActiveIndex,并开启 Clickable,让用户可以回到已完成的步骤。
可以。BackCaption、NextCaption、FinishCaption 和 CancelCaption 是已发布的属性,因此可以用 IDE 常用的资源工具翻译,或在代码中设置。它们只在与默认值不同时才会保存,按钮也会随较长的标题加宽。步骤标签来自各页面的标题和说明。
VCL 向导和步骤条支持 Win32 和 Win64 上的 Delphi 7 至 13,以及 C++ Builder 2007 至 13。FireMonkey 支持从 Delphi XE6 起,面向 Windows、macOS、iOS、Android,并通过 FMXLinux 支持 Linux。无界面渲染器自 Delphi 10.2 起也可为 Linux64 构建。