使用.Net Core开发WPF App系列教程( 六、WPF中的常用控件（上）)

使用.Net Core开发WPF App系列教程

一、.Net Core和WPF介绍

二、在Visual Studio 2019中创建.Net Core WPF工程

三、与.Net Framework的区别

四、WPF中的XAML

五、WPF中的布局

六、WPF中的常用控件（上）

---

控件分类

在第一篇文章.Net Core和WPF介绍中的WPF的功能和特性部分根据功能性介绍了WPF的控件 名称。

在接下来的文章中，将会详细的介绍各个控件的概念及使用。

主要包括：

内容控件：Label、Button、CheckBox、ToggleButton、RadioButton、ToolTip和ScrollViewer

带有标题的内容控件：TabItem、GroupBox、Expander

导航控件：Frame、TabControl、Page

文本控件：TextBox、PasswordBox、RichTextBox

列表控件：ListBox和ComboBox

基于范围的控件：Slider和ProgressBar

日期控件：Calender和DatePicker

媒体控件：Image和MediaElement

System.Windows.Controls.Control类

控件通常在描述为与用户交互的元素，也就是能接收焦点并接受键盘或鼠标输入的元素。

在WPF中，所有控件都是继承自System.Windows.Controls.Control类。这个类定义了一小部分基本的基础结构：

Background和Foreground

背景画刷和前景画刷，使用System.Windows.Media.Brush对象，常用的有System.Windows.Media.SolidColorBrush，System.Windows.Media.TileBrush，System.Windows.Media.LinearGradientBrush等

BorderBrush

用于填充控件的边框的画刷，使用System.Windows.Media.Brush对象

BorderThickness

获取或设置控件的边框宽度

FontFamily

获取或设置字体名称，使用System.Windows.Media.FontFamily对象

FontSize

获取或设置字体大小，使用Double类型

FontStretch

获取或设置字体的拉伸或压缩程度，使用System.Windows.FontStretch 结构，可以从System.Windows.FontStretches类的静态属性中获取需要的预定义FontStretch对象

FontWeight

获取或设置指定字体的粗细

HorizontalContentAlignment

设置元素水平方向相对于父元素的位置，使用System.Windows.HorizontalContentAlignment枚举值

VerticalContentAlignment

设置元素垂直方向相对于父元素的位置，使用System.Windows.VerticalContentAlignment枚举值

内容控件(ContentControl)

内容控件可以包含并显示内容。但只能有一个子元素。

类继承结构示意图如下

Content属性

内容控件最重要的就是Content属性，用于设置控件的内容。

Content支持所有类型的对象。但根据对象继承类的不同，呈现方式也有所不同。

未继承 自System.Windows.UIElement：获取对象的ToString()方法返回来文本来设置Content

继承自System.Windows.UIElement：调用UIElement.OnRender()方法在内部进行显示

下面使用Label控件，来进行演示

设置Content属性为普通的字符串

 <Label>HelloWorld</Label>

设置Content属性为DateTime对象

<Label xmlns:sys="clr-namespace:System;assembly=mscorlib" Grid.Row="1">
            <sys:DateTime>2020.09.21</sys:DateTime>
</Label>

设置Content属性为Image对象

<Label>
       <Image Source="4.jpg" />
</Label>

设置Content属性为布局容器，这种方式在为控件设置样式时，会经常用到。

<Label Grid.Row="2">
            <Grid>
                <Label Content="HelloWorld" HorizontalAlignment="Center" VerticalAlignment="Center" Panel.ZIndex="1"></Label>
                <Image Source="4.jpg" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
</Label>

有了前面的基础，下面开始介绍具体的内容控件

Label控件

Label是最简单的内容控件，通常会使用Label来放置一些静态文本。

在前面的介绍中已经对Label控件的使用做了一些演示。

下面介绍一下Label的Target属性，Target属性可以获取或设置当用户按下标签的访问键时获得焦点的元素。

<StackPanel>
        <Label Target="{Binding ElementName=tboxA}" Content="Choose _A"></Label>
        <TextBox Name="tboxA"></TextBox>
</StackPanel>

_A代表快捷键Alt+A，当按下快捷键时，TextBox会获得焦点

Label的常规用法

<Grid Grid.Row="0">
            <Label Content="Visual Studio 2015" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="30" Foreground="White"/>
</Grid>

按钮控件

常用的按钮控件有三种：Button、CheckBox和RadioButton。它们都继承自ButtonBase类。

ButtonBase类定义了Click（单击）事件以及ClickMode，ClickMode属性用于决定何时引发Click事件以响应鼠标动作。默认值 是ClickMode.Release，代表鼠标按键释放时引发Click事件，除此之外，还可以设置Press（按下）、Hover（滑过）等值

Button控件

Button就是我们平常见到的常规按钮，像这样

Button的常规用法

 <Button Content="Cancel" VerticalAlignment="Center" Width="88" Margin="5" Click="Button_Click"></Button>

Button增加了两个属性：IsCancel和IsDefault

IsCancel：如果设置了IsCancel为True，则该按钮就变成了窗口的取消按钮，按下Esc，会触发按钮事件

IsDefault：如果设置了IsDefault为True，则该按钮就变成了窗口的确定按钮，当焦点不在窗口内时，按下Enter，会触发按钮事件。

说明：

1、IsCancel和IsDefault属性在一个窗体只使用一次，也就是一个不要将多个按钮的IsDefault或IsCancel属性设为True

ToggleButton控件

ToggleButton包含了按下和未按下两种状态。单击ToggleButton按钮时，会使按钮保持按下状态，再点单击，会使按钮释放。效果如下：

ToggleButton控件不常用，被定义在 System.Windows.Controls.Primitives 命名空间下

ToggleButton包含了一个选中事件(Checked)和取消选中事件(UnChecked)，常规使用方法如下：

 <ToggleButton Content="Button1" Width="88" HorizontalAlignment="Left" Margin="5" Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked"/>

ToggleButton还包含了一个用于设置或获取选中的状态的属性IsChecked，以及是否能将复选框设置为不确定状态的IsThreeState属性(IsThreeState属性在ToggleButton中效果不明显，在CheckBox可以看到明显的效果)

说明：

1、ToggleButton在触发Checked、UnChecked、Indeterminate（第三种状态）三个事件时，都会触发Click事件 

2、需要将ToggleButton设置为第三种状态，可以使用如下方式

 <ToggleButton IsThreeState="True" Content="Three State" Margin="5" IsChecked="{x:Null}"/>

CheckBox控件

CheckBox继承自ToggleButton，所以CheckBox也包含了选中和未选中两种状态，只是呈现方式和ToggleButton稍有不同：

设置IsThreeState属性为true，并设置 IsChecked="{x:Null}，效果如下：

CheckBox的常规用法

<CheckBox  Content="允许我保存凭据" Margin="5"/>

RadioButton控件

RadioButton继承自ToggleButton

RadioButton的常规用法

<RadioButton Content="Radio Button" Margin="5"/>

RadioButton增加了GroupName属性，对于设置为同一GroupName的多个RadioButton，只能有一个RadioButton被选中

 <RadioButton Name="radioButton1" Content="1" GroupName="group1" Margin="5"/>
 <RadioButton Name="radioButton2" Content="2" GroupName="group1" Margin="5"/>

上面的示例中，设置两个RadioButton的GroupName都为group1，设置后只能选中radioButton1或radioButton2，而不能同时选中。如果未设置相同的GroupName，则可以同时选中

其它用法和CheckBox一样，这里就不多做介绍

ToolTip控件

ToolTip就是提示信息控件，像Windows系统中，将鼠标放置在特定位置，可以看到提示文本

 

由于ToolTip是内容控件，所以可以放置任何可视化元素。像下面这样

ToolTip的常规用法

<Button Content="OK" ToolTip="OK"/>

或

<Button Content="Cancel">
       <Button.ToolTip>
              <ToolTip>OK</ToolTip>
        </Button.ToolTip>
</Button>

ToolTip还有一些常用的属性，如下：

Placement 

ToolTip显示的位置，使用System.Windows.Controls.Primitives.PlacementMode枚举值。默认值是Mouse，即根据鼠标位置显示ToolTip。

HorizontalOffset和VerticalOffset

可以精确控制ToolTip的位置（支持正值和负值）

PlacementTarget

相对另一个元素定位ToolTip的显示位置。（需要使用PlacementMode的Left、Right、Top、Bottom或Center值）

IsOpen

可以使用代码控制ToolTip是否显示

ScrollViewer控件

内容控件不仅包括Label、Button及ToolTip等基本控件，还包含了特殊容器。ScrollViewer就是其中的一种。

ScrollViewer控件的作用就是让Content支持滚动

在下面的示例代码中：

在Grid中定义了两行，由于窗体高度是400，所以每一行的高度是200。

放置在第一行的Image控件，高度是250，并不能显示完全

放置在第二行的Image控件，位于ScrollViewer控件内部，高度也是250，也不能显示完全，但是出现了垂直滚动条

ScrollViewer的就作用就是当内容显示不完全时，出现滚动条，让内容支持滚动

<Window x:Class="ScrollViewerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ScrollViewerDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="300" ResizeMode="NoResize" WindowStyle="ToolWindow">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
       
        <Image Height="250" Source="4.jpg"/>

        <ScrollViewer Grid.Row="1">
            <Image Height="250" Source="4.jpg"/>
        </ScrollViewer>
    </Grid>
</Window>

常用属性

VerticalScrollBarVisibility

用于设置是否显示垂直滚动条，使用System.Windows.Controls.ScrollBarVisibility枚举值 ，如下：

Auto（默认）：代表当内容超出时，显示滚动条，内容不超出时，隐藏滚动条。

Disabled：禁用滚动条

Visible：总是显示滚动条

Hidden：总是隐藏滚动条

HorizontalScrollBarVisibility

用于设置是否显示水平滚动条

常用函数

ScrollToEnd、ScrollToHome

控制滚动条滚动到底部和顶部

ScrollToVerticalOffset、ScrollToHorizontalOffset

控制垂直、水平滚动条滚动到特定位置

LineLeft、LineRight

控制水平滚动条向左滚动预先系统定义的值。（实际效果跟单击水平滚动条两端的按钮是一样的）

LineUp、LineDown 

控制水平滚动条向上、向下滚动一行。（实际效果跟单击垂直滚动条两端的按钮是一样的）

PageLeft、PageRight、PageUp、PageDown

控制水平滚动条向左、右、上、下滚动一页。（实际效果跟单击滚动条空白区域是一样的）

带有标题的内容控件

带有标题的内容控件继承自System.Windows.Controls.HeaderedContentControl类， 相比普通内容控件，它增加一些属性。最常用的是Header属性，用于显示标题内容。Header属性与Content属性一样，可以接受任何类型的对象。常用的带有标题的内容控件有TabItem、GroupBox、Expander等

TabItem控件

TabItem表示TabControl（后面会介绍TabControl控件）的一页。

TabItem的常规用法：

<TabControl>
        <TabItem Header="TabItem1">
            <StackPanel>
                
            </StackPanel>
        </TabItem>
        <TabItem Header="TabItem2" IsSelected="True">
            <Grid>
                
            </Grid>
        </TabItem>
</TabControl>

TabItem的常用属性

IsSelected

代表当前Tab是否被选中（只能有一个Tab项被选中）

GroupBox控件

GrouBox显示为具有标题的方框

GroupBox的常规用法：

<GroupBox Margin="10" Header="Group Box">
            <Grid>
                
            </Grid>
</GroupBox>

Expander控件

Expander控件可以通过点击箭头按钮显示或隐藏所包含内容

Expander与常规内容控件不同的时，它可以被折叠起来，并且不占用布局空间。

可以通过ExpandDirection属性设置Expander展开的方向，该值使用System.Windows.Controls.ExpandDirection枚举，包含了Left(左)、Up(上)、Right(右)、Down(下)四个值。效果如下：

Expander控件在展开时会触发Expanded事件，在折叠时会触发Collapsed事件。

Expander的常规用法：

<Expander Header="Expander 1">
            <Grid>
                <TextBlock Text="Expander is a HeaderedContentControl" VerticalAlignment="Center" FontSize="20"/>
            </Grid>
</Expander>

导航控件

导航控件就是可以将一个页面切换到另一个页面的控件。像平常我们在上网时，点击一个链接可以跳转到另外一个页面，这就是导航模型的体现。

在WPF中，可以实现导航操作的常用控件有Frame、TabControl、Page。

Frame控件

Frame控件是支持导航的内容控件。

Frame的常用属性

Source

指定当前页面内容的URI

<Frame Name="frame" Source="StartupPage.xaml"></Frame>

NavigationUIVisibility

设置导航条的可见性，使用System.Windows.Navigation.NavigationUIVisibility枚举值

Automatic 自动（默许值，只有当前进列表或后退列表中具有内容时才会显示导航条）

Hidden 隐藏导航条

Visible 总是显示导航条

CanGoBack和CanGoForward

判断是否能向后或向前导航

Frame的常用函数

Navigate

导航到指定的页面

 this.frame.Navigate(new Uri("Pages/Page2.xaml", UriKind.Relative));

也可以创建页面进行导航，使用这种方式导航，整个对象会始终保存在内存中

Page1 page1 = new Page1();
this.frame.Navigate(page1);

GoBack

在导航列表中向后移动

GoForward

在导航列表中向前移动

Frame的常用事件

Navigating

请求新导航时发生

Navigated

找到导航的目标内容且可通过 Content 属性得到这些内容时发生

LoadCompleted

当已加载、分析并开始呈现目标导航内容时发生

Frame导航执行过程图如下：

说明：

1、在WPF中进行页面导航时，会先触发页面的Initialized事件，再触发Loaded事件，如果需要在页面加载时执行指定操作，可以在Loaded事件中进行处理。

2、在WPF中进行页面导航时，会创建新的页面对象，如果需要保留对象，可以使用Page.KeepAlive="True"或者使用NavigationService.Navigate()的重载版本，直接传入页面对象。这种情况下，第二次导航时不会触发页面的Initialized事件。

推荐阅读：

Placement枚举值介绍

https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.placementmode?view=netcore-3.1

Frame控件

https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.frame?view=netcore-3.1

示例代码

https://github.com/zhaotianff/DotNetCoreWPF/tree/master/六、WPF中的常用控件