手把手教你搭WPF架构之Border花样小设计

arriettyandray
492 阅读2分钟

1 前言

在前面文章中简单介绍了有关Window、Grid、Border的简单使用，这篇文章在之前WPF搭建的框架下实现Border的花样小设计！

2 简单设计

2.1基本属性介绍

  • BorderBrush——定义边框的颜色。
  • BorderThickness——定义边框的粗细。这里可以只设一个数值，表示所有的边粗细一致。如果设置四个数值，表示每个边对应的粗细。（顺序为左、上、右、下）。
  • CornerRadius——定义边框角的圆角半径。设置数值与上面一致。
  • Background——定义边框内部的填充颜色或图像。
  • Padding——定义内容与边框之间的间距。与BorderThickness设置相同。
  • Width 和 Height——定义边框的宽度和高度。
  • HorizontalAlignment 和 VerticalAlignment——定义边框在父容器中的水平和垂直对齐方式。
  • Margin——定义边框与父容器或其他控件之间的外边距。
  • SnapsToDevicePixels——定义边框是否对齐到设备的像素边界，以提高清晰度。

2.2简单设计效果

我们可以采用最基础的属性设置，将Border设置为一个圆环。

image.png

  • Grid.Row="0"：将 Border 控件放置在其父 Grid 控件的第 0 行。
  • Width="40"：设置 Border的宽度为 40 像素。
  • Height="40"：设置 Border 的高度为 40 像素。
  • CornerRadius="20"：设置 Border 四个角的圆角半径为 20 单位，使得边框的角变得圆润。
  • BorderThickness="2"：设置 Border 的边框厚度为 2 单位。
  • BorderBrush="White"：设置 Border 的边框颜色为白色。

3 花样设计

image.png 在上面的简单设计的基础上，我们继续将圆环美化。添加图片，并添加视觉效果。

<Border Grid.Row="0" Width="40" Height="40" CornerRadius="20" BorderThickness="2" BorderBrush="White">
  <Border.Background>
      <ImageBrush ImageSource="pack://application:,,,/InterfacialDesign;component/Images/1.jpg"/>
  </Border.Background>
  <Border.Effect>
      <DropShadowEffect BlurRadius="5" ShadowDepth="0" Direction="0" Opacity="0.3"/>
  </Border.Effect>
</Border>
  • Border.Effect——就是添加图形和动画元素。
  • DropShadowEffect——定义一个阴影效果。
  • BlurRadius="5"——设置阴影的模糊半径，数值越大，阴影越模糊。
  • ShadowDepth="0"——设置阴影的深度，即阴影与源对象之间的距离。
  • Direction="0"——设置阴影的方向。
  • Opacity="0.3"——设置阴影的透明度。这里的值是 0.3，表示阴影的透明度为 30%。

除了以上的图形和动画元素，这里将背景填充替换成了图片！

  • ImageBrush——ImageSource就是指定要使用的图像源。 这里还有一个知识点，以后展开说明，就是图像源的写法！

总结

以上就是今天要讲的内容，本文介绍了Border的使用，在简单设计的基础上增加了图形和动画效果，后续再展开图像源的具体写法介绍！

avatar
文章
阅读
粉丝