使用通用附加属性来减少 WPF 元素自定义样式的多余代码 魏刘宏 2022 年 11 月 07 日 本文将以WPFUI（https://gitee.com/dlgcy/WPFUI）项目中的 ComboBox...一、自定义元素样式的方法 在开发 WPF 应用的过程中，我们常常需要给元素设置样式，其中一种方法是创建自定义样式，套路如下： 在设计器的元素上右键 --> 编辑模板 --> 编辑副本： 选择名称和位置后点击确定即可创建...其实针对这种需求，有另一个做法：创建一个用户控件来继承这个元素，样式设置及最终使用都改为这个用户控件，然后需要新增设置的属性就在用户控件后台创建依赖属性。...4、可被借用的属性数量有限，有可能满足不了需要个性化设置的地方数量。 5、等等...... 后来某一天，我突然灵光乍现，想到可以创建一个通用的附加属性代理类（或者说是辅助类），来满足这种场景。...原创文章，转载请注明：转载自独立观察员 本文链接地址:使用通用附加属性来减少 WPF 元素自定义样式的多余代码 [http://dlgcy.com/use-attached-dependency-property-to-reduce-style-code
flex布局 原理 任何容器都可指定为flex布局 当为父元素指定为flex布局之后，子元素的float,clear,vertical-align都将失效 一.flex布局父项常见属性 1.flex-direction...rem适配布局 ####一.rem基础 em是相对于 父元素的字体大小来说的 rem是相对于html 的字体大小来说的 rem的优点是可以通过修改html的字体大小来改变页面中元素的大小 ####二.媒体查询...less语法 1.less嵌套 子元素的样式直接写到父元素里 如果有伪类，伪元素选择器，交集选择器，内层选择器之前要加**&** .nav { .logo { color: green; } &::before...font-size的大小 页面元素的rem值= 页面元素值(px)/ html font-size的大小 响应式布局(Bootstrap框架） 一.响应式布局容器 响应式需要一个父级作为布局容器，来配合子元素实现变化效果...在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的布局方式和大小。
三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、...给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...after伪类 清浮动方法（现在主流方法），给父级添加清浮动的伪类after，且after中content为空 2.6.1 after 伪类 （类似于hover伪类...给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...after伪类 清浮动方法（现在主流方法），给父级添加清浮动的伪类after，且after中content为空 2.6.1 after 伪类 （类似于hover伪类
属性，子元素会居中，对大多数内联元素有效 使用弹性盒布局：父元素添加弹性盒，控制子元素的水平位置居中 父元素添加弹性盒（display:flex），且添加justify-content:center;和...面向对象的三大特征 封装：把一种事物的方法和属性封装到对象中 继承：子对象可以继承父对象的属性和方法 多态：同一个方法，自定义和父定义的内容不同 面向对象编程的优势 易维护，易复用，效率高，易扩展（耦合性比较低...对继承的看法 继承的概念 父类的属性和方法可以被子类继承，子类可以调用父类的属性和方法 前端常用的继承方式 继承方式 优点 缺点 原型和原型链继承：把实例的父类给子函数的原型 优点:1、非常纯粹的继承关系...，实例是子类的实例，也是父类的实例2、类新增原型方法和属性，子类都能访问到3、简单，易于实现 缺点：1、因为原型对象的属性是共享的，修改一个对象属性，其他对象的该属性也变了2、创建子类实例时，无法向父类构造函数传递参数...事件代理的实现 确定要添加事件元素的父级元素 给父元素定义事件，监听子元素的冒泡事件 使用event.target来定位触发事件冒泡的子元素。
get { return GetValue(); } 8 set { SetValue(value); } 9 } 属性上的特性可以是...布局流程和WPF差不多，先Measure再Arrange，如果自定义布局容器，可以参考WPF的代码 元素布局，支持百分比布局，margin调整定位，默认居中。...);} 选择所有TextBlock类型的元素 .test{Foreground:rgb(255,0,0);} 选择所有包含test 类名的元素，类名通过Classes属性添加 #test{Foreground...查看内置模板代码，详细模板代码看压缩包里的文档，复制过去，自己根据需要修改 对Mac开发不熟悉，Mac系统下还不能输入中文，有没有猛男赐教一下，怎么调用输入法，打开关闭输入法和控制输入法候选词位置 我感觉模板设计的不够好...CPF 下载 DSkin强大、自定义的.NET皮肤界面库，让软件开发更迅速、美观、炫丽。还提供Html快速构建UI的开发模式，入门简单，功能强大
伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。...方法：把父容器的高度撑起来，考虑到浮动了的元素并没有脱离正常文档流，而其它元素会围绕着它环绕，所以清除浮动简单有效的办法就是让环绕的元素不可环绕，把它变成一把尺子，放在最后面，把所有浮动的元素顶起来，而这把尺子就是一个设置了...伪元素配合使用，来插入生成内容。...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形 有没有办法只让容器的形状倾斜而保持其内容不变呢...但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘 解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面 光说不练，假把式试一试 5.
伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。...方法：把父容器的高度撑起来，考虑到浮动了的元素并没有脱离正常文档流，而其它元素会围绕着它环绕，所以清除浮动简单有效的办法就是让环绕的元素不可环绕，把它变成一把尺子，放在最后面，把所有浮动的元素顶起来，而这把尺子就是一个设置了...1.counter-reset: 属性创建或者重置一个或多个计数器； 2.counter-increment: 属性递增一个或多个计数器值； 3.content: 与:before 及:after 伪元素配合使用...没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技； 4.平行四边形 有没有办法只让容器的形状倾斜而保持其内容不变呢...但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘 解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面 5.
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。 详细的资料可以参考：《CSS 盒模型详解》[53] 2.CSS 选择符有哪些？...如果按堆栈视角，::after生成的内容会在::before生成的内容之上。 回答： 在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。...我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还 可以使用flex-wrap来规定当一行排列不下时的换行方式。.../*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } （5）IE下，可以使用获取常规属性的方法来获取自定义属性...，也可以使用getAttribute()获取自定义 属性；Firefox下，只能使用getAttribute()获取自定义属性 解决方法：统一通过getAttribute()获取自定义属性。
，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式 修改常规流中元素的...解决方案是加一个全局的*{margin:0;padding:0;}来统一 IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性; Firefox下,...只能使用getAttribute()获取自定义属性。...在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行 css3 flexbox 布局： .container{display...双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。...IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。...display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 34 你对line-height是如何理解的？...多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。 39 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
看浏览器所在主机中 有没有fallback指定的这些字体中的一个。 fallback并不是针对整个body元素的，而是 对每个字符都会采用fallback机制。...* cursor指针 非样式布局 - CSS Hack 用来处理特定浏览器的办法，来兼容不同浏览器，在一部分浏览器上生效的css。...主要适用于小图片：大的图片做成文本 额外增加的体积较大，解码base64花销也较大。 * 伪元素 伪类 的区别 1....伪类是表示 一种状态的(比如某元素 处在 鼠标悬停其上的状态hover)。 2. 伪元素 是真实存在的状态，在页面中是可以显示内容的。 3. 伪元素使用双冒号，伪类单冒号。...由于浏览器兼容性的问题，before after需要写单冒号 或者 单双冒号都要写，因为有些浏览器只接受 单冒号的父元素。 * 如何美化checkbox 1.
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。 详细的资料可以参考： 《CSS 盒模型详解》 2.CSS 选择符有哪些？...如果按堆栈视角，::after生成的内容会在::before生成的内容之上。 回答： 在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。...我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还 可以使用flex-wrap来规定当一行排列不下时的换行方式。...，也可以使用getAttribute()获取自定义 属性；Firefox下，只能使用getAttribute()获取自定义属性 解决方法：统一通过getAttribute()获取自定义属性。...（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。 详细的资料可以参考： 《CSS 盒模型详解》 2.CSS 选择符有哪些？...我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。...，也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。...，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。...（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的pedding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。 采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。...+background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } * IE下,可以使用获取常规属性的方法来获取自定义属性..., 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。...目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？ 可以通过css3里面的动画属性scale进行缩放。 22、移动端的布局用过媒体查询吗？...当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载 （只不过不会被应用）。 包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。
table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承 display 属性的值 position的值relative和absolute定位原点是？...+background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } * IE下,可以使用获取常规属性的方法来获取自定义属性..., 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。...解决方法:统一通过getAttribute()获取自定义属性。...如何修改chrome记住密码后自动填充表单的黄色背景 ？ 你对line-height是如何理解的？ 设置元素浮动后，该元素的display值是多少？
使用圣杯布局首先需要在center元素外部包含一个div,包含的div需要设置float属性使其形成一个BFC，并且这个宽度和margin的负值进行匹配 三、左边定宽，右边自适应 方案一：左边设置浮动，...5.计算BFC的高度，浮动元素也参与计算 BFC作用： 1.自适应两栏布局 2.可以阻止元素被浮动元素覆盖 3.可以包含浮动元素---清除内部浮动 > > > 原理: 触发父div的BFC属性，使下面的子...图片中的 title属性是在鼠标在移动到元素上的文本提示。...import 会覆盖页面内任何位置定义的元素样式 2.作为style属性写在元素内的样式 3.id选择器 4.类选择器 5.标签选择器 6.通配符选择器（*） 7.浏览器自定义或继承 同一级别：后写的会覆盖先写的...节点属性 和 js属性 节点属性 : 元素自带属性 js属性 : js中自定义的属性 当js属性为合法节点属性的时候，可以修改节点属性的值 //此时object 为节点对象（node） var object
语法：选择器1~选择器2{} 2、属性选择器 1、什么是属性选择器 允许使用元素附带的属性及其值，来匹配页面的某些元素...，class属性值是一个由多个类选择器来组成的值列表(多类选择器)，value是该列表中的一个独立选择器 的元素 ex: 1、div...2、url() : 生成一副图像 4、解决的两个问题 1、浮动元素父元素的高度问题 2、解决外边距的溢出问题 3、弹性布局(难点) 1、什么是弹性布局...2、概念 1、容器(Container) 使用弹性布局属性的元素称之为"弹性布局容器"，简称为 "容器"，容器中的子元素，可以按照弹性布局的方式进行排列...每个项目两侧的间隔是相等的 5、属性：align-items 作用：定义项目在交叉轴上如何对齐(仅限一行项目时使用
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
