尧图网页设计 
UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载SukiUI 作为 AvaloniaUI 的主题库为Button提供了一套完整的样式体系与交互反馈机制。本文以官方文档 button.md 为核心骨架结合仓库源码Button.axaml、TextBoxExtensions.cs 中的ButtonExtensions、ProgressToContentConverter.cs 等深入讲解每一种按钮样式、类的组合规则、图标附加属性以及 Busy/Loading 加载按钮从 XAML 到 C# 再到底层渲染的完整链路。读完本文你将能熟练地为自己的 AvaloniaUI 应用配置任意风格按钮并掌握加载态按钮的声明式与命令式两种用法及其实现原理。快速上手让按钮主题生效SukiUI 的按钮主题通过SukiUI/Theme/Index.axaml统一汇总其中以ResourceInclude引入了Button.axaml、ButtonLoadingStyles.axaml等主题资源见 Index.axaml。在应用入口App.axaml中引入 SukiUI 的主题资源后所有Button与RepeatButton都会自动套用主题样式——Button.axaml 中通过ControlTheme x:Key{x:Type Button}和ControlTheme x:Key{x:Type RepeatButton}将SukiButtonStyle注册为默认控件主题因此无需任何额外配置即可获得统一样式。样式速览SukiUI 的按钮样式通过Classes属性组合启用官方文档给出了七种基础样式全部支持标准主色Primary与主题强调色Accent两种色系。下面逐一列出官方用法Standard标准不添加任何Classes即得到标准按钮卡片背景、细边框、默认圆角。Button ContentButton/ButtonFlat扁平实心主色实心背景、白色文字并带有SukiLowShadow低投影。Button ContentButton ClassesFlat/ButtonRounded全圆角Rounded通常与Flat组合得到胶囊形按钮源码中CornerRadius被设置为100。Button ContentButton ClassesFlat Rounded/ButtonOutlined描边透明背景 主色描边文字悬停时反色填充为主色。Button ContentButton ClassesOutlined/ButtonBasic文字按钮完全透明的无边框文字按钮文字使用主色适合导航栏、链接式操作等弱化场景。Button ContentButton ClassesBasic/ButtonFlat Accent强调色实心将Flat的背景从主色切换为主题强调色Accent。Button ContentButton ClassesFlat Accent/ButtonLarge大尺寸配合Flat放大按钮字号 18、内边距 30×12、圆角 11。Button ContentButton ClassesFlat Large/Button样式家族全景从源码看全部类除了文档列举的七种Button.axaml 与 SukiButtonStyles.cs 揭示了完整样式族。SukiButtonStyles.cs 以[Flags]枚举的形式登记了全部按钮样式位方便代码侧按位组合与判断。类名效果源码位置无标准按钮SukiBackground背景 SukiControlBorderBrush边框Button.axaml#L145-L221Basic透明背景文字按钮文字SukiPrimaryColor120组合Accent时改用SukiAccentColorButton.axaml#L297-L319Void完全透明、零内边距用于承载自定义内容Button.axaml#L321-L328Discrete卡片背景弱化按钮Button.axaml#L271-L273Flat主色实心、白色文字、低投影Button.axaml#L330-L357Outlined主色描边透明按钮悬停反色Button.axaml#L359-L387Success/Information/Warning/Danger语义色实心按钮如SukiSuccessColor、SukiDangerColor等悬停与按压各有深浅变化Button.axaml#L389-L451Accent将前景/边框/背景切换为强调色可与任意形态类组合Button.axaml#L276-L295RoundedCornerRadius置为 100Button.axaml#L453-L455Small字号 15、内边距 10Button.axaml#L456-L459Large字号 18、内边距 30×12、圆角 11Button.axaml#L460-L464Icon40×40 圆形图标按钮字号 20、零内边距Button.axaml#L466-L473NoPressedAnimation关闭按压缩放动画SukiPressMotion.EnableFalseButton.axaml#L260-L269Card卡片式按钮SukiCardBackgroundMediumCornerRadiusButton.axaml#L528-L554组合规则与类选择器机制样式类通过 Avalonia 的样式选择器嵌套实现叠加例如Flat内部再嵌套Accent子选择器Style Selector^.Flat Setter PropertyBackground Value{DynamicResource SukiPrimaryColor} / Style Selector^.Accent Setter PropertyBackground Value{DynamicResource SukiAccentColor} / ... /Style /Style这意味着类名之间是可组合的且组合顺序不影响结果。官方演示中已经验证的常用组合包括Flat Rounded、Flat Large、Basic Accent、Flat Accent、Flat Rounded Accent、Outlined Accent、Success Rounded、Flat Icon、Outlined Icon、Basic Icon、Flat Accent Icon等参见 ButtonsView.axaml。SukiButtonStyles枚举中Rounded、Outlined、Icon、Large等均为独立标志位正对应这种自由组合的设计。悬停与按压反馈基础样式定义了统一的交互反馈悬停:pointerover/:flyout-open时前景与边框切换为SukiPrimaryColor120按压:pressed:pointerover时进一步加深。与此同时SukiButtonStyle通过animations:SukiPressMotion.Enable开启按压缩放动画默认按压深度约为 0.9 左右Icon类专门设为0.95并配置了 Background/Foreground/BorderBrush/Opacity 的多组过渡动画见 Button.axaml#L224-L235因此按钮的每次悬停与点击都有平滑的视觉反馈。Busy/Loading 加载按钮加载态是 SukiUI 按钮最具特色的能力将按钮内容替换为加载动画常用于异步提交、保存、网络请求等场景。方式一XAML 声明式附加属性通过SukiUI.Theme命名空间下的ButtonExtensions.ShowProgress附加属性直接声明Window ... xmlns:themeclr-namespace:SukiUI.Theme;assemblySukiUI Button theme:ButtonExtensions.ShowProgressTrue / /Window方式二C# 命令式扩展方法在代码中通过扩展方法动态控制MyButton.ShowProgress(); // 进入加载态 MyButton.HideProgress(); // 退出加载态两种方式操作的是同一个附加属性ButtonExtensions.ShowProgressProperty默认值false因此 XAML 与 C# 可以混合使用、相互覆盖实现见 TextBoxExtensions.cs#L122-L158。方式三MVVM 数据绑定ShowProgress是标准的 Avalonia 附加属性可以直接绑定到 ViewModel。官方演示即采用这种方式并配合IsBusy属性让点击任意按钮后所有按钮同时进入 3 秒加载态Style SelectorButton Setter PropertyContent ValueButton / Setter Propertysuki:ButtonExtensions.ShowProgress Value{Binding IsBusy} / Setter PropertyIsEnabled Value{Binding IsEnabled} / /Style完整示例见 ButtonsView.axaml。加载态的底层实现链路从源码看加载态按钮由以下四部分协作完成附加属性入口ButtonExtensions 注册ShowProgressProperty并派生ShowProgress()/HideProgress()扩展方法。模板渲染Button.axaml 的SukiBaseButtonStyle模板中包含PART_ExtShowProgressViewBox其宽度通过BoolToWidthProgressConverter绑定到ShowProgresstrue展开、false收起并带有 0.3 秒的宽度过渡动画加载内容由ProgressToContentConverter输出。内容转换ProgressToContentConverter.cs 在ShowProgresstrue时返回一个Loading控件LoadingStyle.Simple否则返回空Panel。加载动画渲染Loading.cs 是一个基于 SkiaSharp 与 Composition 自定义视觉的控件内置simple、glow、pellets三套着色器动画默认 50×50 尺寸颜色由 ButtonLoadingStyles.axaml 按按钮类适配——Flat按钮内为白色、Outlined/Basic内为主色、Accent内为强调色保证加载动画与按钮前景始终同色。加载态的家族复用同一套机制也复用到其他按钮类控件DropDownButtonDropDownButton.axaml与SplitButtonSplitButton.axaml的模板同样包含PART_ExtShowProgress并且 SplitButtonExtensions 为SplitButton提供了同名的ShowProgress/HideProgress扩展方法与Icon附加属性。这意味着加载态能力可以无缝延伸到下拉按钮与拆分按钮。图标按钮ButtonExtensions.Icon除加载态外ButtonExtensions还提供Icon附加属性用于在按钮文字旁渲染图标Button suki:ButtonExtensions.Icon{avalonia:MaterialIconExt KindCalendar} ClassesFlat /模板中图标通过PART_ExtIconViewBox承载见 Button.axaml#L187-L202高度跟随按钮字号、前景色继承按钮Foreground。图标也可与Icon类组合形成纯圆形图标按钮Button ClassesFlat Accent Icon Content#9729; /若希望图标严格排列在内容前并自动控制间距直接使用theme:ButtonExtensions.Icon即可Button.axaml的预览区也演示了Discrete、Flat、Outlined Icon等带图标的组合写法见 Button.axaml#L9-L94。实践建议与注意事项加载态按钮应配合禁用态使用进入加载后通常同时置IsEnabledFalse防止重复提交SukiUI 默认在禁用时降低按钮透明度ThemeDisabledOpacity。避免在NoPressedAnimation上做性能假设该类仅关闭按压缩放不影响颜色过渡。语义色按钮仅适用于实心形态Success、Warning、Danger等类在源码中自带背景与前景直接单独使用即可不必再叠加Flat。主题色跟随切换所有按钮颜色均引用动态资源如SukiPrimaryColor、SukiAccentColor在 Dark.axaml 与 Light.axaml 间切换时会自动适配。参考资源官方按钮文档docs/docs/documentation/controls/inputs/button.md中文版见 docs/docs/zh/documentation/controls/inputs/button.md主题实现SukiUI/Theme/Button.axaml、SukiUI/Theme/ButtonLoadingStyles.axaml附加属性实现SukiUI/Theme/TextBoxExtensions.cs加载动画SukiUI/Controls/Loading.cs、SukiUI/Content/Shaders/Loading/枚举定义SukiUI/Enums/SukiButtonStyles.cs完整交互演示含全部样式与 Busy 按钮源码SukiUI.Demo/Features/ControlsLibrary/ButtonsView.axaml赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐SukiUI Button 控件完整指南样式体系、主题色变体与 Busy/Loading 加载状态实战SukiUI Button 控件完整指南样式体系、主题色变体与 Busy/Loading 加载状态实战 SukiUI 是面向 AvaloniaUI 的开源 UUI组件桌面应用SukiUI DropDownButton 控件完整指南AvaloniaUI 主题化下拉按钮的样式配置与 Flyout 实战SukiUI DropDownButton 控件完整指南AvaloniaUI 主题化下拉按钮的样式配置与 Flyout 实战 SukiUI 是面向 AvaloUI组件桌面应用fantastic-admin 基础按钮组件 FaButton 完全指南变体、尺寸、加载状态与按钮组实战fantastic admin 基础按钮组件 FaButton 完全指南变体、尺寸、加载状态与按钮组实战 导读 FaButton 与 FaButtonGrou前端AI 技能上一篇如何5分钟快速找回Navicat密码开源解密工具完整指南下一篇Forza Mods AIO极限竞速地平线游戏修改的五大技术突破创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SukiUI 按钮主题实战指南：样式体系、组合类与 Busy/Loading 加载态原理
UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载SukiUI 作为 AvaloniaUI 的主题库为Button提供了一套完整的样式体系与交互反馈机制。本文以官方文档 button.md 为核心骨架结合仓库源码Button.axaml、TextBoxExtensions.cs 中的ButtonExtensions、ProgressToContentConverter.cs 等深入讲解每一种按钮样式、类的组合规则、图标附加属性以及 Busy/Loading 加载按钮从 XAML 到 C# 再到底层渲染的完整链路。读完本文你将能熟练地为自己的 AvaloniaUI 应用配置任意风格按钮并掌握加载态按钮的声明式与命令式两种用法及其实现原理。快速上手让按钮主题生效SukiUI 的按钮主题通过SukiUI/Theme/Index.axaml统一汇总其中以ResourceInclude引入了Button.axaml、ButtonLoadingStyles.axaml等主题资源见 Index.axaml。在应用入口App.axaml中引入 SukiUI 的主题资源后所有Button与RepeatButton都会自动套用主题样式——Button.axaml 中通过ControlTheme x:Key{x:Type Button}和ControlTheme x:Key{x:Type RepeatButton}将SukiButtonStyle注册为默认控件主题因此无需任何额外配置即可获得统一样式。样式速览SukiUI 的按钮样式通过Classes属性组合启用官方文档给出了七种基础样式全部支持标准主色Primary与主题强调色Accent两种色系。下面逐一列出官方用法Standard标准不添加任何Classes即得到标准按钮卡片背景、细边框、默认圆角。Button ContentButton/ButtonFlat扁平实心主色实心背景、白色文字并带有SukiLowShadow低投影。Button ContentButton ClassesFlat/ButtonRounded全圆角Rounded通常与Flat组合得到胶囊形按钮源码中CornerRadius被设置为100。Button ContentButton ClassesFlat Rounded/ButtonOutlined描边透明背景 主色描边文字悬停时反色填充为主色。Button ContentButton ClassesOutlined/ButtonBasic文字按钮完全透明的无边框文字按钮文字使用主色适合导航栏、链接式操作等弱化场景。Button ContentButton ClassesBasic/ButtonFlat Accent强调色实心将Flat的背景从主色切换为主题强调色Accent。Button ContentButton ClassesFlat Accent/ButtonLarge大尺寸配合Flat放大按钮字号 18、内边距 30×12、圆角 11。Button ContentButton ClassesFlat Large/Button样式家族全景从源码看全部类除了文档列举的七种Button.axaml 与 SukiButtonStyles.cs 揭示了完整样式族。SukiButtonStyles.cs 以[Flags]枚举的形式登记了全部按钮样式位方便代码侧按位组合与判断。类名效果源码位置无标准按钮SukiBackground背景 SukiControlBorderBrush边框Button.axaml#L145-L221Basic透明背景文字按钮文字SukiPrimaryColor120组合Accent时改用SukiAccentColorButton.axaml#L297-L319Void完全透明、零内边距用于承载自定义内容Button.axaml#L321-L328Discrete卡片背景弱化按钮Button.axaml#L271-L273Flat主色实心、白色文字、低投影Button.axaml#L330-L357Outlined主色描边透明按钮悬停反色Button.axaml#L359-L387Success/Information/Warning/Danger语义色实心按钮如SukiSuccessColor、SukiDangerColor等悬停与按压各有深浅变化Button.axaml#L389-L451Accent将前景/边框/背景切换为强调色可与任意形态类组合Button.axaml#L276-L295RoundedCornerRadius置为 100Button.axaml#L453-L455Small字号 15、内边距 10Button.axaml#L456-L459Large字号 18、内边距 30×12、圆角 11Button.axaml#L460-L464Icon40×40 圆形图标按钮字号 20、零内边距Button.axaml#L466-L473NoPressedAnimation关闭按压缩放动画SukiPressMotion.EnableFalseButton.axaml#L260-L269Card卡片式按钮SukiCardBackgroundMediumCornerRadiusButton.axaml#L528-L554组合规则与类选择器机制样式类通过 Avalonia 的样式选择器嵌套实现叠加例如Flat内部再嵌套Accent子选择器Style Selector^.Flat Setter PropertyBackground Value{DynamicResource SukiPrimaryColor} / Style Selector^.Accent Setter PropertyBackground Value{DynamicResource SukiAccentColor} / ... /Style /Style这意味着类名之间是可组合的且组合顺序不影响结果。官方演示中已经验证的常用组合包括Flat Rounded、Flat Large、Basic Accent、Flat Accent、Flat Rounded Accent、Outlined Accent、Success Rounded、Flat Icon、Outlined Icon、Basic Icon、Flat Accent Icon等参见 ButtonsView.axaml。SukiButtonStyles枚举中Rounded、Outlined、Icon、Large等均为独立标志位正对应这种自由组合的设计。悬停与按压反馈基础样式定义了统一的交互反馈悬停:pointerover/:flyout-open时前景与边框切换为SukiPrimaryColor120按压:pressed:pointerover时进一步加深。与此同时SukiButtonStyle通过animations:SukiPressMotion.Enable开启按压缩放动画默认按压深度约为 0.9 左右Icon类专门设为0.95并配置了 Background/Foreground/BorderBrush/Opacity 的多组过渡动画见 Button.axaml#L224-L235因此按钮的每次悬停与点击都有平滑的视觉反馈。Busy/Loading 加载按钮加载态是 SukiUI 按钮最具特色的能力将按钮内容替换为加载动画常用于异步提交、保存、网络请求等场景。方式一XAML 声明式附加属性通过SukiUI.Theme命名空间下的ButtonExtensions.ShowProgress附加属性直接声明Window ... xmlns:themeclr-namespace:SukiUI.Theme;assemblySukiUI Button theme:ButtonExtensions.ShowProgressTrue / /Window方式二C# 命令式扩展方法在代码中通过扩展方法动态控制MyButton.ShowProgress(); // 进入加载态 MyButton.HideProgress(); // 退出加载态两种方式操作的是同一个附加属性ButtonExtensions.ShowProgressProperty默认值false因此 XAML 与 C# 可以混合使用、相互覆盖实现见 TextBoxExtensions.cs#L122-L158。方式三MVVM 数据绑定ShowProgress是标准的 Avalonia 附加属性可以直接绑定到 ViewModel。官方演示即采用这种方式并配合IsBusy属性让点击任意按钮后所有按钮同时进入 3 秒加载态Style SelectorButton Setter PropertyContent ValueButton / Setter Propertysuki:ButtonExtensions.ShowProgress Value{Binding IsBusy} / Setter PropertyIsEnabled Value{Binding IsEnabled} / /Style完整示例见 ButtonsView.axaml。加载态的底层实现链路从源码看加载态按钮由以下四部分协作完成附加属性入口ButtonExtensions 注册ShowProgressProperty并派生ShowProgress()/HideProgress()扩展方法。模板渲染Button.axaml 的SukiBaseButtonStyle模板中包含PART_ExtShowProgressViewBox其宽度通过BoolToWidthProgressConverter绑定到ShowProgresstrue展开、false收起并带有 0.3 秒的宽度过渡动画加载内容由ProgressToContentConverter输出。内容转换ProgressToContentConverter.cs 在ShowProgresstrue时返回一个Loading控件LoadingStyle.Simple否则返回空Panel。加载动画渲染Loading.cs 是一个基于 SkiaSharp 与 Composition 自定义视觉的控件内置simple、glow、pellets三套着色器动画默认 50×50 尺寸颜色由 ButtonLoadingStyles.axaml 按按钮类适配——Flat按钮内为白色、Outlined/Basic内为主色、Accent内为强调色保证加载动画与按钮前景始终同色。加载态的家族复用同一套机制也复用到其他按钮类控件DropDownButtonDropDownButton.axaml与SplitButtonSplitButton.axaml的模板同样包含PART_ExtShowProgress并且 SplitButtonExtensions 为SplitButton提供了同名的ShowProgress/HideProgress扩展方法与Icon附加属性。这意味着加载态能力可以无缝延伸到下拉按钮与拆分按钮。图标按钮ButtonExtensions.Icon除加载态外ButtonExtensions还提供Icon附加属性用于在按钮文字旁渲染图标Button suki:ButtonExtensions.Icon{avalonia:MaterialIconExt KindCalendar} ClassesFlat /模板中图标通过PART_ExtIconViewBox承载见 Button.axaml#L187-L202高度跟随按钮字号、前景色继承按钮Foreground。图标也可与Icon类组合形成纯圆形图标按钮Button ClassesFlat Accent Icon Content#9729; /若希望图标严格排列在内容前并自动控制间距直接使用theme:ButtonExtensions.Icon即可Button.axaml的预览区也演示了Discrete、Flat、Outlined Icon等带图标的组合写法见 Button.axaml#L9-L94。实践建议与注意事项加载态按钮应配合禁用态使用进入加载后通常同时置IsEnabledFalse防止重复提交SukiUI 默认在禁用时降低按钮透明度ThemeDisabledOpacity。避免在NoPressedAnimation上做性能假设该类仅关闭按压缩放不影响颜色过渡。语义色按钮仅适用于实心形态Success、Warning、Danger等类在源码中自带背景与前景直接单独使用即可不必再叠加Flat。主题色跟随切换所有按钮颜色均引用动态资源如SukiPrimaryColor、SukiAccentColor在 Dark.axaml 与 Light.axaml 间切换时会自动适配。参考资源官方按钮文档docs/docs/documentation/controls/inputs/button.md中文版见 docs/docs/zh/documentation/controls/inputs/button.md主题实现SukiUI/Theme/Button.axaml、SukiUI/Theme/ButtonLoadingStyles.axaml附加属性实现SukiUI/Theme/TextBoxExtensions.cs加载动画SukiUI/Controls/Loading.cs、SukiUI/Content/Shaders/Loading/枚举定义SukiUI/Enums/SukiButtonStyles.cs完整交互演示含全部样式与 Busy 按钮源码SukiUI.Demo/Features/ControlsLibrary/ButtonsView.axaml赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐SukiUI Button 控件完整指南样式体系、主题色变体与 Busy/Loading 加载状态实战SukiUI Button 控件完整指南样式体系、主题色变体与 Busy/Loading 加载状态实战 SukiUI 是面向 AvaloniaUI 的开源 UUI组件桌面应用SukiUI DropDownButton 控件完整指南AvaloniaUI 主题化下拉按钮的样式配置与 Flyout 实战SukiUI DropDownButton 控件完整指南AvaloniaUI 主题化下拉按钮的样式配置与 Flyout 实战 SukiUI 是面向 AvaloUI组件桌面应用fantastic-admin 基础按钮组件 FaButton 完全指南变体、尺寸、加载状态与按钮组实战fantastic admin 基础按钮组件 FaButton 完全指南变体、尺寸、加载状态与按钮组实战 导读 FaButton 与 FaButtonGrou前端AI 技能上一篇如何5分钟快速找回Navicat密码开源解密工具完整指南下一篇Forza Mods AIO极限竞速地平线游戏修改的五大技术突破创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考