UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载BusyArea 是 SukiUI 为 AvaloniaUI 提供的一个忙碌状态容器控件当程序正在执行耗时任务如登录、数据加载、文件读写时它会在内容上方显示加载指示器并让底层内容半透明、禁用交互。本文以 BusyArea 官方文档 为主线结合仓库源码讲解它的属性、模板结构、绑定方式与实战用法读完你就能在自己的 SukiUI 页面中快速实现带状态提示的加载遮罩。基本用法三行 XAML 让内容进入忙碌态官方文档给出的最小示例非常简洁一个BusyArea包裹任意内容通过两个属性控制状态suki:BusyArea BusyTextBusy... IsBusy{Binding IsBusy} ... /suki:BusyAreaIsBusybool默认false是否处于忙碌状态。为true时显示加载动画并淡化内容为false时恢复正常显示。通常绑定到 ViewModel 中的属性。BusyTextstring?默认null显示在加载动画下方的提示文字例如Busy...、Signing In...。不设置时该 TextBlock 自动隐藏。这两项属性在 BusyArea.axaml.cs 中注册为 StyledProperty类型为SukiUI.Controls.BusyArea的派生类UserControl因此它可以直接放在任何布局容器中使用并支持数据绑定。绑定 ViewModel在耗时任务前后切换状态IsBusy是普通可绑定属性最常见的做法是把它接到 MVVM 的ObservableProperty上。仓库 Demo 的 MiscViewModel.cs 给出了完整示例[ObservableProperty] private bool _isBusy; [RelayCommand] private async Task ToggleBusy() { IsBusy true; await Task.Delay(3000); // 模拟耗时任务 IsBusy false; }对应的界面MiscView.axaml把卡片内容放进BusyArea点击按钮后整个卡片区域会进入 3 秒的忙碌状态suki:GlassCard MaxWidth300 suki:BusyArea BusyTextBusy... IsBusy{Binding IsBusy} suki:GroupBox HeaderBusy Area StackPanel Spacing10 TextBlock Classesh3 TextWrappingWrapClick this button to set the card area busy for 3 seconds./TextBlock Button HorizontalAlignmentCenter Command{Binding ToggleBusyCommand} ContentClick Me. / /StackPanel /suki:GroupBox /suki:BusyArea /suki:GlassCard这里的要点是BusyArea只负责视觉状态的切换真正的耗时逻辑Task.Delay、异步 IO 等由 ViewModel 在置IsBusy true与IsBusy false之间完成。你不需要手动管理动画的启停控件会随绑定值自动响应。真实场景登录表单的 Signing In 遮罩DashboardView.axaml 中有一个更贴近生产的例子登录按钮被BusyArea包裹登录时显示Signing In...同时按钮本身通过ButtonExtensions.ShowProgress也进入进度态suki:BusyArea NameBusySignIn BusyTextSigning In... IsBusy{Binding IsLoggingIn} StackPanel !-- 用户名、密码输入框等表单内容 -- /StackPanel /suki:BusyArea Button NameButtonSignIn suki:ButtonExtensions.ShowProgress{Binding IsLoggingIn} ClassesFlat Rounded Command{Binding LoginCommand} Sign In /ButtonViewModel 侧DashboardViewModel.cs同样是先置IsLoggingIn true任务结束再置回false[RelayCommand] private Task Login() { IsLoggingIn true; return Task.Run(async () { await Task.Delay(3000); IsLoggingIn false; }); }这种遮罩 按钮进度组合非常适合登录、支付确认、表单提交等交互忙碌期间用户无法重复点击也不容易误操作底层内容。静态用法与内置加载样式除了动态绑定BusyArea也可以静态固定为忙碌状态例如 AllControlsView.axaml 中的展示卡片suki:GroupBox ClassesTouch HeaderBusyArea suki:BusyArea Margin50 BusyTextLoading .. Width100 Height100 IsBusyTrue / /suki:GroupBoxBusyArea的加载动画来自 SukiUI 内置的 Loading.cs 控件它基于 SkiaSharp 运行时效果.sksl渲染支持三种样式Simple、Glow、Pellets见 Loading.cs。BusyArea默认使用Simple样式加载指示器颜色会跟随主题的主色SukiPrimaryColor自动适配明暗主题。模板与动画原理两层叠加 透明度过渡从 BusyArea.axaml 的 ControlTemplate 可以看到BusyArea内部是一个两层叠加的 PanelBusyContentContentControl承载你放入的实际内容通过Content{TemplateBinding Content}绑定。LoadingBusyAreaDockPanel居中显示加载层内部由PART_BusyText提示文字和加载动画的ContentPresenter组成。状态切换的视觉反馈完全由样式中的过渡与不透明度规则实现BusyArea.axamlStyle Selectorsuki|BusyArea DockPanel#LoadingBusyArea Setter PropertyTransitions Transitions DoubleTransition PropertyOpacity Duration0:0:0.3 / /Transitions /Setter /Style Style Selectorsuki|BusyArea[IsBusyTrue] /template/ DockPanel#LoadingBusyArea Setter PropertyOpacity Value1 / /Style Style Selectorsuki|BusyArea[IsBusyFalse] /template/ DockPanel#LoadingBusyArea Setter PropertyOpacity Value0 / /Style Style Selectorsuki|BusyArea[IsBusyTrue] /template/ ContentControl#BusyContent Setter PropertyOpacity Value0.1 / /Style Style Selectorsuki|BusyArea[IsBusyFalse] /template/ ContentControl#BusyContent Setter PropertyOpacity Value1 / /StyleIsBusy True加载层不透明度 1完全可见内容层不透明度降到0.1轻微淡化暗示不可用。IsBusy False加载层不透明度 0隐藏内容层恢复1。两层均带 0.3 秒的DoubleTransition过渡因此切换是平滑淡入淡出而非生硬跳变。值得注意的细节加载层的ContentPresenter设置了IsHitTestVisibleFalseBusyArea.axaml并把IsBusy经转换器映射为内容——它的渲染完全由状态驱动本身不拦截鼠标事件。幕后细节Loading 动画如何被塞进来加载层中的ContentPresenter绑定使用了 ProgressToContentConverter.cspublic object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture) { if (value is bool booleanValue booleanValue true) { return new Loading() { LoadingStyle LoadingStyle.Simple }; } return new Panel(); }即当IsBusy true时向ContentPresenter注入一个Loading控件默认Simple样式否则注入一个空的Panel。这样加载动画是否存在就完全由绑定值驱动无需在代码里手动增删控件。而Loading控件本体Loading.cs在挂载到可视树时通过ElementComposition.CreateCustomVisual创建自定义视觉对象并把对应的.sksl运行时效果simple/glow/pellets内嵌在 Content/Shaders/Loading 目录作为消息发送给绘制句柄前景色默认取动态资源SukiPrimaryColor从而与主题色保持一致。这也是为什么BusyArea在明暗主题下都不需要额外配色。使用建议与注意事项不要遮挡关键操作BusyArea只做视觉遮罩本身不强制禁用内部控件。若需防止重复提交建议结合ButtonExtensions.ShowProgress或对按钮IsEnabled一并绑定参见上面登录示例。配合 MVVM 使用最顺手IsBusy是标准 StyledProperty与CommunityToolkit.Mvvm的[ObservableProperty]天然契合推荐用try/finally包裹异步逻辑确保异常时也能恢复IsBusy false。文字可选BusyText为null时提示文字自动隐藏模板中通过StringConverters.IsNotNullOrEmpty控制可见性不需要文字时直接省略该属性。加载样式目前BusyArea固定使用Simple样式如需Glow/Pellets等更丰富的加载效果可以单独使用 Loading.cs 控件并自行组合布局。相关资源官方文档docs/docs/zh/documentation/controls/data/busyarea.md控件源码SukiUI/Controls/BusyArea.axaml、BusyArea.axaml.cs加载动画实现SukiUI/Controls/Loading.cs 及 SukiUI/Content/Shaders/Loading 下的.sksl效果转换器SukiUI/Converters/ProgressToContentConverter.csDemo 示例MiscView.axaml、MiscViewModel.cs、DashboardView.axaml赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐SukiUI BusyArea 控件实战为 AvaloniaUI 内容区域打造可绑定的加载遮罩SukiUI BusyArea 控件实战为 AvaloniaUI 内容区域打造可绑定的加载遮罩 BusyArea 是 SukiUI 为 AvaloniaUIUI组件桌面应用GRBL-Plotter终极指南如何用开源G代码控制器打造专业级CNC加工系统GRBL Plotter终极指南如何用开源G代码控制器打造专业级CNC加工系统 作为一款功能强大的开源G代码发送器GRBL Plotter不仅支持激光雕刻和桌面应用智能硬件GoPDF图像处理详解JPG/PNG图片添加与遮罩应用GoPDF图像处理详解JPG/PNG图片添加与遮罩应用 想要在Go语言中轻松生成包含精美图片的PDF文档吗 GoPDF库为开发者提供了简单高效的图像处理开发工具上一篇B站视频一键摘要神器3秒掌握视频核心内容告别无效观看下一篇php-domain-parser完全指南如何快速解析域名并提取公共后缀创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考