成都seo网站建设,ppt页面设计模板,公司网站上的员工风采怎么做,wordpress主题集成插件下载设计器的使用
设计器预览
在window和usercontrol中#xff0c;在代码中修改了控件#xff0c;代码正确情况下#xff0c;设计器中就可以实时看到变化#xff0c;但是在样式#xff08;Styles#xff09;文件中#xff0c;无法直接看到#xff0c;需要使用设计器预览D…设计器的使用
设计器预览
在window和usercontrol中在代码中修改了控件代码正确情况下设计器中就可以实时看到变化但是在样式Styles文件中无法直接看到需要使用设计器预览Design.PreviewWith标签 在Design.PreviewWith中修改Border的Padding等属性设置预览区域大小 Design.PreviewWithBorder Width500 Height500 Padding20!-- Add Controls for Previewer Here --/Border/Design.PreviewWith在Border内部添加需要预览的控件即可 如果要预览多个控件就跟在WPF中规则一样先在Border加一个布局控件然后在布局控件中随便放多少个都行 绑定预览
在V11版本中默认使用了mvvm模式所以很多属性通过绑定实现但是在开发过程中需要预览则需要使用Design.DataContext标签在里面放上对面的viewmodel。 Design.DataContext!-- This only sets the DataContext for the previewer in an IDE,to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) --vm:MainViewModel //Design.DataContext需要注意这个只是预览用需要运行绑定则需要在别的地方设置
根据代码注释可以知道这仅设置 IDE 中预览器的 DataContext要设置运行时的实际 DataContext请在代码中设置 DataContext 属性查看app.axaml.cs
在app.axaml.cs中设置
样式、资源
样式、资源文件的定义和引用见另一篇:Net跨平台UI框架Avalonia入门-资源和样式
样式
样式基础
一个样式基本的定义使用Style定义样式Setter定义具体的控件属性和值然后通过选择器Selector来定义一个样式的名称。
样式使用在控件通过Classes来使用样式
官方模版
Style Selectorselector syntaxSetter Propertyproperty name Valuenew value/...
/Style示例
UserControl ....UserControl.StylesStyle SelectorButton.btn1Setter PropertyBackground ValueRed//Style/UserControl.StylesGridButton Classesbtn1 Content12345//Grid
/UserControl
效果
样式选择器Selector语法
avalonia样式中使用Setter对属性和值的定义与WPF一样选择器Selector更类似于CSS中使用的语法
1.选择器定义控件类型
SelectorControlType(控件类型) 表示在style应用范围里的这类控件都默认使用这个样式控件不需要写Classes来使用样式
Style SelectorButton示例 UserControl ....UserControl.StylesStyle SelectorButtonSetter PropertyBackground ValueRed//Style/UserControl.StylesGridButton Content12345//Grid/UserControl2.定义样式名称
在选择器中定义样式的名称SelectorControlType(控件类型).Name(样式名称)然后通过Classes来使用对应的样式
!--定义--
Style SelectorButton.btn1/Style
!--使用--
Button Classesbtn1/示例: UserControl ....UserControl.StylesStyle SelectorButton.btn1Setter PropertyBackground ValueRed//Style/UserControl.StylesGridButton Classesbtn1 Content12345//Grid
/UserControl 3.同时使用多个样式
在Classes中通过空格分隔写多个样式名称
Classesstyle1 style2示例
UserControl ...UserControl.StylesStyle SelectorButton.btn1Setter PropertyBackground ValueRed//StyleStyle SelectorButton.btn2Setter PropertyForeground ValueWhite//Style/UserControl.StylesGridButton Classesbtn1 btn2 Content12345//Grid
/UserControl效果 4.交互状态效果的实现
控件悬停、按下、获取焦点等等特殊状态在Avalonia中通过伪类Pseudo Classes来实现伪类在选择器中的名称始终以冒号开头。
在Avalonia中可以用的相关伪类如下
伪类描述:pointerover指针输入当前悬停在控件的边界内部:focus控件拥有输入焦点:disabled控件无法响应用户交互:pressed按钮控件处于按下状态:checked复选框控件已选中显示勾选标记
有条件的也可以自己定义。Pseudo Classes
使用伪类定义样式
Selector中直接SelectorControlType(控件类型):PseudoClasses伪类 和 SelectorControlType(控件类型).Name(样式名称):PseudoClasses伪类两种定义方式都可以使用方式跟上面的一样直接生效或者使用样式名称。
示例 Style SelectorBorder:pointeroverSetter PropertyBackground ValueRed//StyleStyle SelectorBorder.bd1:pointeroverSetter PropertyBackground ValueRed//Style效果 使用伪类的坑
1.Border必须有内容或者背景有初始化值否则无法触发进入的效果鼠标放在空白区域
解决方案
在样式中给属性添加默认值
注意不能直接在控件上赋默认值否则就无法触发
两种写法
一种另写一个样式 Style SelectorBorderSetter PropertyBackground ValueWhite//StyleStyle SelectorBorder:pointeroverSetter PropertyBackground ValueRed//Style
效果
另一种就是嵌套样式在下面嵌套样式小节效果一样
2.另一个坑就是其他控件如Button使用伪类直接改Button属性还是无效 如下设置悬停颜色为红色但是无效
这跟avalonia样式写法和工作原理有关在下面选择器控制模版template里面的控件详细写
5.嵌套样式
在Style中定义一个Style里面的Selector延续外面的Selector使用^来替代上一级选择器的内容
Style SelectorBorderSetter PropertyBackground ValueWhite/Style Selector^:pointeroverSetter PropertyBackground ValueRed//Style/Style效果 可以看到他的效果和跟下面分开两个样式的效果是一样的 Style SelectorBorderSetter PropertyBackground ValueWhite//StyleStyle SelectorBorder:pointeroverSetter PropertyBackground ValueRed//Style
6.样式增加属性条件
让样式在一定条件下生效可以在Selector中增加[Propertyvalue]来限制条件
示例 UserControl ...UserControl.StylesStyle SelectorButton[Content12345]Setter PropertyBackground ValueGreen//StyleStyle SelectorButton.btn1[Content123456]Setter PropertyBackground ValueGreen//Style/UserControl.StylesStackPanelButton Content12345/Button Content123/Button Classesbtn1 Content123456//StackPanel
/UserControl效果 7. 控制控件模板内部样式
Avalonia大部分控件都是继承于TemplatedControl控件在默认的控件主题(ControlTheme)中定义了Template属性有时候需要编写自己的样式就需要直接操作Templae里面的控件。
并且在源码中很多伪类的样式如pointerover、pressed等都的样式都已经定义了基本的样式所以导致了上面定义Button之类的控件的伪类样式无效。
如果要进行Template里面一些控件样式的控制和修改直接写了样式无法生效的情况最好先有一份Avalonia的源码照着源码改。下图就是一个button的源码在Avalonia.Themes.Fluent项目的Controls文件夹下。 Selector的写法Selector控件类型:伪类 /template/ 内部控件的类型#内部控件的名称如果内部控件类型唯一可以不写内部控件的名称。
如下示例写了一个悬停变红的样式如下几种写法都是正确的跟之前几项语法可以自由组合 Style SelectorButton:pointerover /template/ ContentPresenterSetter PropertyBackground ValueRed//StyleStyle SelectorButton:pointerover /template/ ContentPresenter#PART_ContentPresenteSetter PropertyBackground ValueRed//StyleStyle SelectorButton.btn1:pointerover /template/ ContentPresenter#PART_ContentPresenterSetter PropertyBackground ValueRed//Style实现的效果
