Net跨平台UI框架Avalonia入门-样式详解

设计器的使用

设计器预览

在window和usercontrol中，在代码中修改了控件，代码正确情况下，设计器中就可以实时看到变化，但是在样式（Styles）文件中，无法直接看到，需要使用设计器预览Design.PreviewWith标签

在这里插入图片描述

在Design.PreviewWith中修改Border的Padding等属性设置预览区域大小，

  <Design.PreviewWith><Border Width="500" Height="500" Padding="20"><!-- 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 Selector="selector syntax"><Setter Property="property name" Value="new value"/>...
</Style>

示例

<UserControl ....><UserControl.Styles><Style Selector="Button.btn1"><Setter Property="Background"  Value="Red"/></Style></UserControl.Styles><Grid><Button Classes="btn1" Content="12345"/></Grid>
</UserControl>

效果：
在这里插入图片描述

样式选择器（Selector）语法

avalonia样式中，使用Setter对属性和值的定义与WPF一样，选择器Selector更类似于CSS中使用的语法

1.选择器定义控件类型

Selector="ControlType(控件类型)" 表示在style应用范围里的这类控件都默认使用这个样式，控件不需要写Classes来使用样式

<Style Selector="Button">

示例：

 <UserControl ....><UserControl.Styles><Style Selector="Button"><Setter Property="Background"  Value="Red"/></Style></UserControl.Styles><Grid><Button Content="12345"/></Grid></UserControl>

在这里插入图片描述

2.定义样式名称

在选择器中定义样式的名称Selector="ControlType(控件类型).Name(样式名称)"，然后通过Classes来使用对应的样式

<!--定义-->
<Style Selector="Button.btn1"></Style>
<!--使用-->
<Button Classes="btn1"/>

示例:

   <UserControl ....><UserControl.Styles><Style Selector="Button.btn1"><Setter Property="Background"  Value="Red"/></Style></UserControl.Styles><Grid><Button Classes="btn1" Content="12345"/></Grid>
</UserControl>

在这里插入图片描述

3.同时使用多个样式

在Classes中通过空格分隔写多个样式名称

Classes="style1 style2"

示例：

<UserControl ...><UserControl.Styles><Style Selector="Button.btn1"><Setter Property="Background"  Value="Red"/></Style><Style Selector="Button.btn2"><Setter Property="Foreground"  Value="White"/></Style></UserControl.Styles><Grid><Button Classes="btn1 btn2" Content="12345"/></Grid>
</UserControl>

效果：

在这里插入图片描述

4.交互状态效果的实现

控件悬停、按下、获取焦点等等特殊状态，在Avalonia中通过伪类（Pseudo Classes）来实现，伪类在选择器中的名称始终以冒号开头。

在Avalonia中可以用的相关伪类如下：

伪类描述
:pointerover指针输入当前悬停在（控件的边界内部）
:focus控件拥有输入焦点
:disabled控件无法响应用户交互
:pressed按钮控件处于按下状态
:checked复选框控件已选中（显示勾选标记）

有条件的也可以自己定义。Pseudo Classes

使用伪类定义样式

Selector中直接Selector="ControlType(控件类型):PseudoClasses（伪类）" 和 Selector="ControlType(控件类型).Name(样式名称):PseudoClasses（伪类）"两种定义方式都可以，使用方式跟上面的一样，直接生效或者使用样式名称。

示例：

 <Style Selector="Border:pointerover"><Setter Property="Background" Value="Red"/></Style><Style Selector="Border.bd1:pointerover"><Setter Property="Background"  Value="Red"/></Style>

效果：

在这里插入图片描述

使用伪类的坑

1.Border必须有内容或者背景有初始化值，否则无法触发进入的效果，鼠标放在空白区域
请添加图片描述

解决方案：

在样式中给属性添加默认值

注意：不能直接在控件上赋默认值，否则就无法触发

两种写法：

一种另写一个样式

 <Style Selector="Border"><Setter Property="Background"  Value="White"/></Style><Style Selector="Border:pointerover"><Setter Property="Background"  Value="Red"/></Style>

效果：
请添加图片描述

另一种：就是嵌套样式（在下面嵌套样式小节），效果一样

2.另一个坑就是其他控件，如Button，使用伪类直接改Button属性还是无效
如下，设置悬停颜色为红色，但是无效请添加图片描述

这跟avalonia样式写法和工作原理有关，在下面选择器控制模版（template）里面的控件详细写

5.嵌套样式

在Style中定义一个Style，里面的Selector延续外面的Selector，使用^来替代上一级选择器的内容

<Style Selector="Border"><Setter Property="Background"  Value="White"/><Style Selector="^:pointerover"><Setter Property="Background"  Value="Red"/></Style></Style>

效果：

请添加图片描述

可以看到他的效果和跟下面分开两个样式的效果是一样的

 <Style Selector="Border"><Setter Property="Background"  Value="White"/></Style><Style Selector="Border:pointerover"><Setter Property="Background"  Value="Red"/></Style>

6.样式增加属性条件

让样式在一定条件下生效，可以在Selector中增加[Property=value]来限制条件

示例：

  <UserControl ...><UserControl.Styles><Style Selector="Button[Content=12345]"><Setter Property="Background"  Value="Green"/></Style><Style Selector="Button.btn1[Content=123456]"><Setter Property="Background"  Value="Green"/></Style></UserControl.Styles><StackPanel><Button  Content="12345"/><Button  Content="123"/><Button Classes="btn1" Content="123456"/></StackPanel>
</UserControl>

效果

在这里插入图片描述

7. 控制控件模板内部样式

Avalonia大部分控件都是继承于TemplatedControl控件，在默认的控件主题(ControlTheme)中定义了Template属性，有时候需要编写自己的样式，就需要直接操作Templae里面的控件。

并且在源码中很多伪类的样式，如pointerover、pressed等都的样式都已经定义了基本的样式，所以导致了上面定义Button之类的控件的伪类样式无效。
在这里插入图片描述

如果要进行Template里面一些控件样式的控制和修改（直接写了样式无法生效的情况），最好先有一份Avalonia的源码，照着源码改。下图就是一个button的源码（在Avalonia.Themes.Fluent项目的Controls文件夹下）。

在这里插入图片描述

Selector的写法Selector="控件类型:伪类 /template/ 内部控件的类型#内部控件的名称"，如果内部控件类型唯一，可以不写内部控件的名称。

如下示例写了一个悬停变红的样式，如下几种写法都是正确的，跟之前几项语法可以自由组合

 <Style Selector="Button:pointerover /template/ ContentPresenter"><Setter Property="Background"  Value="Red"/></Style><Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresente"><Setter Property="Background"  Value="Red"/></Style><Style Selector="Button.btn1:pointerover /template/ ContentPresenter#PART_ContentPresenter"><Setter Property="Background"  Value="Red"/></Style>

实现的效果：
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/80819.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python新手入门

Python新手入门

文章目录 概要python代码运行结果小结 概要 以下内容为python各种输出语句的语法&#xff01; python代码 # 标准化输出 print("这是标准化输出&#xff01;")# 格式化输出 print("这是第1种%s"%"格式化输出&#xff01;") print("这是第…
阅读更多...
python使用execjs利用jsdom来执行含有document的js代码方案（上）

python使用execjs利用jsdom来执行含有document的js代码方案（上）

先说一下环境&#xff1a;win7 64位&#xff0c;python3.8.10。 python使用execjs执行含有document的js代码时&#xff0c;会出现报错&#xff1a; execjs._exceptions.ProgramError: TypeError: document 未定义 原因是纯js代码中是不包含浏览器里对象的(如document、windo…
阅读更多...
python 调用adb shell

python 调用adb shell

目录 python调用 bat&#xff0c;启动新窗口&#xff0c;但是不能自动在进入shell 后执行提前设置的操作。 python启动cmd新窗口&#xff0c;但是不能自动在进入shell 后执行提前设置的操作。 python调用 bat&#xff0c;启动新窗口&#xff0c;但是不能自动在进入shell 后执…
阅读更多...
Linux--信号

Linux--信号

对于 linux来说&#xff0c;信号是软中断。许多重要的程序都需要处理信号。信号&#xff0c;为linux提供了一种处理异步事件的方法。比如&#xff0c;终端用户输入了ctrlc来中断程序&#xff0c;会通过信号机制停止一个程序。 一、信号概述&#xff1a; 1、信号的名字和编号&a…
阅读更多...
安装配置 hbase

安装配置 hbase

目录 一 准备并解压hbase安装包 二 修改hbase-env.sh文件 三 修改hbase-site.xml 四 修改环境变量 五 启动和关闭hbase 六 简单使用 hbase 一 准备并解压hbase安装包 这里有网盘资源 链接: https://pan.baidu.com/s/1PuqLmullK70ngeVs6G2oRQ?pwdq93v 提取码: q93v 这里安…
阅读更多...
Leetcode165. 比较版本号

Leetcode165. 比较版本号

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 代码如下&#xff1a; class Solution {public int compareVersion(String version1, String version2) {int i 0, j 0;while(i < version1.length() || j < version2.length()){long num1 0…
阅读更多...
endnotes插入文献突然变得格式不对，而且也不是按照正常的顺序来插入解决办法

endnotes插入文献突然变得格式不对，而且也不是按照正常的顺序来插入解决办法

今天插入文献突然变成了endnotes里面的文献序号&#xff0c;而且也不导入了&#xff0c;多了作者和序号信息 解决办法&#xff1a; 更新一下&#xff0c;然后在进行的导入就ok了&#xff0c;能够按照以前的格式插入了&#xff0c;序号也能自动排开&#xff0c;而且也能导入文献…
阅读更多...
Django框架学习大纲

Django框架学习大纲

对于使用 Python 的 Django 框架进行 web 开发的程序员来说&#xff0c;以下几点是必须了解的。 环境配置与项目初始化 命令&#xff1a; pip install django django-admin startproject myproject解析&#xff1a; 使用 pip 安装 Django。使用 django-admin startproject …
阅读更多...
常见的内网穿透代理工具

常见的内网穿透代理工具

简介 "内网穿透代理工具"是一种用于实现内网穿透的工具或软件。内网穿透是指通过公共网络&#xff08;如互联网&#xff09;将外部网络请求转发到内部私有网络的过程。在某些情况下&#xff0c;由于网络配置或安全策略的限制&#xff0c;外部网络无法直接访问内部网…
阅读更多...
【VS Code】根据时间和文件名查看增删改的历史记录

【VS Code】根据时间和文件名查看增删改的历史记录

我的 VS Code 已设置为自动保存。 左下角这个 TIMELINE 里面记录着我们使用 VS Code 操作各文件的历史记录。 打开 Local History 可以根据时间和文件名查看增删改的历史记录&#xff0c;比如&#xff1a; 然后我们根据时间和文件名&#xff0c;打开一个文件&#xff1a; 即可…
阅读更多...
如何安装和使用three.js

如何安装和使用three.js

如何安装和使用three.js three.js是什么&#xff1f; Three.js 是一款基于 JavaScript 的开源 3D 图形库&#xff0c;用于创建和显示各种三维场景、对象和特效。它提供了丰富的功能和 API&#xff0c;使开发者能够轻松地在浏览器中渲染复杂的 3D 图形。 Three.js 提供了一套…
阅读更多...
PackML 学习笔记（2） OPCUA /PackML

PackML 学习笔记（2） OPCUA /PackML

2020年11月11日&#xff0c;OPC 基金会发布了PackML 的配套规范&#xff08;OPC 30050: PackML - Packaging Control&#xff09;。意味着可以使用OPCUA 信息模型来构建PackML 模型了。 如果写一篇技术简介往往是简单的&#xff0c;要去实现这门技术却很难。首先&#xff0c;OP…
阅读更多...
[设计模式]springboot优雅实现策略器模式(加入注册器实现)

[设计模式]springboot优雅实现策略器模式(加入注册器实现)

优雅实现策略器模式 场景废话少说&#xff0c;源码地址。讲解关于本文创建登陆策略创建环境&#xff08;注册器&#xff09;简化代码 创建父类对象&#xff0c;也方便后期扩展 具体策略实现类用户名密码登陆手机号登陆 触发点调试简言 场景 登陆场景使用&#xff08;登陆之后返…
阅读更多...
AIGC（生成式AI）试用 5 -- 从模糊到精确，再一步

AIGC（生成式AI）试用 5 -- 从模糊到精确，再一步

参考 AIGC&#xff08;生成式AI&#xff09;试用 4 -- 从模糊到精确_Rolei_zl的博客-CSDN博客 提问信息不足时&#xff0c;生成式AI有的会引导提问者给出更多信息&#xff0c;有的会按自己的理解给出一个在某些方面正确的答案 随着提供的信息越来越多&#xff0c;生成式AI给…
阅读更多...
嵌入式Linux基础学习笔记目录

嵌入式Linux基础学习笔记目录

1. 嵌入式Linux应用开发基础知识 1.1 交叉编译 1.2 GCC编译器 1.3 makefire 1.4 文件I/O 1.5 Framebuffer应用编程 1.6 文字显示及图象显示 1.7 输入系统应用编程 1.8 网络编程 1.9 多线程编程 1.10 串口编程 1.11 I2C应用编程 2. 源码分析 2.1 MQTT源码 2.2 蓝牙源码 2.3 MJP…
阅读更多...
算法通过村第七关-树(递归/二叉树遍历)黄金笔记|迭代遍历

算法通过村第七关-树(递归/二叉树遍历)黄金笔记|迭代遍历

文章目录 前言1. 迭代法实现前序遍历2. 迭代法实现中序遍历3. 迭代法实现后序遍历总结 前言 提示&#xff1a;在一个信息爆炸却多半无用的世界&#xff0c;清晰的见解就成了一种力量。 --尤瓦尔赫拉利《今日简史》 你是不是觉得上一关特别简单&#xff0c;代码少&#xff0c;背…
阅读更多...
机器学习第六课--朴素贝叶斯

机器学习第六课--朴素贝叶斯

朴素贝叶斯广泛地应用在文本分类任务中&#xff0c;其中最为经典的场景为垃圾文本分类(如垃圾邮件分类:给定一个邮件&#xff0c;把它自动分类为垃圾或者正常邮件)。这个任务本身是属于文本分析任务&#xff0c;因为对应的数据均为文本类型&#xff0c;所以对于此类任务我们首先…
阅读更多...
【Git】Git 变基(rebase)以及rebase和merge之间的区别

【Git】Git 变基(rebase)以及rebase和merge之间的区别

Git 变基 1.变基 — rebase 在 Git 中整合来自不同分支的修改主要有两种方法&#xff1a;merge 以及 rebase。 在前面的文章中已经介绍了merge&#xff0c;这里我们来学习另一个指令rebase。 变基的基本操作 回顾之前在 分支的合并 中的一个例子&#xff0c;在该例子中&am…
阅读更多...
【面试刷题】——C++四种类型转化

【面试刷题】——C++四种类型转化

C支持多种类型转换操作&#xff0c;其中包括四种主要类型转换方式&#xff1a; 隐式类型转换&#xff08;Implicit Conversion&#xff09;&#xff1a; 隐式类型转换是自动发生的类型转换&#xff0c;由编译器自动完成。 它用于处理不同数据类型之间的运算&#xff0c;例如将…
阅读更多...
OpenCascade VTK STEP/IGES文件读取显示

OpenCascade VTK STEP/IGES文件读取显示

OpenCascade & VTK STEP/IGES文件读取显示&#xff0c;OpenCascade读取转成STL&#xff0c;VTK显示STL。 Download - Open CASCADE Technology https://dev.opencascade.org/release 下载exe并安装&#xff0c;可以把source下载下来学习&#xff0c;官网速度慢&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023