WPF 和 Avalonia 开发者的 html css 前端指南 Border 篇

WPF 和 Avalonia 开发者的 html css 前端指南 Border 篇

笔者前端框架使用的是 Vue3 + Deno。
笔者主要会以 Avalonia 作为 C# 技术部分的示例。
本文主要是向大家列出 WPF 和 Avalonia 的 Border 在 html 和 css 的实现方法。
你其实也完全可以使用纯原生的 html + css，或者是 React、Blazor 等等框架来实现，因为本质是 html + css。

一、关于 Border 我们会介绍什么

在 WPF 和 Avalonia 中，Border 是自定义控件中最为重要的内容，不论是颜色、边框还是阴影，在制作卡片也好、呈现图像也好，甚至是制作分割线的方面，Border 始终是 UI 呈现的主力。
我们将会从以下一些方面来介绍 Border 相关你感兴趣的内容：

• 尺寸与对齐
  
• 边距
  
• 填充
  
• 边框的颜色与粗细
  
• 圆角
  
• 阴影
  
• 可见性
  
• 不透明度
  

二、Width Height HorizontalAlignment VerticalAlignment 相关的信息

在上一期关于 Grid 的介绍中，我们其实有对 Grid 的 Width、Height、HorizontalAlignment、VerticalAlignment 列出过转换的方式，在这里我们会稍微提一下。

注意，我们在这里列出的 css 相关是结合 grid 布局的，你在其它布局下不一定能够生效，还请注意。

WPF 和 Avaloniahtml + css备注Widthwidth可以提供像素值（带单位），如 80pxHeightheight可以提供像素值（带单位），如 80pxHorizontalAlignment="Left"justify-self: self-start在 grid 布局下的样子，水平、左对齐HorizontalAlignment="Right"justify-self: self-end在 grid 布局下的样子，水平、右对齐HorizontalAlignment="Center"justify-self: center在 grid 布局下的样子，水平、居中VerticalAlignment="Top"align-self: self-start在 grid 布局下的样子，竖直、顶对齐VerticalAlignment="Bottom"align-self: self-end在 grid 布局下的样子，竖直、底对齐VerticalAlignment="Center"align-self: center在 grid 布局下的样子，竖直、居中VerticalAlignment="Stretch"align-self: stretch在 grid 布局下的样子，水平、拉伸VerticalAlignment="Stretch"align-self: stretch在 grid 布局下的样子，竖直、拉伸

我们在文末也提供了一个更加完整的，描述了本文全部涉及到的属性的一个表，它对你或许更有帮助！

我们提供了一个 Avalonia 的示例（WPF 也兼容）
这是效果图片:

代码如下：

1.    

复制代码

对应的 html css 效果是这样的：

一模一样吧！如果一样，就是我们的目的了。

1.         

复制代码

三、Margin 边距

1. 普通的边距

WPF 和 Avalonia 使用 Margin 属性（数据类型是 Thickness）来描述控件的边距。
在 css 的部分当然也是有的。
我们先来看一下 WPF 和 Avalonia 中的 Margin 的效果。
这是一个边距为 5 的 Border 在 Grid 中自适应尺寸后的效果：

1.    

复制代码

在 css 中，我们可以使用这样的写法来实现：

对应的 css 代码请看这里：

1.         

复制代码

2. Margin 和 margin 的注意事项

边距是可以自定义某个方向的边距是多少的，其中：

• WPF 和 Avalonia 的 Margin 传入的格式是 "左,上,右,下"
  
• css 的 margin 的传入格式是 "上 右 下 左"（记得带 px 单位！）
  
• css 中存在 margin-top、margin-right、margin-left和margin-bottom对 margin 进行单独的配置，而不使用 margin 本身。这种方式会在进行一些动画效果的地方发挥重大的作用，但是本文不会向你展示示例，还请你另外找资料。
  

下面是示例图：

对应的 WPF 和 Avalonia 代码：

1.    

复制代码

对应的 html css 效果：

1.         

复制代码

四、Background 背景填充

为了让你就算拼错也能 Ctrl F 到，我们也会把错误的拼写放在这里：
backgroud、backgound、backgournd、fill

在 WPF 和 Avalonia 中，背景颜色 Background 的使用方式可以看下面的示例：
Background="Yellow" 的效果：

具体的 WPF 和 Avalonia 代码是这样的：

1.    

复制代码

如果你要使用图片，你可以以这样的方式：

对应代码如下：

1.                                     

复制代码

Background 里面支持填入的东西取决于 Brush 的派生类，"Yellow" 是属于 SolidColorBrush 的类，通过 SolidColorBrush.Parse() 转换而来。
为此我们希望能简短列一下 Background 能够支持的部分 Brush 类型和字面填入的类型（有些内容是 Avalonia 独有的，会特意列出来，其它表示 WPF 和 Avalonia 都有）：

• SolidColorBrush 纯色名：Yellow、Red
  
• SolidColorBrush Hex 色值：#66CCFF、包含 Alpha 通道的#9966CCFF
  
• SolidColorBrush RGB（Avalonia 限定）色值：rgb(233,233,233)、rgba(233,233,233,120)
  
• GradientBrush 系列：线性渐变 LinearGradientBrush，辐状渐变 RadialGradientBrush
  
• GradientBrush 系列（Avalonia 限定）：圆锥渐变 ConicGradientBrush
  
• ImageBrush
  

辐状渐变、圆锥渐变之类我认为有点小众，应用场景有限，所以在下文不会介绍，我们在下文会分别介绍：

• 纯色名
  
• Hex 色值
  
• RGB 色值
  
• 线性渐变
  
• 图片填充
  

1. SolidColorBrush 纯色名

此处对应 WPF 和 Avalonia 中的以下写法：
1.1 WPF 和 Avalonia 的同类写法·一

1. Background="Aqua"

复制代码

1.2 WPF 和 Avalonia 的同类写法·二

1.     Aqua

复制代码

1.3 WPF 和 Avalonia 的同类写法·三

1.             Aqua   

复制代码

1.4 WPF 和 Avalonia 的同类写法·四

1.                

复制代码

你看出区别了吗？
特别要注意的是，这些个写法在 WPF 中，对动画的支持并不友好，因为 Aqua 这样的颜色对象在 WPF 中会被认为是 Brushes.Aqua 这个静态对象，这个对象本身是被冻结了的，WPF 的设计者会认为，如果你动了 Brushes.Aqua，那么所有你引用到的这个颜色画刷的控件，颜色都会变，这就产生了 Bug，所以如果你要在 WPF 里面使用颜色动画，比较推荐的方式是使用 Hex 值。
1.5 css 的写法·一

使用 background: aqua 这样的写法。
这是显示的效果：

1.         

复制代码

1.6 css 的写法·二

使用 background-color: aqua 这样的写法。
这是显示的效果：

1.         

复制代码

2. SolidColorBrush Hex 色值

WPF 和 Avalonia 关于 Background 的写法真的有很多，光是上面关于 Aqua 的写法，你可以看到就有四种，其实 Hex 色值的写法也有这么多，所以我们就选取一个最有代表性的写法。

1. Background="#66CCFF"

复制代码

我们直接来看 css 的样子是怎样的。

css 写法之一：

1. background: #66ccff;

复制代码

css 写法之二

1. background-color: #66ccff;

复制代码

3. SolidColorBrush RGB 色值

Avalonia 中支持以下的方式设置 RGB 色值：

1. Background="rgb(123,23,12)"

复制代码

同样，Avalonia 支持 Alpha 通道（WPF 也支持但是如果要写会比较麻烦，这边说的支持指的是写起来会很轻松）：

1. Background="rgba(123,23,12,100)"

复制代码

我们来看一下 css 中对应的效果是怎样的：

对应 css 代码如下：

1. background: rgb(123, 23, 12);

复制代码

或者

1. background-color: rgb(123, 23, 12);

复制代码

同样，它们支持 rgba(123,23,12,100) 的写法，此处不再赘述。
4. LinearGradientBrush 线性渐变

我们在 https://www.cnblogs.com/fanbal/articles/18736036 中有对 Avalonia 的渐变色有简单的介绍，关于 WPF 的实现其实也是类似的，也是维护 LinearGradientBrush 和 GradientStop，只是有些写法会比较原始。
我们提供的和 Avalonia 示例如下（运用到了 Avalonia 对渐变点的相对描述。WPF 不支持，WPF 只能使用绝对坐标表示画刷的起始点，但是区别不算很大，WPFer 不要就此感到生气呀）。

1.                                                                                 

复制代码

对应的 css 等效写法是这样的：

1. background: linear-gradient(90deg, aqua 0%, yellow 100%);

复制代码

如果你有多个渐变色，你可以这样写：

1. background: linear-gradient(90deg, aqua 0%, #66ccff 50%, yellow 100%);

复制代码

注意！这边没有 background-color ，这边只有 background 和 background-image，虽然在示例的地方我们没有提到 background-image，但是这是可以的。

其中第一个参数表示的是渐变色的方向，其中，0deg 表示向上的方向，你还记得 margin 的写法是 "上 右 下 左"吗，在 css 中的第一方向是向上。
虽然也有别的写法，但是出于泛用性，我想列出四个方向对应的角度值：

• 向上（从下到上）：0deg
  
• 向右（从左到右）：90deg
  
• 向下（从上到下）：180deg
  
• 向左（从右到左）：270deg
  

具体可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient
5. ImageBrush 图像填充

WPF 和 Avalonia 里面虽然也有 Image 控件，但是有的时候我们会想给 Border 填充图片，在 html 中也有 img 节点，不过为 div 的 background 填充图片也是很常见的做法。
先来看一下 WPF 和 Avalonia 中添加图片的方式，我们在上面有展示出来，但是我们再来展示一遍，因为你翻页也是相当麻烦的嘛。
如果你要使用图片，你可以以这样的方式：

对应代码如下：

1.                                     

复制代码

5.1 光填充颜色是不够的

我们直奔 css 的部分来看一下它是怎么样的：

1. background: url("src/assets/my-image我的图片.png");

复制代码

我把图片放在了 Vue 项目的 src/assets 的地方，所以路径可以写成这种样子。
关于 url ，它也支持下面的写法：

• "src/assets/my-image 我的图片.png"
  
• "/src/assets/my-image 我的图片.png"
  
• "./src/assets/my-image 我的图片.png"
  
• "../src/assets/my-image 我的图片.png"
  

经过测试放在 Vue 的 src/assets 文件夹内的效果可以正常的呈现。
5.2 Stretch 填充方式的指定在 css 中的写法

我们观察 xml 可以发现，我们使用了 Stretch="UniformToFill" 指定了这个图片在填充中是适应性填充的方式，会尽可能保持比例的将其铺满。
我们来分别展示一下 Stretch="Uniform" 和 Stretch="UniformToFill" 在 css 中可以怎么改。
首先是 Stretch="Uniform"，样子是这样的：

为了实现这样的效果，css 请写成这样：

1. background-size: contain;background-repeat: no-repeat;background-position: center;

复制代码

其次来解决一下 Stretch="UniformToFill" 的等效写法：

css 请写成这个样子：

1. background-size: cover;background-repeat: no-repeat;background-position: center;

复制代码

好了，现在你就可以顺利在 css 的地方使用图片填充类似 Border 的控件了。
五、BorderBrush BorderThickness 边框的颜色与粗细

1. 简单的边框

在 WPF 和 Avalonia 中，我们可以为 BorderThickness 提供粗细相关的设置，以及为 BorderBrush 附加上边框颜色。
我们为你提供了一个示例：

具体的代码是这样的：

1.    

复制代码

那么在 css 的部分有什么对应我们的 BorderThickness 和 BorderBrush 呢？
有的，你可以使用 border 这个 css 属性进行设置，写成border: 2px solid red;。

1.                

复制代码

其中 border 的格式是这样的：

• 尺寸值（一般来说是像素值，注意带单位）
  
• 填充模式，你可以填其他的值来实现虚线的效果，但是一般来说会填 solid 来表示是最标准的线，不是虚线，不是波浪线，非常的标准正经。
  
• 颜色，实际上你可以使用 Hex 颜色值或者是 RGB 颜色值等等。
  

我来给你提供一个模板来让你能够更快使用吧，把里面的参数替换成你想要的就行！

1. border:  solid ;

复制代码

2. BorderThickness 的详细写法在 css 中的等效实现

你可以通过 BorderThickness 实现分割线的效果，这就是 BorderThickness 的一个重要应用，但是这如何在 css 中实现？

先来看一下 WPF 和 Avalonia 中本来是怎么写的吧。

1.    

复制代码

css 中，你可以这样子做，重点请看 border-top: 2px solid red;：

1.         

复制代码

在 css 中，你可以分别设置 border-top、border-bottom、border-left、border-right，以border 的最为标准泛用的写法，来将他们设置出来。
参看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-top
六、CornerRadius 圆角

WPF 和 Avalonia 中的圆角可以使用 CornerRadius="10" 这种形式来设置，具体的效果就像这样：

xaml 或者 axaml 代码就像这样：

1.    

复制代码

这个属性在 css 中非常好设置，你可以使用 border-radius 来达到同样的效果。

1.         

复制代码

七、Shadow 阴影

使用阴影来呈现 UI 的质感是很常见的一种做法，在 WPF 和 Avalonia 中你可以为控件增加 Effect 的某 Effect 来实现，在 Avalonia 中另外还提供了 BoxShadow 的做法，所以我们要稍微介绍一下这两种做法，然后再介绍 css 中是怎么实现。
1. WPF 的阴影实现方法

效果：

代码：

1.                                     

复制代码

2. Avalonia 的阴影实现方法

2.1 DropShadowEffect

效果：

代码：

1.                                     

复制代码

2.2 BoxShadow 属性

在 Avalonia 中你可以使用类似 BoxShadow="0 4 20 0 #33000000" 的形式来快速创建阴影，其中它的格式是这样的：

• X 偏移，很少有 X 水平方向的移动，一般填 0
  
• Y 偏移，一般都是竖向的偏移，所以这个会变一下，填一个小一点的数字
  
• 模糊程度，填 10 或者 20 都还算合理，再往上我觉得太大了
  
• 缩放比例，一般不用太在意，填 0 就好
  
• 颜色，这里没有透明度，所以使用带 Alpha 通道的颜色来控制颜色，比如我使用的 #33000000，注意，在 Avalonia 的描述中，Alpha 通道在 RGB 的前面，属于 ARGB 格式。
  

这里也给你一个快捷写法：0 竖直偏移 模糊 0 透明颜色（A在前面），然后填上吧。
效果：

代码：

1.    

复制代码

3. css 中的实现方法

这个的效果和 Avalonia 的 BoxShadow 是类似但是有一些不同之处，比如说在透明颜色的格式上，以及 BoxShadow 和 box-shadow 的参数上。
效果：

代码：

1.         

复制代码

你需要注意的是：

• 在 css 的部分，Alpha 通道的描述是在最后的，格式是 RGBA！
  
• box-shadow 的格式是 水平偏移、竖直偏移、模糊程度、透明颜色值
  

我们也提供一个可以参考的格式：0 竖直偏移 模糊 透明颜色（A在后面）
八、Visibility IsVisible 可见性

在 WPF 中，我们可以使用 Visibility 来设置可见性，Avalonia 认为这样对数据绑定来说过于麻烦，所以采用了 IsVisible 直接使用 bool 类型来控制可见性。
1. WPF 的隐藏实现

先来看 WPF 的隐藏的写法：

1. Visibility="Collapsed"

复制代码

或者

1. Visibility="Hidden"

复制代码

一般来说 Collapse 更加泛用一些，它在隐藏后，会让容器重新布局，就像空间真的消失了一样，而 Hidden 会仍然占用布局空间（我说的不是内存空间，是 UI 上的布局空间，我要强调一下，这个东西和性能没关系！）。
2. Avalonia 的隐藏实现

1. IsVisible="False"

复制代码

通过设置 IsVisible 就可以控制控件的显示和隐藏了。
3. css 的隐藏实现

1. visibility: collapse;

复制代码

1. visibility: hidden;

复制代码

css 的思路和 WPF 是一致的，至于 css 怎么显示？

1. visibility: visible;

复制代码

使用 visible 即可。
九、Opacity 不透明度

不透明度也是一个很有用的一项内容，在 WPF 和 Avalonia 中，你可以使用 Opacity 实现不透明度的设置。
纯黑但是看起来是灰色的样子，来自不透明度的作用。

代码是这样的：

1.    

复制代码

css 的部分，你可以使用下面的方式实现，注意看opacity: 0.1：

1.         

复制代码

十、总结

WPF 和 Avaloniahtml + css备注Widthwidth可以提供像素值（带单位），如 80pxHeightheight可以提供像素值（带单位），如 80pxHorizontalAlignment="Left"justify-self: self-start在 grid 布局下的样子，水平、左对齐HorizontalAlignment="Right"justify-self: self-end在 grid 布局下的样子，水平、右对齐HorizontalAlignment="Center"justify-self: center在 grid 布局下的样子，水平、居中VerticalAlignment="Top"align-self: self-start在 grid 布局下的样子，竖直、顶对齐VerticalAlignment="Bottom"align-self: self-end在 grid 布局下的样子，竖直、底对齐VerticalAlignment="Center"align-self: center在 grid 布局下的样子，竖直、居中VerticalAlignment="Stretch"align-self: stretch在 grid 布局下的样子，水平、拉伸VerticalAlignment="Stretch"align-self: stretch在 grid 布局下的样子，竖直、拉伸MarginmarginWPF 和 Avalonia 的 Margin 传入的格式是 "左,上,右,下" ,css 的 margin 的传入格式是 "上 右 下 左"（记得带 px 单位！）Backgroundbackground详情可以看本文第四节，支持纯色、渐变色和图片，也涉及到了对于图片的 Stretch 相关的处理方法BorderBrushborderborder 同时支持 颜色的框的粗细BorderThicknessborder 、border-top、border-right、border-bottom、border-leftborder 同时支持 颜色的框的粗细、border-top 系列可以实现单方向的线，实现分隔线CornerRadiusborder-radiusDropShadowEffect、BoxShadowbox-shadowbox-shadow 的格式是 水平偏移、竖直偏移、模糊程度、透明颜色值Visibility、IsVisiblevisibility和 WPF 出奇的一致，属性有 visible、hidden 和 collapseOpacityopacity这就是本文的主要内容了，如果想要看的话，就速查这里我整理出来的表格吧。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！