9. Controls 控件体系位置Source/Controls控件项目通常包含Control.xaml / Control.xaml.cs Themes/Generic.xaml Provider / Service / Presenter / Model控件总览控件项目功能H.Controls.Adorner装饰层、浮层、拖拽。H.Controls.Chart2D二维图表。H.Controls.Chart2D.Presenter图表展示器。H.Controls.ColorBox颜色选择框。H.Controls.ColorPicker高级颜色选择器。H.Controls.Diagram*流程图、流程图扩展、工作流。H.Controls.DockDock 停靠布局。H.Controls.DrawerBox抽屉面板。H.Controls.FavoriteBox收藏夹。H.Controls.FilterBox数据过滤器。H.Controls.FilterColumnDataGrid表头过滤表格。H.Controls.Form自动表单。H.Controls.Form.PropertyItem表单属性项扩展。H.Controls.GridSplitterBox分割布局。H.Controls.HorseTextBlock跑马灯文本。H.Controls.ImageColorPicker图片取色。H.Controls.NavigationBox导航控件。H.Controls.OrderBox排序控件。H.Controls.OutlookBarOutlook 风格导航。H.Controls.PagerBox分页控件。H.Controls.Panel面板集合。H.Controls.PDFPDF 查看。H.Controls.PrintBox打印。H.Controls.ProgressButton进度按钮。H.Controls.PropertyGrid属性网格。H.Controls.QRCoderBox二维码。H.Controls.RepositoryBox仓储数据页面。H.Controls.ROIBox图像 ROI 区域。H.Controls.ScheduleBox计划任务。H.Controls.Step步骤条。H.Controls.TagBox标签控件。H.Controls.TransitionBox过渡动画。H.Controls.TreeLayoutBox树布局。H.Controls.TreeListView树表。H.Controls.Vlc视频播放。H.Controls.ZoomBox缩放平移容器。H.Controls.ZoomBox.Extension图片缩放查看扩展。重点控件H.Controls.Form它的思想是输入一个对象 - 反射读取属性 - 根据属性类型创建编辑器 - 自动生成表单典型映射属性类型编辑器boolBoolPropertyItemDateTimeDateTimePropertyItemenumEnumPropertyItemstring/int/doubleTextPropertyItemICommandCommandPropertyItem复杂对象ObjectPropertyItem核心逻辑在H.Controls.Form/Provider/PropertyInfoExtention.cs。重点控件H.Controls.Chart2D子目录作用Axis坐标轴、网格线、极坐标。Legend图例。Marker数据点标记。Provider图层、工具栏、抽稀算法。Series曲线、柱状图、饼图、散点等。重点控件H.Controls.Diagram适合流程编排、工艺流程图、节点编辑器、可视化工作流。建议先运行H.Test.Diagram再看核心节点、连线、画布、拖拽和缩放逻辑。Controls 控件体系详解一、控件体系概述控件层是 WPF-Control 框架的UI展示核心负责提供各种可复用的 UI 组件。核心原则控件负责显示不直接处理业务逻辑。二、控件结构2.1 典型控件文件结构H.Controls.Form/ ├── Form.xaml # UI 定义 ├── Form.xaml.cs # 控件逻辑 ├── FormPresenter.xaml # 展示器 ├── PropertyItems/ # 属性编辑器集合 │ ├── BoolPropertyItem.xaml │ ├── DateTimePropertyItem.xaml │ ├── EnumPropertyItem.xaml │ └── TextPropertyItem.xaml ├── Provider/ # 提供器 │ └── PropertyInfoExtention.cs ├── Themes/ │ └── Generic.xaml # 默认样式 └── Attributes/ # 属性标记 └── PropertyItemAttribute.cs2.2 控件分类类别控件功能布局控件Dock,GridSplitterBox,Panel,TransitionBox布局管理表单控件Form,PropertyGrid,ColorBox,ColorPicker数据编辑数据控件FilterBox,FilterColumnDataGrid,PagerBox,TreeListView数据展示图表控件Chart2D,Chart2D.Presenter数据可视化流程控件Diagram,Diagram.Extension流程图、工作流多媒体控件PDF,Vlc,ZoomBox文档、视频、图片导航控件NavigationBox,OutlookBar导航菜单交互控件Adorner,DrawerBox,Step,TagBox交互组件三、重点控件详解3.1 H.Controls.Form - 自动表单核心思想输入一个对象 │ ▼ 反射读取属性 │ ▼ 根据属性类型创建编辑器 │ ▼ 自动生成表单属性类型映射属性类型编辑器说明boolBoolPropertyItem复选框DateTimeDateTimePropertyItem日期选择器enumEnumPropertyItem下拉选择string/int/doubleTextPropertyItem文本框ICommandCommandPropertyItem按钮复杂对象ObjectPropertyItem嵌套表单核心实现// PropertyInfoExtention.cs - 属性到编辑器的映射逻辑publicstaticIPropertyItemCreate(thisPropertyInfoinfo,objectobj){// 1. 检查自定义属性标记PropertyItemAttributeeditorinfo.GetCustomAttributePropertyItemAttribute();if(editor?.Type!nulltypeof(IPropertyItem).IsAssignableFrom(editor.Type))returnActivator.CreateInstance(editor.Type,info,obj)asIPropertyItem;// 2. 根据类型匹配编辑器if(typeof(ICommand).IsAssignableFrom(info.PropertyType))returnnewCommandPropertyItem(info,obj);Typetypeinfo.PropertyType;if(typetypeof(DateTime))returnnewDateTimePropertyItem(info,obj);if(typetypeof(bool))returnnewBoolPropertyItem(info,obj);if(type.IsEnum)returnnewEnumPropertyItem(info,obj);// 3. 支持 TypeConverter 的类型if(TextPropertyItem.IsTypeConverter(info))returnnewTextPropertyItem(info,obj);if(TextPropertyItem.IsIConvertible(info))returnnewTextPropertyItem(info,obj);// 4. 其他基元类型if(info.PropertyType.IsPrimitive||info.PropertyTypetypeof(string))returnnewTextPropertyItem(info,obj);// 5. 默认使用对象编辑器returnnewObjectPropertyItemobject(info,obj);}使用示例步骤1定义数据模型publicclassUserInfo{[Display(Name用户名)]publicstringName{get;set;}[Display(Name年龄)]publicintAge{get;set;}[Display(Name出生日期)]publicDateTimeBirthday{get;set;}[Display(Name是否启用)]publicboolIsEnabled{get;set;}[Display(Name角色)]publicUserRoleRole{get;set;}publicICommandSaveCommand{get;set;}publicUserInfo(){SaveCommandnewRelayCommand(_{/* 保存逻辑 */});}}publicenumUserRole{[Display(Name管理员)]Admin,[Display(Name普通用户)]User,[Display(Name访客)]Guest}步骤2在 XAML 中使用Windowxmlns:formclr-namespace:H.Controls.Formform:FormSelectObject{Binding UserInfo}//Window步骤3绑定 ViewModelpublicclassMainViewModel:BindableBase{privateUserInfo_userInfonewUserInfo();publicUserInfoUserInfo{get_userInfo;set{_userInfovalue;RaisePropertyChanged();}}}自定义编辑器// 1. 创建自定义属性标记[AttributeUsage(AttributeTargets.Property)]publicclassCustomEditorAttribute:PropertyItemAttribute{publicCustomEditorAttribute(Typetype):base(type){}}// 2. 创建自定义编辑器publicclassMyCustomEditor:IPropertyItem{// 实现编辑器逻辑}// 3. 在属性上标记publicclassMyModel{[CustomEditor(typeof(MyCustomEditor))][Display(Name自定义字段)]publicstringCustomField{get;set;}}3.2 H.Controls.Chart2D - 二维图表组件结构Chart2D/ ├── Axis/ # 坐标轴 │ ├── Axis.xaml │ ├── GridLine.xaml │ └── Polar.xaml ├── Legend/ # 图例 │ └── Legend.xaml ├── Marker/ # 数据标记 │ └── Marker.xaml ├── Series/ # 数据系列 │ ├── CurveLine.xaml # 曲线图 │ ├── Bar.xaml # 柱状图 │ ├── Pie.xaml # 饼图 │ └── Scatter.xaml # 散点图 └── Provider/ # 提供器 ├── Layer.xaml └── ThumbToolBar.xaml使用示例Windowxmlns:chartclr-namespace:H.Controls.Chart2Dchart:Chart!-- 坐标轴 --chart:AxisXTitle时间YTitle数值/!-- 数据系列 --chart:CurveLineSeriesName温度Data{Binding TemperatureData}/chart:BarSeriesName湿度Data{Binding HumidityData}/!-- 图例 --chart:Legend//chart:Chart/Window3.3 H.Controls.Diagram - 流程图适用场景流程编排工艺流程图节点编辑器可视化工作流核心概念概念说明Node节点代表流程中的一个步骤Link连线连接节点Port端口节点上的连接点Canvas画布承载所有节点和连线数据模型// 节点数据publicinterfaceINodeData{stringId{get;}stringName{get;set;}doubleX{get;set;}doubleY{get;set;}}// 连线数据publicinterfaceILinkData{stringId{get;}stringSourceId{get;set;}stringTargetId{get;set;}}使用示例Windowxmlns:diagramclr-namespace:H.Controls.Diagramdiagram:DiagramNodes{Binding Nodes}Links{Binding Links}//Window四、控件使用流程4.1 基本步骤1. 添加 NuGet 包引用 │ ▼ 2. 在 XAML 中添加命名空间 │ ▼ 3. 使用控件并设置属性 │ ▼ 4. 在 ViewModel 中准备数据 │ ▼ 5. 绑定数据和命令4.2 示例使用 TagBoxWindowxmlns:controlsclr-namespace:H.Controls.TagBoxcontrols:TagBoxItemsSource{Binding Tags}SelectedItems{Binding SelectedTags}//WindowpublicclassMainViewModel:BindableBase{privateObservableCollectionstring_tagsnewObservableCollectionstring{重要,普通,待处理,已完成};publicObservableCollectionstringTags{get_tags;set{_tagsvalue;RaisePropertyChanged();}}privateObservableCollectionstring_selectedTagsnewObservableCollectionstring();publicObservableCollectionstringSelectedTags{get_selectedTags;set{_selectedTagsvalue;RaisePropertyChanged();}}}五、自定义控件开发5.1 创建自定义控件步骤步骤1定义控件类publicclassMyCustomControl:Control{staticMyCustomControl(){DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl),newFrameworkPropertyMetadata(typeof(MyCustomControl)));}// 定义依赖属性publicstringTitle{get{return(string)GetValue(TitleProperty);}set{SetValue(TitleProperty,value);}}publicstaticreadonlyDependencyPropertyTitlePropertyDependencyProperty.Register(Title,typeof(string),typeof(MyCustomControl),newPropertyMetadata());}步骤2创建样式!-- Themes/Generic.xaml --StyleTargetType{x:Type local:MyCustomControl}Setter PropertyTemplate Setter.Value ControlTemplate TargetType{x:Type local:MyCustomControl} Border Background{TemplateBinding Background}BorderBrush{TemplateBinding BorderBrush}BorderThickness{TemplateBinding BorderThickness} TextBlock Text{TemplateBinding Title}/ /Border /ControlTemplate /Setter.Value /Setter/Style步骤3使用控件Windowxmlns:localclr-namespace:MyControlslocal:MyCustomControlTitle我的自定义控件//Window5.2 依赖属性最佳实践publicstaticreadonlyDependencyPropertyValuePropertyDependencyProperty.Register(Value,// 属性名typeof(string),// 属性类型typeof(MyControl),// 所有者类型newPropertyMetadata(// 默认值和回调默认值,// 默认值(d,e){// 属性变更回调MyControlcontroldasMyControl;control.OnValueChanged(e);}));六、控件与 MVVM 集成6.1 数据绑定controls:FormSelectObject{Binding User}/6.2 命令绑定ButtonCommand{Binding SaveCommand}Content保存/6.3 双向绑定TextBoxText{Binding Name, ModeTwoWay}/七、样式与主题7.1 默认样式每个控件都在Themes/Generic.xaml中定义默认样式ResourceDictionaryStyleTargetType{x:Type local:Form}!-- 默认样式定义 --/Style/ResourceDictionary7.2 自定义样式Window.ResourcesStyleTargetType{x:Type form:Form}Setter PropertyTitleWidthValue120/ Setter PropertyBackgroundValueLightGray//Style/Window.Resources八、总结控件体系是 WPF-Control 框架的UI基础具有以下特点丰富的控件库涵盖表单、图表、流程等多种场景自动表单通过反射自动生成 UI减少重复代码可扩展性支持自定义编辑器和控件MVVM 友好完美支持数据绑定和命令模式样式可定制通过主题系统统一管理外观掌握控件体系的使用可以快速构建专业的 WPF 应用界面。