教程3：控件介绍

控件介绍

的github

教程数据

NoesisGUI包含一组标准控件，使您能够快速组装传统用户界面。它们可以分为四个主要类别，这主要与它们的继承层次一致：

注意

本教程中显示的图像是使用Noesis中嵌入的默认主题拍摄的

内容控制

内容控件只是被限制为包含单个项目的控件。内容控件全部从ContentControl派生，后者具有一个包含单个项目的Content属性。内置的内容控件分为三大类：按钮，简单容器和带有标题的容器。

纽扣

ControlsTutorialImg1.jpg

按钮可能是最熟悉且必不可少的用户界面元素。基本按钮是可以单击但不能双击的内容控件。这种行为实际上是由称为BaseButton的抽象类捕获的，从该类可以派生一些不同的控件。

该的BaseButton类包含点击事件，并且包含被点击定义意味着什么逻辑。如果您想对按下状态进行操作，它还定义了一个布尔IsPressed属性。

但是，BaseButton最有趣的功能是ClickMode属性。可以将其设置为ClickMode枚举的值，以精确控制Click事件何时引发。其值是Release（默认），Press和Hover。尽管更改标准按钮上的ClickMode可能会使用户感到困惑，但是此功能对于重新设置样式后看起来完全不同的按钮非常有用。在这些情况下，通常期望按下和对象应与单击相同。

Button，RepeatButton，ToggleButton，CheckBox和RadioButton派生自BaseButton。

纽扣

该按钮类只增加了在什么上面两个简单的概念的BaseButton已经提供了：作为一个取消按钮或默认按钮。这两种机制是对话框的便捷快捷方式。如果在对话框内的Button 上将Button.IsCancel设置为true，则使用DialogResult为false会自动关闭窗口。如果Button.IsDefault设置为true，则按Enter键将导致单击Button，除非将焦点显式移开。

重复按钮

该的RepeatButton的行为就像按钮，除了它不断地提高了点击，只要被按下按钮事件。首先，RepeatButton的行为听起来可能很奇怪，但对于每次按下按钮都会增加或减少值的按钮很有用。例如，滚动条末端的按钮在单击并按住鼠标按钮时会表现出重复按下的行为。一个的默认外观的RepeatButton是完全一样的按钮。

切换按钮

ToggleButton是一个“粘滞”按钮，在单击时保持其状态。第一次单击它会将其IsChecked属性设置为true，然后再次单击将IsChecked设置为false。ToggleButton还具有一个IsThreeState属性，该属性设置为true，为IsChecked提供三个可能的值：true，false或null。除器isChecked属性，切换按钮定义的每个值的单独事件器isChecked：经过对true，未选中为false和Indeterminate为null。ToggleButton的默认外观与Button和RepeatButton完全相同。

复选框

ControlsTutorialImg2.jpg

CheckBox是一个熟悉的控件。它不过是外观不同的ToggleButton。CheckBox是从ToggleButton派生的简单类，它仅能覆盖其默认样式。

spacer.png

单选按钮

ControlsTutorialImg3.jpg

RadioButton是另一个从ToggleButton派生的控件，但它是唯一的，因为它具有对互斥的内置支持。多个RadioButton组合在一起的情况下，一次只能检查一次。选中一个RadioButton会自动取消选中同一组中的所有其他按钮。

默认情况下，共享相同直接逻辑父级的所有RadioButton会自动分组在一起。

 
 选项1 
 选项2 
 选项3 
 
 
 

但是，如果需要以自定义方式对RadioButtons进行分组，则可以使用其GroupName属性，这是一个简单的字符串。具有相同GroupName值的所有RadioButton都被分组在一起。

 
 选项1 
 选项2 
 选项3 
 
 
 

简单的容器

NoesisGUI包含几个内置的内容控件，它们没有像按钮一样被单击的概念，但是每个控件都有其独特的功能来证明其存在。

标签

标签是经典控件，可用于保存一些文本。作为内容控件，它可以在其Content属性中保留任意内容，但是Label实际上仅对文本有用。

注意

尽管NoesisGUI中尚未实现Target属性，但仍具有访问键功能

工具提示

该工具提示控制保持其在一个浮动框内容显示，当你将鼠标悬停在相关的控制，当你移动鼠标离开消失。例如：

 <按钮 宽度= “ 60” 高度= “ 40” 内容= “确定” >
  点击此按钮将提交您的请求
 
 
 
 

带标题的容器

以前的所有内容控件要么在内容周围添加非常简单的默认视觉效果，要么根本不添加任何视觉效果。以下两个控件稍有不同，因为它们向主要内容添加了可自定义的标头。这些控件派生自ContentControl的名为HeaderedContentControl的子类，该子类添加了Header属性。

组框

ControlsTutorialImg4.jpg

GroupBox是用于组织控件块的熟悉控件。它通常用于包含多个项目，但是由于它是一个内容控件，因此只能直接包含一个项目。因此，您通常需要将GroupBox的内容设置为可以包含多个子项的中间控件。

spacer.png

 
 
 检查语法键入
 隐藏语法错误
 使用拼写检查语法
 
 
 
 

扩展器

ControlsTutorialImg5.jpg

Expander非常类似于GroupBox，但是包含一个按钮，使您可以扩展和折叠内部内容（默认情况下，Expander向外折叠）。Expander定义了IsExpanded属性和Expanded / Collapsed事件。它还使您能够通过ExpandDirection属性控制扩展发生的方向（向上，向下，向左或向右）。

spacer.png

 
 
 检查语法键入
 隐藏语法错误
 使用拼写检查语法
 
 
 
 

项目控件

noesisGUI控件的另一个主要类别是项目控件，它可以包含无限制的项目集合，而不仅仅是一个内容。所有项控件都从抽象ItemsControl类派生，该类是Control的直接子类。

ItemsControl将其内容存储在Items属性中。每个项目都可以是一个任意对象，默认情况下，它就像在内容控件中一样被呈现。

选择器

选择器是项目控件，其项目可以被索引，最重要的是可以选择。从ItemControl派生的抽象Selector类，添加了一些属性来处理选择。例如，用于获取或设置当前选择的两个相似属性是：

• SelectedIndex：从零开始的整数，指示选择了什么项目；如果未选择任何项目，则为-1。项目按添加到集合的顺序编号。
• SelectedItem：当前选定的实际项目实例。

选择器还支持可以应用于单个项目的两个附加属性：

• IsSelected：一个布尔值，可用于选择或取消选择一项（或检索其当前选择状态）
• IsSelectionActive：一个只读属性，告诉您所选内容是否具有焦点。

选择器还定义了事件SelectionChanged，该事件使侦听当前选择的更改成为可能。

NoesisGUI包括四个Selector派生的控件：ComboBox，ListBox，ListView和TabControl。

组合框

ControlsTutorialImg6.jpg

该组合框控件允许用户从列表中选择一个项目。ComboBox是一种流行的控件，因为它不占用太多空间。它仅在选择框中显示当前选择，其余列表按需显示在下拉列表中。单击按钮可以打开和关闭下拉菜单。

ComboBox支持用户可以在选择框中键入任意文本的模式。如果文本与现有项目之一匹配，则该项目将自动被选中。否则，将不会选择任何项目，而是将自定义测试存储在ComboBox的 Text属性中，因此您可以对其采取适当的措施。可以使用以下两个属性控制此模式：IsEditable和IsReadOnly，默认情况下均为false。此外，如果用户单击选择框，则可以将StaysOpenOnEdit属性设置为true，以使下拉菜单保持打开状态。

 
 <标签> 200％
 <标签> 100 ％
  50％
 
 
 

列表框

ControlsTutorialImg7.jpg

熟悉的ListBox控件与ComboBox相似，不同之处在于，所有项目都直接显示在控件的范围内（或者，如果不合适的话，您可以滚动查看其他项目）。

ListBox的最重要的功能可能是它可以支持多个同时选择。这可以通过SelectionMode属性控制，该属性接受三个值：

• 单项：一次只能选择一项。
• 多个：可以同时选择任意数量的项目。单击未选择的项目会将其广告到ListBox的SelectedItems集合中，然后单击选定的项目将其从集合中删除。
• 扩展：可以同时选择任意数量的项目，但是针对单选情况优化了行为。要在此模式下选择多个项目，必须在单击时按住Shift（对于连续项目）或Ctrl（对于非连续项目）。

 
 项目1 
 <标签>项目2 
 <标签>项目3 
 <标签>项目4 
 <标签>项目5 
 <标签>项目6 
 <标签>项目7 
 项目8 
 
 
 

列表显示

ControlsTutorialImg8.jpg

从ListBox派生而来的ListView控件的外观和行为类似于ListBox，不同之处在于它默认情况下使用Extended SelectionMode。但是ListView还添加了一个名为View的属性，与选择自定义ItemsPanel相比，该属性使您能够以更丰富的方式自定义视图。

该视图属性的类型的基本视角，一个抽象类。NoesisGUI附带了一个具体的子类，该类称为GridView。

GridView具有Columns内容属性，该属性保存GridViewColumn对象的集合，以及其他属性来控制列标题的行为。

ListView的项目与ListBox一样被指定为简单列表，因此在每一列中显示不同数据的关键是GridViewColumn的DisplayMemberBinding属性。这个想法是ListView的每一行都包含一个复杂的对象，每列的值是每个对象的属性或子属性。

GridView的优点是它自动支持以下功能：

• 可以通过拖放对列进行重新排序。
• 可以通过拖动列分隔符来调整列的大小。
• 双击分隔符可以自动调整列的大小以“适合”它们的内容。

spacer.png

 xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation”
 xmlns：x = “ http://schemas.microsoft.com/winfx/2006/xaml” >
 
 

 
  填充= “ 6,2” CornerRadius = “ 2” >
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 <
 
 
 
 
 
 
 

TabControl

ControlsTutorialImg9.jpg

最后的选择器TabControl对于在多页内容之间进行切换很有用。TabControl中的选项卡通常位于顶部，但是使用TabControl的 TabStripPlacement属性，您还可以将其位置设置为Left，Right或Bottom。

与其他选择器不同，默认情况下选择第一项。但是，可以通过将SelectedItem设置为null（或SelectedIndex设置为-1）来以编程方式取消选择所有选项卡。

TabControl非常易于使用。只需添加项目，然后将每个项目放置在单独的选项卡上。例如：

spacer.png

 
  Tab1的内容
  Tab2的内容
  Tab3的内容
 
 
 

选单

NoesisGUI内置了两个熟悉的菜单控件：Menu和ContextMenu。

菜单

ControlsTutorialImg10.jpg

菜单只是水平地堆叠其项目。Menu向其ItemsControl基类广告的唯一公共API 是IsMainMenu属性。如果为true（默认情况下），则当用户按下Alt或F10键时，菜单将变为焦点。

与任何其他项目控件一样，Menu的项目可以是任何东西，但是可以预期您将使用MenuItem和Separator对象。

分隔符是一个简单的控件，当放置在MenuItem中时，它将呈现为水平线。分隔符还设计用于本教程后面讨论的另外两个控件：ToolBar和StatusBar。

spacer.png

 xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation”
 xmlns：x = “ http://schemas.microsoft.com/winfx/2006/xaml” >
 
 

 
 

 
 
 
 
 
 
 <分隔符/ >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

上下文菜单

ControlsTutorialImg11.jpg

ContextMenu就像Menu一样；这是一个设计简单的容器，用于容纳MenuItems和Separators。但是，您不能将ContextMenu直接嵌入元素树中。您必须通过适当的属性（例如在FrameworkElement上定义的ContextMenu属性）将其附加到控件。当用户右键单击控件时，将显示上下文菜单。

ContextMenu定义了许多用于自定义菜单放置的属性。默认情况下，菜单的左上角位于鼠标指针的正下方。但是您可以将其Placement更改为MousePoint以外的其他值（例如Absolute），和/或设置其Horizo​​ntalOffset和VerticalOffset，例如，以调整此行为。

spacer.png

 xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation”
 xmlns：x = “ http://schemas.microsoft.com/winfx/2006/xaml” >
 
 

  Width = “ 300” Height = “ 200 “ >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  Horizo​​ntalAlignment = “ Center” VerticalAlignment = “ Center” Foreground = “＃333” />
 
 
 
 

其他项目控件

其余项目（TreeView，ToolBar和StatusBar）既不是选择器也不是菜单，但是仍然可以包含无数个任意对象。

树视图

TreeView是一种流行的控件，用于显示带有可扩展和折叠节点的分层数据。

ControlsTutorialImg12.jpg

TreeView和Menu一样，是一个非常简单的控件。它可以包含任何项目，并垂直堆叠它们。但树视图是很没有意义的，除非你用填充TreeViewItems。

就像MenuItem一样，TreeViewItem是带标题的项目控件。TreeViewItem的 Header属性包含当前项，并且其Items集合包含子项（同样，应该是TreeViewItems）。

TreeViewItem包含方便的IsExpanded和IsSelected属性，以及四个覆盖这些属性的所有四个状态的事件：Expanded，Collapsed，Selected和Unselected。

spacer.png

工具栏

ControlsTutorialImg13.jpg

的工具条的控制通常用于组一起许多小按钮（或其它控制），以增强传统的菜单系统。

工具栏可以放置在元素树中的任何位置，但是它们通常放置在称为ToolBarTray的FrameworkElement内。ToolBarTray具有一个Orientation属性，可以将其设置为Vertical，以使其所有ToolBars垂直排列其项目。

如果工具栏包含更多其范围内可以容纳的项目，则多余的项目将移至溢出区域。通过单击控件末尾的小箭头可以访问此溢出区域。默认情况下，最后一项是第一个移到溢出区域的项目，但是您可以使用ToolBar的 OverflowMode附加属性控制单个项目的溢出行为。这样，您可以将项目标记为按需（默认），始终或从不溢出。

 
 <按钮>
 <图像 高度= “ 16” 源= “ Images / Icons / consulting.png” Stretch = “填充” 宽度= “ 16” />
 
 
 
 
 <分隔符/>
 <复选框>
 <图像 高度= “ 16” 源= “ Images / Icons / print.png” 拉伸= “填充” 宽度= “ 16” />
 
 
 
 <图像 宽度= “ 16” 高度= “ 16 “ Source = ”“ Images / Icons / plus.png” Stretch = “” Fill“ />
 
 
 
 
 <分隔符/>
 
 <图像 高度= “ 16” 源= “ Images / Icons / freelance.png” Stretch = “填充” 宽度= “ 16” />
 
 
 
 

状态栏

ControlsTutorialImg14.jpg

StatusBar的行为类似于Menu ; 它只是水平堆叠其项目。但是通常在窗口的底部沿显示状态信息。

默认情况下，StatusBar为Separator提供一个控制模板，该模板将其呈现为垂直线，就像它在ToolBar中一样。StatusBar中的项目（不包括Separators）被隐式包装在StatusBarItem中，但是您也可以显式地进行包装。这使您可以使用与布局相关的附加属性来自定义它们的位置。

 
  27个项目
 
 缩放
 
  200％
  100％
  50％
  Label 组合框> 
 
 

范围控制

范围控件不会呈现内容控件或项目控件之类的任意内容。它们只是存储和显示落在指定范围内的数值。

范围控件的核心功能来自名为RangeBase的抽象类。此类定义了float类型的属性，这些属性存储当前值和该范围的端点：Value，Minimum和Maximum。它还定义了一个简单的ValueChanged事件。

本节研究了两个主要的内置范围控件ProgressBar和Slider。

进度条

ControlsTutorialImg15.jpg

在理想的世界中，我们永远不需要在软件中使用ProgressBar。但是，当面对长期运行的操作时，向用户显示ProgressBar可以帮助他们意识到确实正在取得进展。因此，在正确的位置使用ProgressBar可以大大提高可用性。

ProgressBar的默认最小值为0，默认最大值为100。它仅向RangeBase已提供的内容添加两个公共属性：

• IsIndeterminate：设置为true时，ProgressBar将显示通用动画（因此，Minimum，Maximum和Value的值无关紧要）。当不知道需要多长时间时，这是一个很棒的功能。
• 方向：默认情况下为水平，但可以将其设置为垂直以使进度从下到上而不是从左到右。

滑杆

ControlsTutorialImg16.jpg

Slider比ProgressBar稍微复杂一点，因为它使用户可以通过将其拇指移动任意数量的可选刻度来更改当前值。例如，您通常使用滑块控件来创建音量控件。

 <滑块 宽度= “ 100” 高度= “ 30” 边距= “ 8,4,8,2” TickPlacement = “ TopLeft“ />
 
 

Slider的默认最小值为0，默认最大值为100。它还定义了一个Orientation属性，但是它包含几个属性，用于调整刻度的位置和频率，ToolsTips的位置和精度，这些属性可以在拇指移动时显示当前值，以及拇指是否捕捉到刻度值或平滑移动到任意值。

文字控制

文本框

ControlsTutorialImg17.jpg

使用TextBox控件，用户可以在其中键入一行或多行文本。除非TextBox的大小受到周围环境的限制（或给定明确的大小），否则它会随着其内部文本的增长而增长。但是，当TextBox的宽度受到限制时，可以通过将TextWrapping属性设置为Wrap或WrapWithOverflow来使文本自动换行以形成其他行。换行永远不允许行超出控件的范围，即使在单词中间也要强制换行。WrapWithOverflow仅在有机会的情况下才换行，因此很长的单词可能会被截断。

密码箱

ControlsTutorialImg18.jpg

PasswordBox是一个用于输入密码的更简单的文本框。通过使用PasswordBox控件，您可以隐藏字符并限制可编辑区域中要键入的字符数，而不是显示键入的文本。

PasswordBox的文本存储在名为Password的字符串属性中。而不具有TextChanged和SelectionChanged事件，PasswordBox仅定义一个PasswordChanged事件。此外，此事件使用普通的RoutedEventHandler委托，因此该事件不会发送有关旧密码和新密码的信息。如果必须知道当前密码，则只需检查此类事件处理程序中的Password属性即可。