淄博网站建设同圈科技,网页设计作品模板,如何注销公司,漯河市建设局网站WPF 用户控件分享之边上带输入框的圆圈独立观察员 2022 年 8 月 20 日最近有这样一个需求#xff0c;有一圈圆形#xff0c;每个圆形边上有个输入框#xff0c;以下是完成后的效果图#xff1a;拿到这个需求后#xff0c;分析界面上每个圆形和输入框应该视为一个用户控件有一圈圆形每个圆形边上有个输入框以下是完成后的效果图拿到这个需求后分析界面上每个圆形和输入框应该视为一个用户控件且输入框相对于圆形的位置不是一致的所以应该要能够通过一个属性来设置输入框的位置。那么就以这个为突破口创建一个用户控件在代码隐藏页中添加一个用于控制输入框位置的依赖属性 “TextBoxPlacement”【题外话]】添加依赖属性的方法为输入 “propdp” 然后按 Tab 键也就是使用官方提供的代码片段然后修改类型、修改名称、修改所属类、修改默认值如下继续说回 TextBoxPlacement 属性我给它的类型是 PlacementMode这是借用的 Popup 控件的方位属性这是个枚举有很多取值情况本次只是用到了它的子集上下左右好了控制位置的属性有了那么怎么动态切换呢别急我们先来看看整个用户控件的界面布局可以看到界面上就只有一个 Control 元素给它设置了一个样式将在该样式中使用 DataTrigger数据触发器来切换不同的控件模板从而改变布局。最开始想用数据模板选择器的后来发现那个应该是适用于列表控件中依据数据不同从而动态选择子项的模板的情况不适用于这种用户控件中。最重要的就是给 Control 设置的样式 “CircleWithTextBoxStyle”上下左右这四种情况都是通过设置 Control 的 Template 的属性具体是控件模板 ControlTemplate来实现不同的布局的。默认是输入框在圆圈右边的布局其余的 左、上、下 则是通过数据触发器 DataTrigger 来实现的数据触发器绑定 UserControl 的 TextBoxPlacement 属性前面我们添加的那个依据不同的值来切换不同的控件模板。至于四种情况的布局实现容器都是 StackPanel左和右的时候是横向的上和下的时候是纵向的左和上的时候输入框部分写在前面右和下的时候输入框部分写在后面。圆圈和输入框部分也分别是一个 Control 元素通过样式设置模板样式如下圆圈就是一个 Border使用样式 BorderStyle。圈内文本是一个 TextBlock使用样式 InfoStyle文本内容绑定了一个依赖属性 CircleInfo。输入框就是一个 TextBox使用样式 TextBoxStyle。先来看看圆圈内文本样式涉及两个依赖属性一个是文字颜色属性 CircleForeground另一个是文字大小属性 InfoFontSize输入框也是用这个设置文字大小的具体如下然后是圆圈和输入框的样式涉及圆圈边框色属性 CircleBorderBackground圆圈背景色属性 CircleBackground圆圈直径和输入框宽度的共用属性 CircleAndTextBoxWidth以及输入框的值属性 TextBoxValue 【题外话]】此处用到了一个叫做 CalcBinding 的库可以绑定表达式这样就省去了转换器感兴趣的朋友可以自己搜索研究一下。比如此处的圆圈是用宽高相等的 Border然后圆角 CornerRadius 设为宽高的一半直接绑定为 Width / 2 即可十分方便。再比如输入框和圆圈等宽高度为宽度的五分之三直接绑定 Width * 3 / 5 即可。后面提到的依赖属性如下好了整个用户控件都讲完了那么如何使用呢很简单直接放在界面上然后设置需要的依赖属性即可此 Demo 源码地址文末会给出开局那幅图一整圈的布局也可以浅看一下其实也是分为上下左右四部分通过 ItemsControl 来绑定数据然后在数据模板中使用本文介绍的用户控件样式如下一些属性进行了设置和绑定由于界面上的编号不是按布局的顺序来的所以初始化时做了些处理Demo 源码地址子模块中有用户控件源码https://gitee.com/dlgcy/DLGCY_WPFPractice/tree/Blog20220820 全文完感谢阅读WPF分享一个 WPF 气泡弹框WPF 表单验证之 INotifyDataErrorlnfo 接口的使用示例[翻译] WPF 中用户控件 DataContext/Binding 和依赖属性的问题OxyPlot 导出图片及 WPF 元素导出为图片的方法让 WPF 的 RadioButton 支持再次点击取消选中的功能WPF DataGrid 如何将被选中行带到视野中WPF 触屏事件后触发鼠标事件的问题及 DataGrid 误触问题WPF DataGrid 通过自定义表头模拟首行固定WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换【翻译】WPF 中附加行为的介绍 Introduction to Attached Behaviors in WPFWPF 使用 Expression Design 画图导出及使用 Path 画图WPF MVVM 弹框之等待框解决 WPF 绑定集合后数据变动界面却不更新的问题使用 ObservableCollectionWPF 消息框 TextBox 绑定新数据时让光标和滚动条跳到最下面真・WPF 按钮拖动和调整大小WPF MVVM 模式下的弹窗WPF 让一组 Button 实现 RadioButton 的当前样式效果WPF 原生绑定和命令功能使用指南WPF 用户控件的自定义依赖属性在 MVVM 模式下的使用备忘在WPF的MVVM模式中使用OCX组件第三方库使用WPF 表格控件 ReoGrid 的简单使用OxyPlot.WPF 公共属性一览OxyPlot.Wpf 图表控件使用备忘
