尧图网页设计 
UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载本篇技术指南围绕 SukiUIAvaloniaUI 主题框架内置的CalendarDatePicker日期选择控件展开介绍其在 SukiUI 主题体系下的基本用法、数据绑定方式、常用属性配置并结合仓库中 主题实现文件 与 Demo 示例 深入解析其视觉结构与弹出日历的构成原理。读完本文你将能够在自己的 AvaloniaUI 应用中直接使用并深度定制 SukiUI 风格的日期选择器。控件简介CalendarDatePicker是用于选择日期的控件允许用户通过文本框输入日期或点击下拉按钮在弹出的日历面板中直观地选取具体日期。它是 SukiUI 主题为 AvaloniaUI 原生CalendarDatePicker控件提供的完整视觉重绘版本属于日期时间类datetime控件家族的一员与同目录下的Calendar、DatePicker、TimePicker控件共同构成完整的日期时间选择能力。展示以下是该控件在 SukiUI 主题下的实际运行效果从效果图可以看到控件主体是一个带有底部细边框的输入框右侧为日历下拉按钮点击后弹出带有圆角阴影的日历面板。基本用法CalendarDatePicker的用法与 AvaloniaUI 原生控件一致只需在 XAML 中放置控件并绑定SelectedDate属性即可。原文档给出的最小示例为CalendarDatePicker SelectedDate{Binding SelectedDateTimeOffset} /在 SukiUI 的 Demo 项目 中该控件被放置于GlassCardGroupBox组合的 Date Picker 分组内与DatePicker共用同一个SelectedDateTimeOffset绑定源suki:GlassCard suki:GroupBox HeaderDate Picker StackPanel Spacing15 DatePicker SelectedDate{Binding SelectedDateTimeOffset} / CalendarDatePicker SelectedDate{Binding SelectedDateTimeOffset} / /StackPanel /suki:GroupBox /suki:GlassCard绑定类型与双向同步SelectedDate的类型为DateTimeOffset?可空。在 MiscViewModel.cs 中可以看到Demo 同时维护了DateTime与DateTimeOffset两个属性并通过源生成器生成的 partial 方法实现双向同步方便与同页面中的Calendar控件其SelectedDate为DateTime?联动partial void OnSelectedDateTimeChanged(DateTime value) SelectedDateTimeOffset value; partial void OnSelectedDateTimeOffsetChanged(DateTimeOffset value) SelectedDateTime value.DateTime;从 主题模板 的源码看弹出日历面板中的SelectedDate采用TemplatedParent相对绑定并显式声明ModeTwoWay即用户在日历中选择日期后会直接回写到控件的SelectedDate属性进而通过常规绑定管道通知到 ViewModelCalendar SelectedDate{Binding RelativeSource{RelativeSource TemplatedParent}, PathSelectedDate, ModeTwoWay} /常用属性配置结合 主题模板源码 中对PART_Calendar的绑定关系以下属性均被 SukiUI 主题完整透传到内部日历可在使用时直接配置属性类型说明SelectedDateDateTimeOffset?当前选中的日期支持双向绑定类型为可空DateTimeOffsetDisplayDateDateTime日历打开时默认展示的年月决定初始视图DisplayDateStartDateTime?可选择的日期范围下限早于该日期的日期不可选DisplayDateEndDateTime?可选择的日期范围上限晚于该日期的日期不可选FirstDayOfWeekDayOfWeek日历视图每周的起始星期IsTodayHighlightedbool是否在日历中高亮今天默认为truePlaceholderTextstring输入框为空时显示的占位提示文本UseFloatingPlaceholderbool是否使用浮动占位符输入后占位文本上浮示例限制用户只能在 2026 年内选择日期并将周一设为一周的第一天CalendarDatePicker SelectedDate{Binding SelectedDateTimeOffset} DisplayDateStart2026-01-01 DisplayDateEnd2026-12-31 FirstDayOfWeekMonday PlaceholderText请选择日期 UseFloatingPlaceholderTrue /主题源码解析控件长什么样SukiUI 的CalendarDatePicker主题定义于 SukiUI/Theme/CalendarDatePicker.axaml其ControlTheme通过Setter预设了如下视觉默认值Background为TransparentHeight固定为38BorderThickness为0,0,0,1即仅保留底部 1px 边框形成经典的下划线输入框外观FontSize为14Padding为4VerticalContentAlignment居中边框颜色使用SukiControlBorderBrush前景色使用SukiText占位文本颜色使用SukiLowText均随 SukiUI 明暗主题自动切换。整体模板结构模板最外层使用 SukiUI 自带的suki:GlassCardClassesDiscrete圆角取SmallCornerRadius即 8作为承载容器内部是一个ColumnDefinitions*,Auto的两列网格第一列PART_TextBox即输入文本框。模板将其背景、边框、圆角、前景色、占位符等属性全部TemplateBinding到控件本身并透传DataValidationErrors.Errors因此CalendarDatePicker可以直接参与表单校验校验错误提示与普通 TextBox 表现一致TextBox NamePART_TextBox ClassesNoShadow Background{TemplateBinding Background} BorderBrush{TemplateBinding BorderBrush} BorderThickness{TemplateBinding BorderThickness} DataValidationErrors.Errors{TemplateBinding (DataValidationErrors.Errors)} PlaceholderForeground{TemplateBinding PlaceholderForeground} UseFloatingPlaceholder{TemplateBinding UseFloatingPlaceholder} PlaceholderText{TemplateBinding PlaceholderText} /第二列PART_Button即日历下拉按钮。按钮本身BackgroundTransparent、FocusableFalse、ClipToBoundsFalse样式类为CalendarDropDown。其图标并非图片资源而是纯 XAML 绘制的小日历顶部一行用SukiPrimaryColor填充作为日历表头主体显示今天的日期数字绑定sys:DateTime.Today的Day属性并带有一个 1px 描边的边框。鼠标悬停时pointerover选择器表头背景切换为SukiPrimaryColor5提供轻量的按压反馈。弹出日历面板点击下拉按钮后弹出的是PART_PopupIsLightDismissEnabledTrue点击面板外部自动关闭。弹出内容为一个Margin15的圆角Border其Background为SukiStrongBackground、BoxShadow为SukiPopupShadow在明暗主题下都会带有柔和的投影与 14 的圆角内部再套一层PopupGradientBrush背景的Panel中央放置PART_Calendar即真正的日历本体。日历本体及其日按钮、表头的视觉样式由 SukiUI/Theme/Calendar/Calendar.axaml 及同目录下的CalendarItem.axaml、CalendarDayButton.axaml、CalendarButton.axaml共同提供形成统一的视觉语言。焦点态模板还通过样式选择器定义了焦点样式输入框获得焦点时底部边框切换为高亮色Style Selector^:focus /template/ TextBox#PART_TextBox Setter PropertyBorderBrush Value{DynamicResource ThemeBorderHighBrush} / /Style主题如何自动生效SukiUI 通过 SukiUI/Theme/Index.axaml 中的MergedDictionaries一次性引入全部控件主题其中就包括ResourceInclude Sourceavares://sukiUI/Theme/CalendarDatePicker.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/Calendar.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/CalendarButton.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/CalendarDayButton.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/CalendarItem.axaml /因此只要应用已加载 SukiUI 主题在App.axaml中引用SukiUI.Theme或SukiTheme资源CalendarDatePicker无需额外引入样式即可自动呈现 SukiUI 风格。更多使用场景除了 Misc 示例页CalendarDatePicker还用于 DataGridView.axaml 的编辑场景中作为数据表格某列的可编辑日期输入控件CalendarDatePicker SelectedDate{Binding Updated} /这印证了该控件可无缝嵌入表格、表单等复杂容器配合DataValidationErrors.Errors透传能力完成校验闭环。若需要查看完整可运行示例可参考 Demo 项目中的 MiscView.axaml与Calendar、DatePicker、TimePicker同屏对比展示控件的中文说明文档位于 calendardatepicker.md。赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐SukiUI CalendarDatePicker 日期选择控件完整指南从 XAML 绑定到主题源码剖析SukiUI CalendarDatePicker 日期选择控件完整指南从 XAML 绑定到主题源码剖析 SukiUI 是为 AvaloniaUI 打造的主题UI组件桌面应用SukiUI DatePicker 控件实战指南滚轮式日期选择的用法、绑定与主题源码剖析SukiUI DatePicker 控件实战指南滚轮式日期选择的用法、绑定与主题源码剖析 SukiUI 是基于 AvaloniaUI 的现代 UI 主题库其UI组件桌面应用SukiUI 日历控件实战指南Calendar 日期显示与选择用法详解SukiUI 日历控件实战指南Calendar 日期显示与选择用法详解 SukiUI 是基于 AvaloniaUI 的开源主题库其中 Calendar 是一UI组件桌面应用上一篇PushDeer推送证书配置终极解决iOS和Android推送难题下一篇GHelper 完整指南用单个 exe 在 5 分钟内涵养一台华硕游戏本创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SukiUI CalendarDatePicker 日期选择控件：用法指南与主题源码解析
UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载本篇技术指南围绕 SukiUIAvaloniaUI 主题框架内置的CalendarDatePicker日期选择控件展开介绍其在 SukiUI 主题体系下的基本用法、数据绑定方式、常用属性配置并结合仓库中 主题实现文件 与 Demo 示例 深入解析其视觉结构与弹出日历的构成原理。读完本文你将能够在自己的 AvaloniaUI 应用中直接使用并深度定制 SukiUI 风格的日期选择器。控件简介CalendarDatePicker是用于选择日期的控件允许用户通过文本框输入日期或点击下拉按钮在弹出的日历面板中直观地选取具体日期。它是 SukiUI 主题为 AvaloniaUI 原生CalendarDatePicker控件提供的完整视觉重绘版本属于日期时间类datetime控件家族的一员与同目录下的Calendar、DatePicker、TimePicker控件共同构成完整的日期时间选择能力。展示以下是该控件在 SukiUI 主题下的实际运行效果从效果图可以看到控件主体是一个带有底部细边框的输入框右侧为日历下拉按钮点击后弹出带有圆角阴影的日历面板。基本用法CalendarDatePicker的用法与 AvaloniaUI 原生控件一致只需在 XAML 中放置控件并绑定SelectedDate属性即可。原文档给出的最小示例为CalendarDatePicker SelectedDate{Binding SelectedDateTimeOffset} /在 SukiUI 的 Demo 项目 中该控件被放置于GlassCardGroupBox组合的 Date Picker 分组内与DatePicker共用同一个SelectedDateTimeOffset绑定源suki:GlassCard suki:GroupBox HeaderDate Picker StackPanel Spacing15 DatePicker SelectedDate{Binding SelectedDateTimeOffset} / CalendarDatePicker SelectedDate{Binding SelectedDateTimeOffset} / /StackPanel /suki:GroupBox /suki:GlassCard绑定类型与双向同步SelectedDate的类型为DateTimeOffset?可空。在 MiscViewModel.cs 中可以看到Demo 同时维护了DateTime与DateTimeOffset两个属性并通过源生成器生成的 partial 方法实现双向同步方便与同页面中的Calendar控件其SelectedDate为DateTime?联动partial void OnSelectedDateTimeChanged(DateTime value) SelectedDateTimeOffset value; partial void OnSelectedDateTimeOffsetChanged(DateTimeOffset value) SelectedDateTime value.DateTime;从 主题模板 的源码看弹出日历面板中的SelectedDate采用TemplatedParent相对绑定并显式声明ModeTwoWay即用户在日历中选择日期后会直接回写到控件的SelectedDate属性进而通过常规绑定管道通知到 ViewModelCalendar SelectedDate{Binding RelativeSource{RelativeSource TemplatedParent}, PathSelectedDate, ModeTwoWay} /常用属性配置结合 主题模板源码 中对PART_Calendar的绑定关系以下属性均被 SukiUI 主题完整透传到内部日历可在使用时直接配置属性类型说明SelectedDateDateTimeOffset?当前选中的日期支持双向绑定类型为可空DateTimeOffsetDisplayDateDateTime日历打开时默认展示的年月决定初始视图DisplayDateStartDateTime?可选择的日期范围下限早于该日期的日期不可选DisplayDateEndDateTime?可选择的日期范围上限晚于该日期的日期不可选FirstDayOfWeekDayOfWeek日历视图每周的起始星期IsTodayHighlightedbool是否在日历中高亮今天默认为truePlaceholderTextstring输入框为空时显示的占位提示文本UseFloatingPlaceholderbool是否使用浮动占位符输入后占位文本上浮示例限制用户只能在 2026 年内选择日期并将周一设为一周的第一天CalendarDatePicker SelectedDate{Binding SelectedDateTimeOffset} DisplayDateStart2026-01-01 DisplayDateEnd2026-12-31 FirstDayOfWeekMonday PlaceholderText请选择日期 UseFloatingPlaceholderTrue /主题源码解析控件长什么样SukiUI 的CalendarDatePicker主题定义于 SukiUI/Theme/CalendarDatePicker.axaml其ControlTheme通过Setter预设了如下视觉默认值Background为TransparentHeight固定为38BorderThickness为0,0,0,1即仅保留底部 1px 边框形成经典的下划线输入框外观FontSize为14Padding为4VerticalContentAlignment居中边框颜色使用SukiControlBorderBrush前景色使用SukiText占位文本颜色使用SukiLowText均随 SukiUI 明暗主题自动切换。整体模板结构模板最外层使用 SukiUI 自带的suki:GlassCardClassesDiscrete圆角取SmallCornerRadius即 8作为承载容器内部是一个ColumnDefinitions*,Auto的两列网格第一列PART_TextBox即输入文本框。模板将其背景、边框、圆角、前景色、占位符等属性全部TemplateBinding到控件本身并透传DataValidationErrors.Errors因此CalendarDatePicker可以直接参与表单校验校验错误提示与普通 TextBox 表现一致TextBox NamePART_TextBox ClassesNoShadow Background{TemplateBinding Background} BorderBrush{TemplateBinding BorderBrush} BorderThickness{TemplateBinding BorderThickness} DataValidationErrors.Errors{TemplateBinding (DataValidationErrors.Errors)} PlaceholderForeground{TemplateBinding PlaceholderForeground} UseFloatingPlaceholder{TemplateBinding UseFloatingPlaceholder} PlaceholderText{TemplateBinding PlaceholderText} /第二列PART_Button即日历下拉按钮。按钮本身BackgroundTransparent、FocusableFalse、ClipToBoundsFalse样式类为CalendarDropDown。其图标并非图片资源而是纯 XAML 绘制的小日历顶部一行用SukiPrimaryColor填充作为日历表头主体显示今天的日期数字绑定sys:DateTime.Today的Day属性并带有一个 1px 描边的边框。鼠标悬停时pointerover选择器表头背景切换为SukiPrimaryColor5提供轻量的按压反馈。弹出日历面板点击下拉按钮后弹出的是PART_PopupIsLightDismissEnabledTrue点击面板外部自动关闭。弹出内容为一个Margin15的圆角Border其Background为SukiStrongBackground、BoxShadow为SukiPopupShadow在明暗主题下都会带有柔和的投影与 14 的圆角内部再套一层PopupGradientBrush背景的Panel中央放置PART_Calendar即真正的日历本体。日历本体及其日按钮、表头的视觉样式由 SukiUI/Theme/Calendar/Calendar.axaml 及同目录下的CalendarItem.axaml、CalendarDayButton.axaml、CalendarButton.axaml共同提供形成统一的视觉语言。焦点态模板还通过样式选择器定义了焦点样式输入框获得焦点时底部边框切换为高亮色Style Selector^:focus /template/ TextBox#PART_TextBox Setter PropertyBorderBrush Value{DynamicResource ThemeBorderHighBrush} / /Style主题如何自动生效SukiUI 通过 SukiUI/Theme/Index.axaml 中的MergedDictionaries一次性引入全部控件主题其中就包括ResourceInclude Sourceavares://sukiUI/Theme/CalendarDatePicker.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/Calendar.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/CalendarButton.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/CalendarDayButton.axaml / ResourceInclude Sourceavares://sukiUI/Theme/Calendar/CalendarItem.axaml /因此只要应用已加载 SukiUI 主题在App.axaml中引用SukiUI.Theme或SukiTheme资源CalendarDatePicker无需额外引入样式即可自动呈现 SukiUI 风格。更多使用场景除了 Misc 示例页CalendarDatePicker还用于 DataGridView.axaml 的编辑场景中作为数据表格某列的可编辑日期输入控件CalendarDatePicker SelectedDate{Binding Updated} /这印证了该控件可无缝嵌入表格、表单等复杂容器配合DataValidationErrors.Errors透传能力完成校验闭环。若需要查看完整可运行示例可参考 Demo 项目中的 MiscView.axaml与Calendar、DatePicker、TimePicker同屏对比展示控件的中文说明文档位于 calendardatepicker.md。赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐SukiUI CalendarDatePicker 日期选择控件完整指南从 XAML 绑定到主题源码剖析SukiUI CalendarDatePicker 日期选择控件完整指南从 XAML 绑定到主题源码剖析 SukiUI 是为 AvaloniaUI 打造的主题UI组件桌面应用SukiUI DatePicker 控件实战指南滚轮式日期选择的用法、绑定与主题源码剖析SukiUI DatePicker 控件实战指南滚轮式日期选择的用法、绑定与主题源码剖析 SukiUI 是基于 AvaloniaUI 的现代 UI 主题库其UI组件桌面应用SukiUI 日历控件实战指南Calendar 日期显示与选择用法详解SukiUI 日历控件实战指南Calendar 日期显示与选择用法详解 SukiUI 是基于 AvaloniaUI 的开源主题库其中 Calendar 是一UI组件桌面应用上一篇PushDeer推送证书配置终极解决iOS和Android推送难题下一篇GHelper 完整指南用单个 exe 在 5 分钟内涵养一台华硕游戏本创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考