Ch07 用户交互控件

控件分为三大类:

  • 内容控件
  • 布局控件
  • 用户交互控件

控件一般用于向用户展示数据信息. 用户交互控件目的是让用户输入数据.

控件概览

本章会介绍到的控件

控件描述
Button让用户点击, 告知程序要做什么.
CheckBox让用户选择, 或取消非排他选项.
ComboBox让用户从下拉中选择一个.
ContextMenu根据不同控件展示弹出菜单.
Frame展示 Web 或 XAML 内容, 并提供简单的导航.
GridSplitter让用户可以在 Grid 中调整行或列.
ListBox展示一组数据, 根据控件的配置允许用户选择其中一个或多个.
Menu展示菜单.
PasswordBox密码框.
RadioButton一组排他选项供用户选择.
RepeatButton只要用户将鼠标按在其上, 就允许重复触发 Click 事件.
ReachTextBox允许用户输入带有格式的文本.
ScrollBar让用户在一个范围内选择一个数字, 一般该值用与确定图形上的问题. 例如选择一个大图的显示区域等.
Slider在一个范围内选择一个数值.
TextBox文本框.

BUTTON

常用属性有:

  • Content
  • x:Name
  • Width
  • Height
  • Margin
  • Click

jk: Content 的尺寸似乎会被压缩, 默认会按照最小的方式给出, 如果内容是其他组件, 需要手动设置 Width 和 Height 将其撑起来.

<Button Content="按钮"
        x:Name="btn"
        Click="btn_Click"/>

CHECKBOX

CheckBox 具有三态: 选中 (true), 未选中 (false), 未知 (null).

常用属性:

  • Content 描述显示的文字
  • x:Name
  • IsChecked, 如果是未知, XAML 的语法为 IsChecked="{x:Null}"
  • IsThreeStatus, bool 类型

常用事件: Checked 和 UnChecked.

jk: 调整文本尺寸的会后, 文字的大小会变化, 但是前置的复选框不会变.

COMBOBOX

ComboBox 允许用户从一组下拉列表中选中一个项. 每一个选项会被放在 ComboBoxItem 中, 它是一个单元素组件.

简单用法:

<ComboBox Width="300" Height="30" fontSize="16">
    <ComboBoxItem Content="第一项"/>
    <ComboBoxItem Content="第二项"/>
    <ComboBoxItem Content="第三项"/>
</ComboBox>

常用属性:

属性含义
Background设置控件的背景, 需要注意的时是 ComboBoxItem 也有 Background 属性.
IsEditable是否允许用户输入数据. 输入的数据从 Text 属性中获取.
MaxDropdownHeight下拉框最高高度.
SelectedIndex选中项的索引. 如果没有选中数据, 则为 -1.
SelectedItem选中项, 如果是输入, 则该属性为 null.

CONTEXTMENU

上下文菜单. 基本用法:

  1. 构建菜单结构 (ContentMenu 包含 MenuItem), 设置 Header 来控制菜单上的显示.
  2. 给需要上下文菜单的控件提供 ContextMenu 属性, 该其中设置菜单.
  3. 子菜单用 MenuItem 包含 MenuItem.
  4. 菜单选择使用 Click 事件来注册.

ContentMenu 对象是一种 Menu 对象.

FRAME

Frame 控件展示内容, 并提供简单导航. 它可以展示 web 页面或 XAML 文件, 并遵循这些文件中的链接.

控件的 Source 属性指向页面地址, 或需要展示控件的 XAML 文件. 也可以调用控件的 Navigate 方法, 来展示新页面.

Web 显示简单的页面还行, 最含有 js 等代码的页面就不好了.

在页面的导航过程中, 也会记录其历史.

GRIDSPLITTER

用于在 Grid 中调整行的高度, 列的宽度.

将该控件嵌入到 Grid 中的特定列或行中. 实际上就是定义一个很细的行或列, 放置该控件.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="10"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <GridSplitter 
        Grid.Column="1" 
        Grid.Row="0"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Background="LightCyan"
        ShowsPreview="True"
    />

    <Label Grid.Row="0" Grid.Column="0" Background="Pink"/>
    <Label Grid.Row="0" Grid.Column="2" Background="LightBlue"/>
</Grid>

必要时设置 Width 或 Height, 方便选中进行拖动.

ShowsPreview 表示是否实时调整尺寸, 设置为 true, 拖拽过程中会显示一个灰色的条, 表示拖拽后的条, 释放选中后才会调整区域大小.

LISTBOX

展示一个列表, 允许单选和多选. SelectionMode 为选择模式:

  • Single 单选
  • Multiple 多选
  • Extended 支持多选, 结合 Ctrl 或 Shift 和单击来选择.

ListBox 作为容器, ListBoxItem 来显示项. ListBoxItem 为单子节点.

Menu 用于展示菜单. 菜单容器使用 Menu 控件, 菜单项使用 MenuItem, 子菜单使用 MenuItem 嵌套 MenuItem 构成. 菜单上的文字使用 Header 属性, 选中菜单使用 Click 事件.

要实现快速访问, 在文案前使用下划线. 给菜单的 InputGestureText 属性设置快捷键

一些高级内容需要结合命令来完成.

PASSWORDBOX

用于密码输入, 常用属性

  • Password, 用于获取用户输入内容
  • PasswordChar 掩码

RADIOBUTTON

排他选择. 使用容器进行分组. 基本用法与 CheckBox 类似. 但一定需要一个容器.

​

REPEATBUTTON

jk: 用于快速触发事件.

常用属性: Delay 默认 500 表示延迟多少执行. Interval 默认 33, 表示后续事件触发的时间间隔.

RICHTEXTBOX [暂略]

富文本框, 用于显示带有格式的文本, 列表, 段落, 等等. 甚至可以嵌入按钮等.

直接使用 XAML 布局 RichTextBox 是比较困难的. RichTextBox 的 Document 属性用来包含其内容. Document 应该是一个 FlowDocument, 里面可以包含 Paragraph 和 Table 等.

一个创建示例:

<RichTextBox >
	<FlowDocument>
		<Paragraph>
    	<Run>一段文字</Run>
    </Paragraph>
  </FlowDocument>
</RichTextBox>

第21章会介绍 文档.

RichTextBox 非常复杂, 它含有很多属性与方法来控制其行为, 以及对内容的格式化操作. 下面会介绍其常用的部分, 完成信息还需要参考文档.

编辑命令

文本框自带格式化快捷键, 例如加粗使用 ctrl + B. 也可以利用代码来实现:

EditingCommands.ToggleNumbering.Execute(null, 控件引用名);

亦或使用上下文菜单.

<MenuItem 
          Name="mnuParaAlignLeft"
          Header="_Left"
          Command="EditingCommands.AlignLeft" />

可用命令:

命令名快捷键
AlignCenterCtrl + E
AlignJustifyCtrl + J
AlignLeftCtrl + L
AlignRightCtrl + R
EnterParagraphBreakEnter
ToggleBoldCtrl + B
ToggleItalicCtrl + I
ToggleBulletsCtrl + L
ToggleNumberingCtrl + N
ToggleUnderlineCtrl + U

详细命令可参考文档.

拼写检查

SpellCheck.IsEnabled = "True"

重做与撤销

Ctrl +Z 和 Ctrl + Y

也可以调用方法: Undo() 或 ReDo().

有属性 CanUndo 和 CanRedo 可进行判断.

其他特性

属性含义
AcceptsReturn确定[Enter]键击是放置在控件的内容中, 还是发送到窗口. 逻辑主要是在表单控制中, 回车是否被视为文本, 还是触提交.
AcceptsTab
HorizontalScrollBarVisibility
VerticalScrollBarVisibility
IsEnabled
IsReadOnly

SCROLLBAR

一般结合 ScrollViewer 等使用, 但也可以当做在一个范围内取值的控件来使用.

常用属性

  • Orientation, 可取值: Vertical 或 Horizontal.
  • Maximum
  • Minimum
  • Value
  • LargeChange 拖动滚动调试每次改变值的大小
  • SmallChange 点击箭头时每次改变值的大小

SLIDER

用于在范围内选择数据, 与前一个 ScrollBar 的取值功能逻辑上一样. 但是在外观上, 它可以有刻度.

与刻度有关的属性:

属性含义
IsSnapToTickEnabled设置为 true 时, 控件会将值锁定在附近的刻度处.
IsSelectionRangeEnabled是否允许选择范围.
TickFrequency描述两个刻度间的间隔.
TickPlacement控制显示位置.
Ticks刻度.

背景色是白的时候, 看不出来刻度.

TEXTBOX

TextBox 就是单一文本框控件, 只允许使用一种统一的字体, 字号, 与颜色. 不同于 RichTextBox 可以进行调整, 使用不同的样式.

其特殊功能与 RichTextbox 一样.

小结 [略]

Last Updated:
Contributors: jk