CH04 公共属性

所有的 WPF 控件都继承自 Control 类. 由于继承关系, 所以存在一些公共属性. 例如, 大多数控件都有 size, position, foreground, background color, transformation, 以及 font 等属性.

本章主要介绍大多数控件都有的属性. 即使在后续章节中还会介绍到他们.

下面会介绍重要且会令人迷惑的主题: 尺寸和定位属性. 每一个 WPF 开发者都需要理解的属性, 以便有效的进行布局.

SIZE 和 POSITION

尺寸与定位可能会令人迷惑, 因为控件的大小与位置是多个属性共同作用的结果. 例如, 在 Grid, StackPanel, 或 Canvas 中的 Button, 就会看起来不一样.

下面会介绍影响控件尺寸与位置的重要属性 alignment, 下一节会介绍一些简单属性, 但同样会影响到尺寸与定位.

Alignment

决定控件尺寸的, 最重要的四个属性是 Width, Height, HorizontalAlignment 和 VerticalAlignment.

注意, 不要将 HorizontalALignment 和 VerticalAlignment 与 HorizontalContentAlignment 和 VerticalContentAlignment 混淆了, 前者是控件的对其方式, 后者是控件中内容的对齐方式.

Width 和 Height 属性不言而喻. 它们直接决定了控件的尺寸.

而通常不会直接设置控件的大小, 一般希望其能自适应, 以合理使用空间.

这便是 HorizontalAlignment 和 VerticalAlignment 起作用的时候了.

  • HorizontalAlignment 可取值: Left, Center, Right 以及 Stretch
  • VerticalAlignment 可取值: Top, Center, Bottom 以及 Stretch

控件的对齐方式是基于控件所在容器的. 例如 Left, Top, 会绕过控件在容器的左上角停靠.

前提是父容器需要撑起足够的空间.

Stretch 值比较特殊, 原意是拉伸填充. 但实际上它与其容器有关.

例如

  • 如果控件容器是 Grid, 那么拉伸填充的是其对应的单元格.
  • 如果是 StackPanel, 并且方向为竖直方向. 那么设置水平对齐方式为拉伸则会填充整个容器, 而垂直拉伸会被忽略. 除非显示设置其高度, 否则仅会显示其内容, 高度会尽可能的小.

下面示例中, 所有的水平, 垂直对齐方式均是拉伸.

image-20250618091940888

然后作者演示了使用 XAML 怎么创建 Grid.

就上面的案例, 作者简要对比了各个容器的不同点.

然后作者演示了仅含单个子元素的容器, 使用 StackPanel, 然后再放入两个 Button

image-20250618093014329

代码中没有设置 StackPanel 的对齐方式, 因为默认为 Stretch.

Viewbox 比较特殊, 其中的 StackPanel 是最小化的, 原因是 Viewbox 本身就是靠拉伸自己的内容来填充自己的, 因此没有多余的空间让内容进行拉伸.

有关 Viewbox 的细节在 ch06 中介绍.

有关尺寸与定位的属性确实令人迷惑, 作者建议将这些示例下载下来研究一番.

其他有关尺寸与定位的属性

除了 Width, Height, HorizontalAlignment, 和 VerticalAlignment 之外, 还有一些属性.

Margin 属性决定控件外围区域的空间, 同时会影响到控件的大小.

该属性的取值可以是一个, 两个, 或 四个 数字.

  • 一个数字表示四周同样尺寸
  • 两个数字分别表示: 左右, 上下
  • 四个数字分别表示: 左, 上, 右, 下

部分控件还会设置 Padding 属性, 来设置内边距.

还有四个影响空间尺寸的属性分别是 MaxWidth, MaxHeight, MinWidth, 和 MinHeight.

FONT

Label, TextBox 这类显示文本的控件会使用到该属性. 值得注意的是父容器设置该属性会作用到其子控件中. 这样就可以不用为每一个子控件设置字体了.

比较重要的字体属性:

  • FontFamily 用于设置字体样式 (font face)
  • FontSize 用于设置字体尺寸, 单位像素. 该尺寸仅为字体尺寸, 不包括行间距等. 可以给定单位 pt 来指定打印机所用的点.
  • FontStyle 用于指定文本风格, 直立体或意大利写体.
  • FontWeight 用于设置文本粗细.

COLOR

除了图形边框与填充等, 还有前景色, 背景色都可能用到颜色.

需要注意的是, 有些控件 (Label, TextBlock) 的前景色与背景色不一定会被继承.

IMAGE SHAPE (图片形状)

通常图片是矩形的, 但可以设置为任意形状 (可以让任何控件设置为其他形状).

修改控件形状的一种方法是在 opacity mask 中设置其 OpacityMask 属性. opacity mask 是一个画刷 (蒙版), 用于设置控件的透明部分.

注意, 需要设置的是 alpha 通道的分量, 取值为 0 到 255

构建透明蒙版的两个常见的方法是使用渐变画刷, 或使用图片.

渐变透明蒙版

示例如下:

image-20250618104727044

使用透明蒙版 (OpacityMask) 的代码:

<Image Margin="5" Source="Flowers.jpg" Stretch="None">
	<Image.OpacityMask>
  	<RadialGradientBrush>
    	<GradientStop Color="#FF833C3C" Offset="0"/>
    	<GradientStop Color="#FFE4D6D6" Offset="0.8"/>
    	<GradientStop Color="#00FFFFFF" Offset="1"/>
    </RadialGradientBrush>
  </Image.OpacityMask>
</Image>

这里使用放射梯度画笔. 由于图片是矩形的, 放射区域也会变成椭圆的. 其中 GradientStop 定义了画笔的颜色. 第一个 GradientStop 定义了距离中心为 0 的区域, 是不透明的, 第二个 GradientStop 定义了距离中心百分之 80 的位置也是不透明的. 而第三个则表示外围是透明的.

jk: 具体这个 Color 该怎么取值似乎有些迷惑.

图片透明蒙版

第二个方法便是使用图片作为蒙版.

简单来说就是将梯度画刷用可透明的图片来代替, 然后创建 ImageBrush 来加载图片, 设置 OpacityMask.

<Button Content="Button" Height="105" Width="105">
  <Button.OpacityMask>
  	<ImageBrush ImageSource="xxx.png" Stretch="None" />
  </Button.OpacityMask>
</Button>

其他

还有很多公共属性, 没必要每一个都一一介绍. 但有一些是需要了解的.

Name 属性是为控件取名字. 这不是必须的, 但如果需要在代码中引用这个控件, 建议设置 Name 属性.

Parent 属性返回控件的逻辑父级 (逻辑树中的对象).

Tag 属性用于存储任意的数据. 可以理解为一个附加的存储空间.

ContentMenu 属性用于控制右键时显示的上下文菜单.

暂时不知道 Menu 怎么设置. 越来越像 Web 了.

ToolTip 用于显示鼠标悬浮时的内容.

IsEnabled 属性表示是否可以与用户进行交互 (是否可用). 一般禁用会置灰.

一般可以使用容器来包装一组控件, 容器的 IsEnabled 可以一次性对所有包装的控件进行控制.

Visibility 用于控制控件是否显示或隐藏.

小结

略

Last Updated:
Contributors: jk