UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载SukiUI 内置了一套现代、流畅的对话框Dialog系统它作为可选窗口控件挂在SukiWindow.Hosts之上以覆盖层形式展示在窗口所有内容包括标题栏之上。本指南围绕 官方文档 展开完整讲解如何在 MVVM 与非 MVVM 场景下接入SukiDialogHost、如何用链式 Builder 构建并显示/关闭对话框、如何配置操作按钮与消息框样式并结合 SukiUI 仓库 的源码剖析其背后的 Manager 单例调度、对话框池与动画机制帮助你写出可直接复制运行的对话框代码。一、对话框系统与 Hosts 架构SukiUI 在SukiWindow上提供Hosts属性可以往其中添加任意控件这些控件将显示在所有其他子控件包括标题栏的上层。其基础用法如下详见 hosts.md!-- XMLNS 定义已略去 -- suki:SukiWindow suki:SukiWindow.Hosts !-- 你的控件代码 -- /suki:SukiWindow.Hosts /suki:SukiWindowSukiUI 本身提供了两个可选窗口控件SukiDialogHost对话框与SukiToastHostToast 通知均通过Hosts注入。需要注意一个关键约束suki:SukiWindow.Hosts仅在SukiWindow上有效不要在页面Views中声明那是不生效的。从源码看SukiDialogHost是一个TemplatedControl见 SukiDialogHost.cs其公开的Manager属性是一个StyledPropertyISukiDialogManager负责接收对话框管理器实例模板由 SukiDialogHost.axaml 定义包含PART_DialogBackground半透明背景遮罩与PART_DialogContent居中的对话框内容容器当IsDialogOpenTrue时背景透明度为 0.4 并拦截命中测试关闭后背景延迟 500ms 淡出再隐藏避免零透明度遮罩继续吞掉 Tooltip 等交互见 SukiDialogHost.cs。二、快速接入MVVM 方式对话框对 MVVM 设计模式友好这是官方最推荐、能达到最佳效果的使用方式。你只需在 ViewModel 中暴露一个ISukiDialogManager然后在 XAML 中将其绑定到SukiDialogHost的Manager属性即可。View!-- XMLNS 定义已略去 -- suki:SukiWindow suki:SukiWindow.Hosts suki:SukiDialogHost Manager{Binding DialogManager}/ /suki:SukiWindow.Hosts suki:SukiWindowViewModelpublic class ExampleViewModel { public ISukiDialogManager DialogManager { get; } new SukiDialogManager(); }这里的ISukiDialogManager是对话框系统的核心抽象见 ISukiDialogManager.cs它定义了TryShowDialog(ISukiDialog dialog)尝试显示对话框若当前已有对话框正在显示则返回false且不显示TryDismissDialog(ISukiDialog dialog)尝试关闭指定对话框若该对话框已关闭则返回falseDismissDialog()直接关闭当前活动对话框若有OnDialogShown/OnDialogDismissed事件对话框显示/关闭时的回调参数为SukiDialogManagerEventArgs内含Dialog属性见 SukiDialogManagerEventArgs.cs。由于绑定基于ISukiDialogManager接口ViewModel 层可以保持对 UI 的零依赖方便单元测试与跨平台复用。三、快速接入非 MVVM 方式如果你没有使用 MVVM 模式只想做简单实现可以在 XAML 中给SukiDialogHost起一个名字然后在 Code-Behind 中赋值Manager。AXAML!-- XMLNS 定义已略去 -- suki:SukiWindow suki:SukiWindow.Hosts suki:SukiDialogHost NameDialogHost/ /suki:SukiWindow.Hosts suki:SukiWindowCode-Behindpublic class MainWindow : SukiWindow { public static ISukiDialogManager DialogManager new SukiDialogManager(); public MainWindow() { InitializeComponent(); DialogHost.Manager DialogManager; } }用法MainWindow.DialogManager.CreateDialog() .TryShow();注意SukiDialogHost.Manager的赋值时机由于Manager是 StyledProperty上述示例在构造函数中手动赋值即可MVVM 场景下则通过绑定自动完成。两种方式殊途同归最终都让 Host 订阅 Manager 的OnDialogShown事件来驱动遮罩与内容的显示见 SukiDialogHost.cs 对IsDialogOpen的监听逻辑。四、显示对话框CreateDialog 链式构建SukiUI 提供了一种现代的构建方式来创建和显示对话框。在ISukiDialogManager实例上调用.CreateDialog()即可开始构建随后通过链式调用轻松设置标题、内容等属性。所有方法都有对应的 XML 注释说明见 FluentSukiDialogBuilder.cs。构建完成后调用.TryShow()显示对话框——若当前没有其他对话框正在显示则显示成功否则静默失败返回false。下面是一个最简单的对话框示例public void DisplayDialog() { DialogManager.CreateDialog() .WithTitle(示例对话框) .WithContent(这里是示例对话框的内容。) .TryShow(); }从源码看CreateDialog()实际是ISukiDialogManager的扩展方法内部构造SukiDialogBuilder见 FluentSukiDialogBuilder.cs。SukiDialogBuilder见 SukiDialogBuilder.cs持有Manager与Dialog两个核心成员Dialog从DialogPool对象池中取出Dialog DialogPool.Get()这样频繁创建/关闭对话框时无需反复分配对象降低 GC 压力。除WithTitle/WithContent外FluentSukiDialogBuilder还提供以下内容类方法方法作用WithViewModel(FuncISukiDialog, object viewModel, bool isViewModelOnly true)给对话框指定 ViewModel此时 Title/Content 被忽略仅渲染 ViewModel 对应的 View由常规的 View 定位策略解析适合自定义复杂对话框ShowCardBackground(bool show)控制是否显示卡片背景五、关闭对话框点击背景与关闭链默认情况下对话框没有自动关闭机制。要添加关闭方式可以使用.Dismiss()方法。目前最常见的方式是.ByClickingBackground()即用户点击对话框外部背景遮罩时关闭对话框。例如下面的代码展示了一个点击背景即可关闭的空对话框public void DisplayDialog() { DialogManager.CreateDialog() .Dismiss().ByClickingBackground() .TryShow(); }这一链式调用的内部实现分为两步见 FluentSukiDialogBuilder.cs.Dismiss()返回一个SukiDialogBuilder.DismissDialog包装对象开启关闭链.ByClickingBackground()调用SetCanDismissWithBackgroundClick(true)将ISukiDialog.CanDismissWithBackgroundClick置为true对应属性见 ISukiDialog.cs此后 Host 检测到背景点击即触发关闭。关闭动作最终由SukiDialogManager完成见 SukiDialogManager.csTryDismissDialog只允许关闭当前活动对话框_activeDialog随后触发OnDialogDismissed事件、调用对话框的OnDismissed回调关闭后对话框并不会立即销毁而是通过DispatcherTimer.RunOnce延迟 500ms 后由DialogPool.Return归还对象池且若在延迟期间该对话框被重新TryShowDialog会取消这次归池CancelPendingPoolReturn避免复用已被归还的实例。SukiDialogManager在任何时刻只维护一个_activeDialog这正是.TryShow()中若当前没有其他对话框正在显示这一行为的源码依据。六、交互操作添加动作按钮通过.WithActionButton()方法可以为对话框添加按钮。该方法可以设置按钮的文字、点击后的回调操作并通过可选参数dismissOnClick控制点击后是否关闭对话框。你可以添加任意多个按钮为每个按钮设置不同的操作。以下是一个包含两个按钮的对话框示例其中一个按钮会关闭对话框public void DisplayDialog() { DialogManager.CreateDialog() .WithActionButton(保持打开, _ { }) .WithActionButton(关闭, _ { }, true) // 点击后关闭对话框 .TryShow(); }其完整签名见 FluentSukiDialogBuilder.cspublic static SukiDialogBuilder WithActionButton( this SukiDialogBuilder builder, object? content, // 按钮文字或任意内容object ActionISukiDialog onClicked, // 点击回调参数为当前对话框 bool dismissOnClick false, // 点击后是否自动关闭对话框默认 false params string[] classes) // 可选的按钮样式类列表按钮也可以通过最后一个可选参数classes指定样式类默认使用Flat样式也可以使用任意一种标准按钮样式。从 SukiDialogBuilder.cs 的实现看classes为空数组时自动回退为[Flat]每个类都会被添加到按钮的Classes集合从而命中 SukiUI 主题中对应的按钮样式点击时先执行onClicked回调若dismissOnClick为true则调用Manager.TryDismissDialog(Dialog)关闭对话框。以下示例代码创建了带有Flat样式按钮并使用强调色的对话框public void DisplayDialog() { dialogManager.CreateDialog() .WithActionButton(Styled Button , _ { }, true, Flat, Accent) .TryShow(); }其中Flat、Accent等样式类来自 SukiUI 的按钮样式体系见 SukiButtonStyles.cs 及 Button.axaml开发者也可以传入自己定义的样式类以实现完全自定义的按钮外观。七、消息框样式OfType你还可以通过.OfType()方法为对话框应用内置的消息框样式。目前支持的样式类型有Information、Success、Warning和Error它们来自 Avalonia 的NotificationType枚举。DialogManager.CreateDialog() .OfType(NotificationType.Information) .WithTitle(提示) .WithContent(操作已完成。) .Dismiss().ByClickingBackground() .TryShow();从源码看OfType委托给SukiDialogBuilder.SetType见 SukiDialogBuilder.cs它会为对话框设置图标与图标颜色类型图标来自 Icons.cs图标颜色来自 NotificationColor.csInformationIcons.InformationOutlineNotificationColor.InfoIconForegroundSuccessIcons.CheckNotificationColor.SuccessIconForegroundWarningIcons.AlertOutlineNotificationColor.WarningIconForegroundErrorIcons.AlertOutlineNotificationColor.ErrorIconForeground这意味着OfType不仅改变了视觉样式也把图标与语义色直接绑定到对话框上配合WithActionButton即可快速拼出确定/取消式的消息框DialogManager.CreateDialog() .OfType(NotificationType.Success) .WithTitle(保存成功) .WithContent(文件已保存到本地。) .WithActionButton(好的, _ { }, true) .TryShow();八、进阶能力异步等待、结果回调与自定义对话框在官方文档基础之上从 FluentSukiDialogBuilder.cs 的源码可以看到更多进阶用法适合需要与用户交互结果联动的场景。8.1 异步等待对话框关闭TryShowAsyncSukiDialogBuilder提供TryShowAsync(CancellationToken cancellationToken default)方法见 SukiDialogBuilder.cs可以await对话框直到其被关闭返回bool作为结果var result await DialogManager.CreateDialog() .WithTitle(确认删除) .WithYesNoResult(删除, 取消) .TryShowAsync();若当前已有对话框打开TryShowAsync会抛出InvalidOperationExceptionDebug 构建下还会触发Debugger.Break()便于排查它支持CancellationToken取消时会以TrySetCanceled结束等待。8.2 WithYesNoResult / WithOkResult内置结果按钮配合TryShowAsyncBuilder 提供了两种预置结果按钮见 FluentSukiDialogBuilder.csWithYesNoResult(yesButtonContent, noButtonContent, params classes)添加是/否两个按钮点击是返回true点击否返回false两者都会关闭对话框WithOkResult(okButtonContent, params classes)添加一个确定按钮点击返回true并关闭对话框。8.3 OnDismissed关闭回调通过.OnDismissed(ActionISukiDialog)可以注册一个回调无论对话框因何种原因点击背景、点击按钮、程序调用被关闭都会触发适合做清理工作或状态同步DialogManager.CreateDialog() .WithTitle(提示) .WithContent(即将关闭。) .Dismiss().ByClickingBackground() .OnDismissed(dialog Console.WriteLine(Dialog dismissed.)) .TryShow();8.4 WithViewModel自定义复杂对话框当默认的标题 内容结构无法满足需求时可使用WithViewModel渲染任意 ViewModel通过 SukiUI 的ViewLocator定位对应的 View见 ViewLocator.csDialogManager.CreateDialog() .WithViewModel(dialog new MyCustomDialogViewModel()) .TryShow();当isViewModelOnly true时对话框只渲染 ViewModel 对应的视图忽略 Title/Content设为false时 ViewModel 会作为Content内容渲染。九、底层动画与生命周期从 SukiDialogHost.cs 的类注释与实现可以了解到对话框的开场/退场动画并非写死在 XAML 模板中而是由SukiDialogMotion位于 ControlsAnimation/DialogAnimation统一编排对话框可以从触发点击的指针位置浮现出来其弹簧动画会依据对话框实测尺寸校准并支持打开、关闭、固定时抖动的完整编排。Host 通过全局指针位置追踪_lastPointerPosition记录最后一次点击坐标作为开场动画的起始点。整个对话框的生命周期可归纳为CreateDialog()从DialogPool取出一个SukiDialog实例并挂上 Manager链式 API 填充标题、内容、类型、按钮、关闭策略等属性.TryShow()→Manager.TryShowDialog若_activeDialog为空则置为当前活动对话框并触发OnDialogShownHost 据此翻转IsDialogOpen、淡入背景并播放开场动画关闭时点击背景 / 按钮 / 代码调用→TryDismissDialog或DismissDialog触发OnDialogDismissed与OnDismissed回调背景延迟 500ms 淡出延迟 500ms 后对话框实例归还DialogPool复用全程避免重复分配对象。这套设计使得对话框在 MVVM 下可以完全由 ViewModel 驱动同时在非 MVVM 场景下也能通过简单的 Code-Behind 赋值快速上手是 SukiUI 中集成度与可扩展性都比较高的组件之一。更多关于 Hosts 机制与 Toast 的对照说明可继续阅读 hosts.md。赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐Electron.NET 原生系统对话框DialogAPI 实战指南文件选择、消息框与证书信任对话框Electron.NET 原生系统对话框DialogAPI 实战指南文件选择、消息框与证书信任对话框 Electron.Dialog 是 Electron桌面应用跨平台PrimeVue对话框系统终极指南模态框、确认框、动态对话框PrimeVue对话框系统终极指南模态框、确认框、动态对话框 PrimeVue对话框系统 是Vue.js应用中处理用户交互的核心组件库提供了一套完整且专业的前端UI组件设计系统SukiUI 对话框宿主SukiDialogHost实战指南MVVM 接入、流式构建与异步确认框SukiUI 对话框宿主SukiDialogHost实战指南MVVM 接入、流式构建与异步确认框 SukiUI 为 AvaloniaUI 提供了基于宿主UI组件桌面应用上一篇Shoelace sl-mutation-observer 组件完全指南以声明式方式监听 DOM 变更下一篇GB/T 7714参考文献排版终极指南在Overleaf中快速实现标准格式创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考