控件类

  所有控件都继承自System.Windows.Control类，该类添加了一小部分基本的基础结构：

  • 设置控件内容对其方式的能力
  • 设置Tab键顺序的能力
  • 支持绘制背景、前景和边框
  • 支持格式化文本内容的尺寸和字体

Brush

  WPF设置前景色和背景色不是采用简单的颜色值，而是采用更强大的Brush对象，WPF提供了三种画刷：

  • SolidColorBrush(实心画刷) 
    1
    2
    3
    4
    5
    <Grid>
        <Grid.Background>
            <SolidColorBrush Color="LightGreen"/>
        </Grid.Background>
    </Grid>
  • LinearGradientBrush(线性渐变画刷) 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <Grid>
        <Grid.Background>
            <!-- 起点(0,0) 终点(1,1) 表示渐变方向为左上角 → 右下角 -->
            <!-- Offset 表示偏移 ，取值0~1 -->
            <LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
                <GradientStop Color="LightGreen" Offset="0"/>
                <GradientStop Color="LightPink" Offset="0.5"/>
                <GradientStop Color="LightBlue" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
  • RadialGradientBrush(径向渐变画刷) 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <Grid>
        <Grid.Background>
            <!-- GradientOrigin 表示径向渐变的圆心位置取值0~1 (0.5,0.5)表示正中心 -->
            <RadialGradientBrush GradientOrigin="0.5 0.5">
                <GradientStop Color="LightGreen" Offset="0"/>
                <GradientStop Color="LightPink" Offset="0.5"/>
                <GradientStop Color="LightBlue" Offset="1"/>
            </RadialGradientBrush>
        </Grid.Background>
    </Grid>
  • ImageBrush(图像画刷) 
    1
    2
    3
    4
    5
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
        </Grid.Background>
    </Grid>
  • VisualBrush(可视化画刷) 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <StackPanel>
        <Rectangle x:Name="myRectangle" Width="100" Height="100" Fill="Red" Stroke="Black" StrokeThickness="2"/>
        <Ellipse Width="150" Height="150">
            <Ellipse.Fill>
                <!--使用其他元素作为填充或背景-->
                <VisualBrush Visual="{Binding ElementName=myRectangle}"/>
            </Ellipse.Fill>
        </Ellipse>
    </StackPanel>
  • DrawingBrush(绘图画刷) 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <Rectangle Width="100" Height="100">
        <Rectangle.Fill>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <GeometryDrawing Brush="Blue">
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0,50,50"/>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Rectangle.Fill>
    </Rectangle>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <Rectangle Width="100" Height="100">
        <Rectangle.Fill>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <ImageDrawing ImageSource="image.jpg" Rect="0,0,100,100"/>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Rectangle.Fill>
    </Rectangle>

字体

  Control类定义了一小部分与字体相关的属性，这些属性确定文本在控件中的显示方式

Control类中与字体有关的属性
名称 说明
FontFamily 希望使用的字体的名称
FontSize 字体的设备无关单位尺寸(每单位表示1/96英寸)
FontStyle 由FontStyle对象表示的文本角度，包括Normal、Italic或Oblique
FontWeight 由FontWeight对象表示的文本粗细
FontStretch 字体的拉伸或压缩程度
TextDecorations 文本装饰和排版

引入自定义字体

  1. 下载并导入.tff字体文件，并修改文件属性

  2. 在App.xaml中声明全局字体，对于字体的名称可通过双击.tff字体文件进行安装查看

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <Application.Resources>
        <!-- 引入自定义字体 -->
        <FontFamily x:Key="DSDigital">/Fonts/#DS-Digital</FontFamily>
        <!-- 全局设置字体类型【可选】 -->
        <Style TargetType="{x:Type Control}">
            <Setter Property="FontFamily"
                    Value="{StaticResource DSDigital}" />
        </Style>

    </Application.Resources>

  3. 引用自定义字体

    1
    2
    3
    4
    5
    <TextBlock FontFamily="{StaticResource DSDigital}"
           Text="1314"
           FontSize="50"
           HorizontalAlignment="Center"
           VerticalAlignment="Center" />

内容控件

所有内容控件都继承自抽象类ContentControl

  内容控件(content control)是更特殊的控件类型，它们可包含并显示一块内容。从技术角度看，内容控件是可以包含单个嵌套元素的控件。与布局容器不同的是，内容控件只能包含一个子元素，而布局容器只要愿意可以包含任意多个嵌套元素。下图显示了ContentControl类的层次结构

  还有继承自HeaderedContentControl类的内容控件子集。这些控件同时具有内容区域和标题区域两部分，标题区域用于显示一些标题。这些控件包括GroupBox、TabItem以及Expander控件

Content属性

  与 Panel 类提供 Children 集合来保存嵌套的元素不同，Control类添加了 Content 属性，该属性只接受单一对象。Content属性支持任何类型的对象,但可将该属性支持的对象分为两大类针对每一类进行不同的处理:

  • 未继承自UIElement类的对象：内容控件调用这些控件的ToString()方法获取文本，然后显示该文本
  • 继承自UIElement类的对象：这些对象（包括所有可视化元素，它们时WPF的组成部分）使用UIElement.OnRender()方法在内容控件的内部进行展示

标签

  在所有内容控件中，最简单的是Label控件。与其他任意内容控件类似，Label控件接受希望放入其中的单一内容。但不同的是 Label控件支持记忆符(mnemonics)—本质上，记忆符是能够为链接的控件设置焦点的快捷键。
  为支持此功能，Label控件添加了Target 属性。为了设置 Target 属性，需要使用指向另个控件的绑定表达式。下面是必须遵循的语法:

1
2
3
4
5
6
<StackPanel>
    <Label Target="{Binding ElementName=txtA}">Choose _A</Label>
    <TextBox Name="txtA" />
    <Label Target="{Binding ElementName=txtB}">Choose _B</Label>
    <TextBox Name="txtB"/>
</StackPanel>

  标签文本中的下划线指示快捷键(如果确实需要在标签中显示下划线，必须添加两个下划线)。所有记忆符都使用 Alt 键和已经确定的快捷键工作。例如在该例中，如果用户按下了 A1t+A 组合键，第一个标签会将焦点传递给链接的控件，即txtA。同样，如果按下了 Alt+B 组合键，会将焦点传递给txtB文本框。

按钮

  WPF 提供了三种类型的按钮控件:熟悉的Button控件、CheckBox控件和RadioButton控件。所有这些控件都是继承自 ButtonBase 类的内容控件。

Button

  Button类表示一直使用的 Windows下压按钮。它添加了两个可写属性:IsCancel和IsDefault。

  • 如果将 IsCancel 属性设置为tue，按钮就成为窗口的取消按钮。在当前窗口的任何位置如果按下 Esc 键，就会触发该按钮。
  • 如果将 IsDefault 属性设置为 true，按钮就成为默认按钮(也就是接受按钮)。其行为取决于焦点在窗口中的当前位置。如果焦点位于某个非按钮控件上(如TextBox控件RadioButton 控件和 CheckBox 控件等)，默认按钮具有蓝色阴影，几乎像是具有焦点。如果按下 Enter 键，就会触发默认按钮。但如果焦点位于另一个按钮控件上，当前有焦点的按钮就具有蓝色阴影，而且按下 Enter键会触发当前按钮而不是默认按钮。

ToggleButton

  ToggleButton类，该类表示具有两个状态(按下状态和未按下状态)的按钮。当单击ToggleButtonToggleButton 按钮时，它会保持按下状态，直到再次单击该按钮以释放它为止。这有时称为“粘贴单击”(sticky click)行为。

RepeatButton

  RepeatButton类，只要按钮保持按下状态，该类就不断地触发Click 事件。对于普通按钮，用户每次单击只触发一个 Click 事件。

CheckBox

  CheckBox 控件和 RadioButton 控件是不同类型的按钮。它们继承自ToggleButton 类，这意味着用户可切换它们的开关状态，即它们的“开关”行为。对于CheckBox 控件，切换到控件的“开”状态，意味着在其中放置复选标记。

RadioButton

  RadioButton 类也继承自 ToggleButton 类，并使用相同的 IsChecked 属性和相同的 Checked、Unchecked 以及 Indeterminate 事件。此外，RadioButton 类还增加了GroupName 属性，该属性用于控制如何对单选按钮进行分组。

工具提示

  WPF 为工具提示(当在一些感兴趣的内容上悬停鼠标时，就会弹出的那些臭名昭著的黄色方框)提供了一个灵活模型。因为在 WPF 中工具提示是内容控件，所以可在工具提示中放置任何可视化元素。还可改变各种时间设置来控制工具提示的显示和隐藏速度。

设置ToolTip对象的属性

ToolTip对象的属性
名称 说明
HasDropShadow 决定工具提示时候具有扩散的黑色阴影，使其和背后的窗口区别开来
Placement 使用PlacementMode枚举值决定如何放置工具提示。默认值是Mouse，表示工具提示方框的左上角与当前鼠标的位置相关(根据HorizontalOffset 和VerticalOffset 属性的值，工具提示的实际位置可能会偏离这个起始点)。其他枚举值使用绝对屏幕坐标来设置工具提示的位置，或相对于其他元素(通过使用PlacementTarget属性指定该元素)设置工具提示的位置
HorizontalOffset、VerticalOffset 将工具提示跳到所希望的准确位置。可使用正值或负值
PlacementTarget 允许相对于另一个元素定位工具提示。为使用该属性，Placement属性必须设置为 Left、Right、Top、Bottom或 Center(这些值指定了工具提示和指定元素的哪个边缘对齐)
PlacementRectange 用于偏移工具提示的位置。该属性的工作方式与HorizontalOffset 和VerticalOffset属性相同。如果Placement属性被设置为Mouse，该属性无效
CustomPopupPlacementCallback 允许使用代码动态地定位工具提示。如果Placcmcnt属性被设置为Custom，此属性确定由ToolTip 调用来获取 ToolTip 对象放置位置的方法。回调方法接收三部分信息–popupSize(ToolTip的大小)、targetSize(PlaccmentTarget的大小如果使用的话)和 offset(根据 HorizontalOffset和 VerticalOffset 属性创建的一个点)。该方法返回一个 CustomPopupPlacement对象，该对象告诉WPF 将工具提示放在哪个位置
StaysOpen 该属性实际上不起作用。它的目的是让您创建一直保持打开状态的工具提示直到用户在其他地方单击鼠标才关闭该提示。然而，ToolTipService.ShowDuration属性重写了StaysOpen属性。因此，在经历了设置的时间之后(通常约5秒)或当用户移开鼠标时，工具提示总是会消失。如果希望创建始终保持打开状态的类似工具提示的窗口，最简单的方法是使用Popup 控件
IsEnabled、IsOpen 允许使用代码控制工具提示。通过IsEnabled属性可暂时禁用工具提示，而通过IsOpen属性可使用代码显示或隐藏工具提示(或者只是检查是否打开了工具提示)

设置ToolTipService

  有几个工具提示属性不能通过 ToolTip 类的属性进行配置。在这种情况下，需要使用另个类，即 TooITipService 类。使用 ToolTipService 类可以配置显示工具提示的相关延迟时间。ToolTipService 类的所有属性都是附加属性，所以可在控件标签中直接设置它们，如下所示:

1
2
3
<Button ToolTip="this is a button"
        ToolTipService.InitialShowDelay="1"
        ToolTipService.Placement="Bottom">Button</Button>

为几个控件复制相同的工具提示设置几乎没有任何意义。如果准备对整个应用程序中的工具提示的处理方式进行调整，可通过使用样式自动应用设置，但 ToolTipService 属性值是不能继承的，这意味着如果在窗口和容器级别上设置了属性值，它们不能到达嵌套的元素。

ToolTipService类的属性
名称 说明
InitialShowDelay 设置鼠标悬停在元素上时，工具提示显示之前的延迟时间（单位为毫秒）
ShowDuration 设置如果用户不移动鼠标，在工具提示消失之前显示的时间（单位为毫秒）
BetweenShowDelay 设置时间间隔(单位为毫秒)，在该期间用户可以在工具提示之间移动而不用经历InitialShowDelay 属性设置的延迟时间。例如，如果BetweenShowDelay属性设置为5000毫秒，用户就具有5秒的时间移到另一个具有工具提示的控件。如果用户在此期间移到另一个控件，新的工具提示就会立即显示。如果用户超出了这一期间，BetweenShowDelay属性将失去作用，并且会使用InitialShowDelay属性。在这种情况下，直到经历了InitialShowDelay属性设置的时间后，才会显示第二个工具提示
ToolTip 为工具提示设置内容。设置ToolTipService.ToolTip 属性相当于设置元素的FrameworkElement.ToolTip 属性
HasDropShadow 确定工具提示是否具有扩散的黑色阴影，从而使其与背后的窗口区别开来
ShowOnDisabled 确定当相关联的元素被禁用后是否显示工具提示。如果该属性为tue，将为禁用的元素(元素的IsEnabled 属性被设置为false)显示工具提示。默认值为false,即只有启用了相关联的元素后才会显示工具提示
Placement、PlacementTarget、PlacementRectangle以及VerticalOffset 这些属性用来控制工具提示的位置。这些属性和ToolTipIorizontalOffset 类的对应属性的工作方式相同

  Popup 控件在许多方面与 ToolTip 控件相同,尽管它们之间没有相互继承的关系。与 TooITip类似，Popup也只能包含单一内容，该单一内容可以包含任何WPF元素(该内容存储在Popup.Child 属性中,而不像 ToolTip 内容那样存储在 ToolTip.Content属性中)。另外，与 ToolTip控件一样，Popup控件也可延伸出窗口的边界。最后，可使用相同的布局属性放置Popup控件，并且可使用相同的 IsOpen 属性显示或隐藏 Popup 控件。

  Popup控件和ToolTop控件之间的区域更重要。这些区别包括：

  • Popup控件永远不会自动显示。为显示Popup，必须设置IsOpen属性
  • 默认情况下，Popup.StaysOpen属性被设置为true，并且Popup控件会一直显示，直到明确地将 IsOpen属性设置为false 为止。如果将Popup.StaysOpen属性设置为false，那么当用户在其他地方单击鼠标时，Popup控件将消失。
  • Popup控件提供了PopupAnimation属性，当把IsOpen 属性设置为 true 时，通过该属性可控制 Popup 控件进入视野的方式。可以选择 None(默认值)、Fade(弹出窗口的透明度逐渐增加)、Scro11(如果空间允许，弹出窗口将从窗口的左上角滑入)以及Slide(如果空间允许，弹出窗口将从上向下滑进其位置)。为使用这些动画中的任意一个，还必须将AllowsTransparency属性设置为true。
  • Popup 控件可接收焦点。因此，可在其内部放置与用户交互的控件，如按钮。该功能是使用 Popup 控件(而不使用 ToolTip 控件)的主要原因之一。
  • Popup 控件在 System.Windows.Controls.Primitive 名称空间中定义，因为它的最常见用法是用作更复杂控件的构件。在外观修饰方面可发现Popup控件和其他控件的区别很大。特别是，如果希望看到内容，就必须设置Background属性，因为Popup控件不会从包含它的窗口继承背景设置，而且您需要自行添加边框(对于这个目的，Border 元素的效果堪称完美)。

特殊容器

  ScrollViewer控件，该控件直接继承ContentControl 类，提供了虚拟界面，允许用户围绕更大的元素滚动。与所有内容控件一样ScrollViewer 只能包含单个元素，虽然如此，您仍可在内部放置布局容器来保存自己需要的
意类型的元素。

ScrollViewer

  如果希望让大量内容适应有限的空间，滚动是重要特性之一。在WPF中为了获得滚动支持，需要在 ScrollViewer控件中封装希望滚动的内容。可通过设置HorizontalScrollBarVisibility和VerticalScrollBarVisibility控制滚动条的显示状态：

  • Visible(默认)：总是显示
  • Auto：自动根据内容判断时候需要显示滚动条
  • Disable：不显示滚动条，无法滚动
  • Hidden：不显示滚动条，可以滚动

通过代码进行滚动

  • LineUp()和LineDown()：向上和向下移动的效果相当于单击一次垂直滚动条两端的箭头按钮
  • PageUp()和PageDown()：向上和向下滚动一整屏，相当于在滚动滑块的上面或下面单击滚动条
  • 用于水平滚动的类似方法，包括LineLeft()、LineRight()、PageLeft()和PageRight()
  • 最后，还可使用 ScrollToXxrx()这一类方法，从而滚动到任何特定位置。对于垂直滚动，包括 ScrollToEnd()和 ScrollToHome()，这两个方法可以滚动到内容的顶部和底部。还有 ScrollToVerticalOffset(),该方法可滚动到特定位置。对于水平滚动也有类似的方法包括ScrollToLefEnd0、ScroliToRightEnd( )和 ScrollToHorizontalOffset( )。

自定义滚动

  ScrollViewer 控件内置的滚动功能是很有用的。该功能允许缓慢滚动任何内容，从复杂的矢量图形乃至元素网格。不过，ScrollViewer 控件最奇特的特征是允许其包含的内容参与滚动过程。下面是工作原理:

  1. 在ScrollViewer控件中放置能够滚动的元素,可以是实现了IScrollInfo 接口的任意元素。
  2. 通过将 ScrollViewer,CanContentScroll属性设置为 true,告诉 ScrollViewer 控件其内容知道如何进行滚动。
  3. 当和ScrollViewer控件进行交互时(通过使用滚动条、鼠标轮和滚动方法等)，ScrollViewer 控件通过 IScrollnfo 接口来调用元素的恰当方法。元素接着执行它自己的自定义滚动功能。

IScrollInfo 接口定义了一套方法,这套方法响应不同的滚动动作。例如,它包含了 ScrollViewer控件提供的许多滚动方法，如LineUp()、LimeDowm()、PageUp()以及PageDown()。它还定义了一些处理鼠标滚轮的方法。

  如果在ScrollViewer控件中放置StackPanel面板，而且不设置CanCOntentScroll属性，将得到普通的滚动行为。一次可向上或向下滚动几个像素。但如果将CanContentScroll属性设置为true，那么每次单击时会滚动到下一个元素的开头

1
2
3
4
5
6
7
8
9
10
11
12
<ScrollViewer CanContentScroll="True">
    <StackPanel>
        <Button Height="100">1</Button>
        <Button Height="100">2</Button>
        <Button Height="100">3</Button>
        <Button Height="100">4</Button>
        <Button Height="100">5</Button>
        <Button Height="100">6</Button>
        <Button Height="100">7</Button>
        <Button Height="100">8</Button>
    </StackPanel>
</ScrollViewer>

GroupBox

  GroupBox是这三个继承自HeaderedContentControl类的控件中最简单的一个。它显示为具有圆角和标题的方框。

1
2
3
4
5
6
7
8
9
10
11
12
<GroupBox Header="A GroupBox Text"
          Padding="5"
          Width="200"
          Height="150">
    <StackPanel>
        <RadioButton Margin="3">One</RadioButton>
        <RadioButton Margin="3">Two</RadioButton>
        <RadioButton Margin="3">Three</RadioButton>
        <Button Margin="3"
                Content="Save" />
    </StackPanel>
</GroupBox>

TabItem

  TabItem 表示 TabControl控件中的一页。TabItem 类添加的唯一有意义的属性是 IsSelected,该属性指示选项卡(tab)当前是否显示在 TabControl 控件中。

Expander

  使用 Expander 控件是十分简单的–只需在该控件内部包装希望使其能够折叠的内容。通常，每个 Expander 控件开始时都是折叠的，但可在标记中(或代码中)通过设置IsExpanded 属性

文本控件

  WPF 提供了三个用于输入文本的控件:TextBox、RichTextBox和PasswordBox。PasswordBox控件直接继承自 Control类。TextBox和 RichTextBox 控件间接继承自 TextBoxBase 类。

多行文本

  TextBox控件通常存储单行文本，可将TextWrapping属性设置为Wrap或WrapWithOverflow

选择文本

  正如您已经了解到的，在任何文本框中都可以通过单击并拖动鼠标，或按住 Shif 键并使用方向键在文本中移动来选择文本。TextBox类还提供了使用SelectionStart、SelectionLength 以及SelectedText属性，通过编程决定选择哪些文本或改变当前所选文本的能力。

拼写检查

  TextBox提供了一个更特殊的功能——集成的拼写检查，该功能会在文本中无法识别的单词下面添加红色波浪线。用户可右击不能识别的单词，并从可能正确的单词列表中进行选择。

1
<TextBox SpellCheck.IsEnabled="True"/>

PasswordBox

  与TextBox类相比，PasswordBox的用户界面更加精简。与TextBox 类非常相似，它提供了 MaxLength 属性;Clear()、Paste()以及 SelectAll()方法;并且提供了当文本发生变化时触发的事件(PasswordChanged 事件)。TextBox类和PasswordBox 类最重要的区别在于内部的工作方式。尽管可使用Password属性作为普通字符串读取和设置文本，但在内部 PasswordBox 类只使用System.Security.SecureString 对象。

列表控件

  所有的列表控件全都继承值ItemsControl类，在WPF中常见的列表控件主要包括：

  • ListBox
  • ComboBox
  • ListView
  • TreeView
  • ToolBar

基于范围的控件

  WPF提供了三个使用范围概念的控件。这些控件使用在特定最小值和最大值之间的数值。这些控件–ScrollBar、ProgressBar以及 Slider–都继承自RangeBase类(该类又继承自 Control类)。尽管它们使用相同的抽象概念(范围)，但工作方式却有很大的区别。

RangeBase类的属性
名称 说明
Value 控件的当前值
Maximum 上限
Minimum 下限
SmallChange Value属性为“小变化”调整的数量
LargeChange Value属性为“大变化”调整的数量

日期控件

  WPF包含两个日期控件,Calendar和DatePicker。这两个控件都被设计为允许用户选择日期

Calendar和DatePicker类的属性
名称 说明
DisplayDateStart、DisplayDateEnd 设置在日日试图中显示的日期范围
BlackoutDates 保存在日历中将被禁用或不能选择的日期集合
SelectedDate 作为DateTime对象提供选择的日期
SelectedDates 作为DateTime对象的集合提供选择的日期
DisplayDate 使用Datetime对象确定在日日试图中最初显示的日期
FirstDayOfWeek 确定在日日中美方的开始位置（最左边的位置）显示一星期中的哪一天
IsTodayHighlighted 确定日历视图时候通过突出显示指出当前日期
DisplayMode(只适用于Calendar) 确定日日最初的月份显示模式
SelectionMode(只适用于Calendar) 确定允许的日期选择类型，默认时SingleDate
IsDaropDownOpen 确定时候打开DatePicker控件中的下拉日历视图
SelectedDateFormat(只适用于DatePicker) 确定在DatePicker控件的文本部分显示选择的日期的方式