使用.Net Core开发WPF App系列教程( 六、WPF中的常用控件（上）) 使用.Net Core开发WPF App系列教程
二、在Visual Studio 2019中创建.Net Core 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属性为普通的字符串
1 <Label>HelloWorld</Label>
设置Content属性为DateTime对象
1 <Label xmlns:sys="clr-namespace:System;assembly=mscorlib" Grid.Row="1"> 2 <sys:DateTime>2020.09.21</sys:DateTime> 3 </Label>
设置Content属性为Image对象
1 <Label> 2 <Image Source="4.jpg" /> 3 </Label>
设置Content属性为布局容器，这种方式在为控件设置样式时，会经常用到。
1 <Label Grid.Row="2"> 2 <Grid> 3 <Label Content="HelloWorld" HorizontalAlignment="Center" VerticalAlignment="Center" Panel.ZIndex="1"></Label> 4 <Image Source="4.jpg" HorizontalAlignment="Center" VerticalAlignment="Center"/> 5 </Grid> 6 </Label>
有了前面的基础，下面开始介绍具体的内容控件
Label控件
Label是最简单的内容控件，通常会使用Label来放置一些静态文本。
在前面的介绍中已经对Label控件的使用做了一些演示。
下面介绍一下Label的Target属性，Target属性可以获取或设置当用户按下标签的访问键时获得焦点的元素。
1 <StackPanel> 2 <Label Target="{Binding ElementName=tboxA}" Content="Choose _A"></Label> 3 <TextBox Name="tboxA"></TextBox> 4 </StackPanel>
_A代表快捷键Alt+A，当按下快捷键时，TextBox会获得焦点
Label的常规用法
1 <Grid Grid.Row="0"> 2 <Label Content="Visual Studio 2015" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="30" Foreground="White"/> 3 </Grid>
按钮控件
常用的按钮控件有三种：Button、CheckBox和RadioButton。它们都继承自ButtonBase类。
ButtonBase类定义了Click（单击）事件以及ClickMode，ClickMode属性用于决定何时引发Click事件以响应鼠标动作。默认值 是ClickMode.Release，代表鼠标按键释放时引发Click事件，除此之外，还可以设置Press（按下）、Hover（滑过）等值
Button控件
Button就是我们平常见到的常规按钮，像这样
Button的常规用法
1 <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)，常规使用方法如下：
1 <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设置为第三种状态，可以使用如下方式
1 <ToggleButton IsThreeState="True" Content="Three State" Margin="5" IsChecked="{x:Null}"/>
CheckBox控件
CheckBox继承自ToggleButton，所以CheckBox也包含了选中和未选中两种状态，只是呈现方式和ToggleButton稍有不同：
设置IsThreeState属性为true，并设置 IsChecked="{x:Null}，效果如下：
CheckBox的常规用法
1 <CheckBox Content="允许我保存凭据" Margin="5"/>
RadioButton控件
RadioButton继承自ToggleButton
RadioButton的常规用法
1 <RadioButton Content="Radio Button" Margin="5"/>
RadioButton增加了GroupName属性，对于设置为同一GroupName的多个RadioButton，只能有一个RadioButton被选中
1 <RadioButton Name="radioButton1" Content="1" GroupName="group1" Margin="5"/> 2 <RadioButton Name="radioButton2" Content="2" GroupName="group1" Margin="5"/>
上面的示例中，设置两个RadioButton的GroupName都为group1，设置后只能选中radioButton1或radioButton2，而不能同时选中。如果未设置相同的GroupName，则可以同时选中
其它用法和CheckBox一样，这里就不多做介绍
ToolTip控件
ToolTip就是提示信息控件，像Windows系统中，将鼠标放置在特定位置，可以看到提示文本
由于ToolTip是内容控件，所以可以放置任何可视化元素。像下面这样
ToolTip的常规用法
1 <Button Content="OK" ToolTip="OK"/>
或
1 <Button Content="Cancel"> 2 <Button.ToolTip> 3 <ToolTip>OK</ToolTip> 4 </Button.ToolTip> 5 </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的就作用就是当内容显示不完全时，出现滚动条，让内容支持滚动
1 <Window x:Class="ScrollViewerDemo.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:ScrollViewerDemo" 7 mc:Ignorable="d" 8 Title="MainWindow" Height="400" Width="300" ResizeMode="NoResize" WindowStyle="ToolWindow"> 9 <Grid> 10 <Grid.RowDefinitions> 11 <RowDefinition/> 12 <RowDefinition/> 13 </Grid.RowDefinitions> 14 15 <Image Height="250" Source="4.jpg"/> 16 17 <ScrollViewer Grid.Row="1"> 18 <Image Height="250" Source="4.jpg"/> 19 </ScrollViewer> 20 </Grid> 21 </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的常规用法：
1 <TabControl> 2 <TabItem Header="TabItem1"> 3 <StackPanel> 4 5 </StackPanel> 6 </TabItem> 7 <TabItem Header="TabItem2" IsSelected="True"> 8 <Grid> 9 10 </Grid> 11 </TabItem> 12 </TabControl>
TabItem的常用属性
IsSelected
代表当前Tab是否被选中（只能有一个Tab项被选中）
GroupBox控件
GrouBox显示为具有标题的方框
GroupBox的常规用法：
1 <GroupBox Margin="10" Header="Group Box"> 2 <Grid> 3 4 </Grid> 5 </GroupBox>
Expander控件
Expander控件可以通过点击箭头按钮显示或隐藏所包含内容
Expander与常规内容控件不同的时，它可以被折叠起来，并且不占用布局空间。
可以通过ExpandDirection属性设置Expander展开的方向，该值使用System.Windows.Controls.ExpandDirection枚举，包含了Left(左)、Up(上)、Right(右)、Down(下)四个值。效果如下：
Expander控件在展开时会触发Expanded事件，在折叠时会触发Collapsed事件。
Expander的常规用法：
1 <Expander Header="Expander 1"> 2 <Grid> 3 <TextBlock Text="Expander is a HeaderedContentControl" VerticalAlignment="Center" FontSize="20"/> 4 </Grid> 5 </Expander>
导航控件
导航控件就是可以将一个页面切换到另一个页面的控件。像平常我们在上网时，点击一个链接可以跳转到另外一个页面，这就是导航模型的体现。
在WPF中，可以实现导航操作的常用控件有Frame、TabControl、Page。
Frame控件
Frame控件是支持导航的内容控件。
Frame的常用属性
Source
指定当前页面内容的URI
1 <Frame Name="frame" Source="StartupPage.xaml"></Frame>
NavigationUIVisibility
设置导航条的可见性，使用System.Windows.Navigation.NavigationUIVisibility枚举值
Automatic 自动（默许值，只有当前进列表或后退列表中具有内容时才会显示导航条）
Hidden 隐藏导航条
Visible 总是显示导航条
CanGoBack和CanGoForward
判断是否能向后或向前导航
Frame的常用函数
Navigate
导航到指定的页面
1 this.frame.Navigate(new Uri("Pages/Page2.xaml", UriKind.Relative));
也可以创建页面进行导航，使用这种方式导航，整个对象会始终保存在内存中
1 Page1 page1 = new Page1(); 2 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枚举值介绍
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中的常用控件