第六章 控件
本章将介绍控件——继承自System.Windows.Control类的元素。然后WPF控件完整类别包括以下控件:
- 内容控件:这些控件包含嵌套的元素,为它们提供近乎无限的显示能力。内容控件包括:Lable、Button、ToolTip和ScrollViewer类。
- 带有标题的内容控件:这些控件是允许添加主要内容部分以及单独标题部分的内容控件。它们通常用于封装更大的用户界面块。此类控件包括 TabItem、GroupBox以及Expander类。
- 文本控件:文本控件较少,它们允许用户输入文本。文本控件支持普通文本(TextBox)、密码(PasswordBox)以及格式化文本(RichTextBox,第28章将讨论)。
- 列表控件:这些控件在列表中显示项的集合。列表控件包括ListBox和CombBox类。
- 基于范围的控件:这些控件通常只有共同的属性Value,可使用预先规定范围内的任何数字设置该属性。这类控件包括Slider以及ProgressBar类。
- 日期控件:此类控件包含两个允许用户选择日期的控件——Calender和DatePicker。
6.1 控件类
所有控件都继承自System.Windows.Control类,该类添加了一小部分基本的基础结构:
- 设置控件内容对齐方式的能力
- 设置Tab键顺序的能力
- 支持绘制背景、前景和边框
- 支持格式化文本内容和尺寸
6.1.1 背景画刷和前景画刷
在WPF中,背景和前景分别使用Background和Foreground属性设置这两个区域(但非内容)的颜色。
这些属性使用的是更强大的对象:Brush对象。该对象为填充背景和前景内容提供了灵活性,可使用单一颜色(用SolidColorBrush画刷)或更特殊的颜色(如使用LinearGraidientBrush或TileBrush画刷)填充背景和前景。
1.用代码设置颜色
假设设置名为btn2的按钮内部设置蓝色表面区域,下面是执行这一操作的代码:
btn2.Background = new SolidColorBrush(Colors.AliceBlue);
这行代码就是简便地使用Colors的静态属性定义的颜色, 创建了一个新的SolidColorBrush画刷(属性的名称源自大多数Web浏览器支持的颜色名称)。然后将该画刷设置为按钮的背景画刷,从而使按钮的背景被绘制成带有轻微阴影的蓝色。
也可以根据用户喜好从System.Windows.SystemColors枚举中获取系统颜色。下面是一个实例:
btn1.Background = new SolidColorBrush(SystemColors.ControlColor);
我设置了两个button分别用这两种方法,布局如下:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="btn1" Margin="10" Grid.Column="0">Button 1</Button>
<Button x:Name="btn2" Margin="10" Grid.Column="1">Button 2</Button>
</Grid>
[外链图片转存失败(img-oqri8M72-1564023386293)(en-resource://database/854:1)]
可以看到btn2是用Colors静态属性,在鼠标没有按下状态时还是显示轻微蓝色。真正自定义按钮外观需要使用模板。
因为经常使用的原因,所有SystemColors类还提供了预定义的返回
btn3.Background = SystemColors.ControlBrush;
通过RGB设置颜色
byte red = 0, green = 255, blue = 0;
btn4.Background = new SolidColorBrush(Color.FromRgb(red, green, blue));
将grid分成四份看效果
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button x:Name="btn1" Margin="10" Grid.Row="0" Grid.Column="0">Button 1</Button>
<Button x:Name="btn2" Margin="10" Grid.Row="0" Grid.Column="1">Button 2</Button>
<Button x:Name="btn3" Margin="10" Grid.Row="1" Grid.Column="0">Button 3</Button>
<Button x:Name="btn4" Margin="10" Grid.Row="1" Grid.Column="1">Button 4</Button>