控件分类
在第一篇文章.Net Core和WPF介绍中的WPF的功能和特性部分根据功能性介绍了WPF的控件 名称。
在接下来的文章中，将会详细的介绍各个控件的概念及使用。
主要包括：
内容控件：Label、Button、CheckBox、ToggleButton、RadioButton、ToolTip和ScrollViewer
带有标题的内容控件：TabItem、GroupBox、Expander
导航控件：Frame、TabControl、Page
窗体控件：Window
文本控件：TextBox、PasswordBox、RichTextBox
列表控件：ListBox、ListView、DataGrid、ComboBox、TreeView和ToolBar
基于范围的控件：Slider和ProgressBar
日期控件：Calender和DatePicker
媒体控件：Image和MediaElement
轻量级控件：TextBlock
菜单：Menu、ContextMenu
浏览器控件：WebBrowser
文本控件
TextBox、PasswordBox、和RichTextBox都是文本控件。
虽然把这三个控件归到一个类别进行演示，实际他们继承的类并不相同。
TextBox和RichTextBox都继承自TextBoxBase，TextBoxBase是为文本编辑控件提供功能的抽象基类。
TextBox控件
TextBox是普通文本框控件，支持显示或编辑未设置格式的文本。相比于RichTextBox，TextBox占用的资源更少。
TextBox和RichTextBox对比
| 控件 | 实时拼写检查 | 上下文菜单 | 格式命令，例如 ToggleBold (Ctr+B) | FlowDocument 内容，例如图像、段落、表格等 |
|---|---|---|---|---|
| TextBox | 是 | 是 | 否 | 不是。 |
| RichTextBox | 是 | 是 | 是 | 是 |
常用属性
| 属性 | 说明 |
| TextWrapping | 指示文本框应该如何换行 |
| Text | 文本框要显示的文本 |
| TextAlignment | 文本框水平对齐方式 |
| SelectedText | 文本框选中的文本 |
| MaxLines | 文本框显示的最多行数 |
| MinLines | 文本框显示的最小行数 |
| AcceptReturn | 按下回车时，是否换行 |
| VerticalScrollBarVisibility | 控制垂直滚动条的可见性 |
| SelectionStart | 所选文本的开始位置 |
| SelectionLength | 所选文本的长度 |
设置文本框文本
通过TextBox.Text属性，可以设置/获取文本框的显示文本
多行显示
通过TextBox.TextWraping属性，可以设置文本框的换行方式，可选以下枚举值：
1 public enum TextWrapping
2 {
3 //如果行溢出可用块宽度，则将发生换行。 但是，如果换行算法不能确定换行时机，例如超长单词限制于固定宽度容器中而不允许滚动时，行会溢出块宽度。
4 WrapWithOverflow = 0,
5 //不执行换行。
6 NoWrap = 1,
7 //如果行溢出可用块宽度，即使标准换行算法不能确定换行时机，例如超长单词限制于固定宽度容器中而不允许滚动时，也将发生换行。
8 Wrap = 2
9 }
可以通过设置TextBox.MaxLines属性来设置文本框能显示的最多行数，在未指定TextBox高度的情况下，TextBox会显示为能显示MaxLines行数的高度。
1 <TextBox Width="200" HorizontalAlignment="Center" VerticalAlignment="Center" Text="One of the TextAlignment values that specifies the horizontal alignment of the contents of the text box. The default is Left." TextWrapping="WrapWithOverflow" MaxLines="3"></TextBox>
TextBox.MinLines属性可以设置最小显示行数。
TextBox.AcceptsReturn 属性设置为 true 会导致在按下 回车键时插入新行，如果需要，会再次自动扩展 TextBox 以包含新行的空间。
TextBox.VerticalScrollBarVisibility属性将滚动条添加到 TextBox，以便在 TextBox 扩展超出包围它的框架或窗口的大小时可以滚动 TextBox 的内容。
选择文本
通过TextBox.SelectionStart属性设置所选文本的开始位置、TextBox.SelectionLength设置所选文本的长度。
TextBox.SelectedText属性可以快速检查或改变在文本框中选中的文本。
例如我们在界面上放置一个按钮，当按钮点击时，设置SelectionStart = 0，SelectionLength = 13
1 <TextBox Margin="10" Width="200" Name="tbox1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="One of the TextAlignment" TextWrapping="WrapWithOverflow" VerticalScrollBarVisibility="Auto" MaxLines="3" AcceptsReturn="True"></TextBox> 2 <Button Content="选中文本" Click="Button_Click"></Button>
1 private void Button_Click(object sender, RoutedEventArgs e)
2 {
3 tbox1.Focus();
4 tbox1.SelectionBrush = Brushes.Red;
5 tbox1.SelectionStart = 0;
6 tbox1.SelectionLength = 13;
7 }
运行效果如下：
说明：
需要先设置文本框焦点，否则设置选中无效
TextBox.AutoWordSelection属性设置为true时，可以在拖动鼠标时自动选中整个单词。
TextBox.SelectionBrush属性可以设置文本选中时的画刷。
PasswordBox
PasswordBox是密码文本框，用于输入密码。它跟TextBox不同的是，输入的文本会变成圆圈符号，PasswordBox不支持剪贴板。
常用函数
| 函数 | 说明 |
| Clear | 清除PasswordBox.Password属性的值 |
| Paste | 将剪贴板的内容替换当前选中的密码文本 |
| SelectAll | 选中全部密码文本 |
常用属性
| 属性 | 说明 |
| Password | 获取/设置当前PasswordBox的密码文本 |
| PasswordChar | 获取/设置PasswordBox密码的掩码字符 |
当密码更改时，会触发PasswordChanged事件。
在PasswordBox内部，使用的是System.Security.SecureString对象来存储密码，与普通文本类似，Security也是纯文本对象，但是是以加密方式在内存中保存。用于加密字符串的密钥是随机生成的，存储在一块从来不会写入到磁盘的内存中。
说明：
PasswordBox.Password属性是CLR属性，而非WPF的依赖属性，所以Password不支持绑定。在后面介绍MVVM及绑定时，会介绍如何实现PasswordBox.Password的绑定。
RichTextBox
RichTextBox是富文本框，它支持富文本，使用WPF中的FlowDocument对象。
这里不做详细介绍，在后面介绍WPF中的文档时，再进行详细介绍。
列表控件
WPF提供了一些可用于集合显示的控件，如ListBox、Combox、TreeView等。这些列表控件都继承自ItemsControl类。
ItemsControl
ItemsControl 是一种可以包含多个项（如字符串、对象或其他元素）的 类型 Control 。 下图显示了包含以下 ListBox 不同类型的项的控件：
-
一个字符串。
-
DateTime 对象。
-
Image 对象。
ItemsControl类添加了所有基于列表的控件都使用的功能，它提供了两种填充列表项的方式
1、使用代码或XAML将列表项直接添加到Items集合中
使用代码添加
1 ListBoxItem listBoxItem = new ListBoxItem();2 listBoxItem.Content = "HelloWorld";3 4 ListBoxItem listBoxItem2 = new ListBoxItem();5 listBoxItem2.Content = DateTime.Now;6 7 ListBoxItem listBoxItem3 = new ListBoxItem();8 listBoxItem3.Content = new Image() {Height=150,Stretch=Stretch.Uniform, Source = new BitmapImage(new Uri("https://img0.baidu.com/it/u=2560415768,2503528984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1717261200&t=9c08bc35cfa6953d1b68c3bdcbc7e8f9")) };9
10 this.listbox3.Items.Add(listBoxItem);
11 this.listbox3.Items.Add(listBoxItem2);
12 this.listbox3.Items.Add(listBoxItem3);
XAML添加
1 <ListBox>2 <ListBox.Items>3 <ListBoxItem>HelloWorld</ListBoxItem>4 <ListBoxItem Content="{x:Static sys:DateTime.Now}"></ListBoxItem>5 <ListBoxItem>6 <ListBoxItem.Content>7 <Image Stretch="Uniform" Height="150" Source="https://img0.baidu.com/it/u=2560415768,2503528984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1717261200&t=9c08bc35cfa6953d1b68c3bdcbc7e8f9" ></Image>8 </ListBoxItem.Content>9 </ListBoxItem>
10 </ListBox.Items>
11 </ListBox>
2、使用数据绑定，将集合绑定到ItemSource。
ItemSource支持绑定到任何实现了IEnumerable接口的类型
1 List<string> list = new List<string>();
2 list.Add("1");
3 list.Add("2");
4 list.Add("3");
5
6 this.listbox1.ItemsSource = list;
说明：
当设置了ItemSource后，Items集合被设置为只读状态，此时无法再通过Items集合去操作列表。如果想清空列表，可以设置ItemSource为null。
每个 ItemsControl 类型都有相应的项容器类型。 ItemsControl 的每个项容器类型都会添加到Items中
例如：
对于 ListBox，项容器是 ListBoxItem 控件。
对于 ComboBox，项容器是 ComboBoxItem 控件。
我们可以手动为ItemsControl的每一项显式创建容器类型，但这不是必需的。 如果不显式创建容器类型，则会生成一个容器类型，其中包含项集合中的数据项。
例如，如果将字符串对象的 ItemsSource 集合绑定到 的 ListBox的ItemSource，则不会显式创建 ListBoxItem 对象，但 ListBox 将为每个字符串生成一个ListBoxItem对象。 可以使用 属性访问生成的项容器 ItemContainerGenerator 。
ItemControl的显示效果可以通过样式/控件模板和数据模板来进行改变，在后面介绍到ListBox样式时，再单独进行介绍。
Selector
Selector类继承自ItemsControl类，它除了拥有ItemsControl的全部功能外，还添加了允许用户从其子元素中选择项的功能。
常用属性
| 属性 | 说明 |
| SelectedValue | 获取或设置SelectedItem的值，它是通过SelectedValuePath来确定的 |
| SelectedItem | 获取或设置当前选中项的第一项，如果选择项为空，则返回null |
| SelectedIndex | 获取或设置当前选中项的第一项的索引，如果选择项为空，则返回-1 |
| SelectedValuePath | 获取或设置SelectedValue从SelectedItem获取值的路径 刚开始看到这里可能不好理解， 通俗点讲，就是列表绑定的可能是一个对象集合，我们要获取选中项对象里的 某个字段，就通过SelectedValuePath指定 |
说明：
ItemsControl类之后的继承层次有两个主要分支。
一个主要分支是选择器(Selector)，包括ListBox、ComboBox以及TabControl。这些控件都继承自Selector类，
并且都具有跟踪当前选择项(SelectedItem)或其位置(SelectedIndex)的属性。
另一个分支，以不同方式选择列表项。该分支包括用于Menu、Toolbar以及TreeView，所有这些控件都继承自ltemsControl，但没有继承选择器(Selector)类。
另外 Microsoft Ribbon for WPF里的一些控件也是继承自ItemsControl类，在后面会专门出一篇文章介绍Ribbon for WPF的使用。
在我们自己封装列表控件时，可以直接继承自ListBox类，这样就可以得到列表的基础功能。
因为WPF的数据模板和控件模板功能，列表控件可以显示为多样化，下图为一个圆盘状的列表控件
在设置控件的模板后，只需要将它绑定到一个列表，即可现实类似的效果。
1 this.menu.ItemsSource = itemList;
ListBox控件
前面介绍了关于ItemsControl的一些大概理论，现在详细介绍一下ListBox控件的一些使用。
选择模式
ListBox提供了一个SelectionMode属性，可以用于多选模式。SelectionMode属性设置为Multiple或 Extended，ListBox类还允许选择多项。
在Multiple模式下，可通过单击项进行选择或取消选择。
在Extended模式下，需要按下Ctrl键选择其他项，或按下Shift键选择某个选项范围。在这两种多选模式下，可用SelectedItems 集合替代SelectedItem属性来获取所有选择的项。
选择项更改事件
当列表选项项更改时，会引发SelectionChanged事件，
如果希望确定哪些项(如果存在的话)被取消选中，在事件处理函数中可使用SelectionChangedEventArgs对象的Removedltems属性。
类似地，可通过Addedltems 属性了解哪些项被添加到了选中的项中。
1 private void listbox4_SelectionChanged(object sender, SelectionChangedEventArgs e)
2 {
3 var removedItems = e.RemovedItems;//取消选中的项
4 var addedItems = e.AddedItems; //新选中的项
5 }
在单项选择模式下，无论何时选项发生变化，总有一项被选中并总有一项被取消选中。在多项选择或扩展选择模式下，情况就未必如此了。
ListBoxItem
在前面提到过，为ListBoxItem添加项时，可以指定容器项为ListBoxItem，也可以不指定。不指定时，系统会自动生成一个ListBoxItem容器项。
ListBoxltem类继承自ContentControl类，从而ListBoxltem能够包含一段嵌套的内容。
如果该内容继承自UIElememt类，它将在ListBox 控件中呈现出来。如果是其他类型的对象，ListBoxItem对象会调用ToString()方法并显示最终的文本。
例如我们有一个Student列表，想显示在ListBox中，只需要重写ToString()函数，ListBoxItem就会显示我们想要显示的内容。
1 public class Student2 {3 public int Id { get; set; }4 5 public string Name { get; set; }6 7 public override string ToString()8 {9 return Name;
10 }
11 }
性能问题
显示大量项可能会导致性能问题，可以参阅
https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/advanced/optimizing-performance-controls?view=netframeworkdesktop-4.8
列表项拖动
可以nuget搜索包gong-wpf-dragdrop
ListView控件
ListView继承自ListBox，增加了对于列显示的支持，并且增加了快速切换视图或显示模式的功能，而且在切换时，不需要重新绑定数据以及重新构建列表。
ListView控件在ListBox的基础上，增加了一个View（视图）属性，View属性控制数据在ListView中的样式和组织方式。借助View属性，可以创建内容丰富的列表。
在WPF中，目前只提供了视图对象GridView，GridView对于创建多列非常有用，如果GridView不能满足需求，可以创建自定义视图，下面先介绍GridView的使用。
GridView使用
GridView类继承自ViewBase类，表示具有多列的列表视图。
通过GridView.Columns集合添加GridViewColumn对象可以定义这些列，同样可以使用其他 Collection<T> 方法（如 Remove 和 Insert ）修改 中的 GridView.Columns。
GridViewColumn提供了Header和DisplayMemberBinding两个属性
Header属性用于显示列头
DisplayMemberBinding属性提供了一个绑定，可以定义要在列中显示的数据。
下面的示例代码为ListView添加了三列，并绑定数据显示
使用XAML添加
1 <ListView Name="listview1">2 <ListView.View>3 <GridView AllowsColumnReorder="true"4 ColumnHeaderToolTip="Employee Information">5 6 <GridViewColumn DisplayMemberBinding=7 "{Binding Path=FirstName}" 8 Header="First Name" Width="100"/>9
10 <GridViewColumn DisplayMemberBinding=
11 "{Binding Path=LastName}"
12 Width="100">
13 <GridViewColumnHeader>Last Name</GridViewColumnHeader>
14 </GridViewColumn>
15 <GridViewColumn DisplayMemberBinding=
16 "{Binding Path=EmployeeNumber}"
17 Header="Employee No." Width="100"/>
18 </GridView>
19 </ListView.View>
20 </ListView>
使用代码添加
1 private void CreateListView2()2 {3 GridView myGridView = new GridView();4 myGridView.AllowsColumnReorder = true;5 myGridView.ColumnHeaderToolTip = "Employee Information";6 7 GridViewColumn gvc1 = new GridViewColumn();8 gvc1.DisplayMemberBinding = new Binding("FirstName");9 gvc1.Header = "FirstName";
10 gvc1.Width = 100;
11 myGridView.Columns.Add(gvc1);
12 GridViewColumn gvc2 = new GridViewColumn();
13 gvc2.DisplayMemberBinding = new Binding("LastName");
14 gvc2.Header = "Last Name";
15 gvc2.Width = 100;
16 myGridView.Columns.Add(gvc2);
17 GridViewColumn gvc3 = new GridViewColumn();
18 gvc3.DisplayMemberBinding = new Binding("EmployeeNumber");
19 gvc3.Header = "Employee No.";
20 gvc3.Width = 100;
21 myGridView.Columns.Add(gvc3);
22
23 this.listview2.View = myGridView;
24 }
创建数据并绑定
Employee.cs
1 public class Employee
2 {
3 public string FirstName { get; set; }
4
5 public string LastName { get; set; }
6
7 public string EmployeeNumber { get; set; }
8 }
添加测试数据及绑定
1 var list = new List<Employee>();
2
3 Employee employee1 = new Employee() { FirstName = "FirstName1",LastName = "LastName1",EmployeeNumber = "100"};
4 Employee employee2 = new Employee() { FirstName = "FirstName2", LastName = "LastName2", EmployeeNumber = "200" };
5
6 list.Add(employee1);
7 list.Add(employee2);
8
9 this.listview1.ItemsSource = list;
显示效果如下：
GridView列的大小
通过设置GridViewColumn.Width属性，可以设置列的宽度。如果想设置宽度自动，可以设置Width=NaN，如下所示
XAML
1 <GridViewColumn DisplayMemberBinding=
2 "{Binding Path=FirstName}"
3 Header="First Name" Width="NaN"/>
C#
1 gvc3.Width = double.NaN;
但这只是确定了列的初始宽度 ，用户还是可以拖动列的边缘来修改列宽，如果想限制列的最大/最小宽度，需要通过模板功能进行列头重定义。在后面介绍到控件模板功能时，再进行介绍。
单元格模板
通过GridViewColumn的CellTemplate属性，可以定义单元格的数据模板。
一般情况下，我们使用了DisplayMemberBinding属性，指定了要在列中显示的数据， 就不需要指定CellTemplate了。
在使用了DisplayMemberBinding属性的情况下，CellTemplate属性指定的设置会被忽略。
但是有时候我们需要创建一些复杂的显示，就需要使用到CellTemplate功能
例如：让单元格里的文本支持换行，如下所示
XAML
1 <GridViewColumn.CellTemplate>
2 <DataTemplate>
3 <TextBlock Text="{Binding LastName}" TextWrapping="Wrap"></TextBlock>
4 </DataTemplate>
5 </GridViewColumn.CellTemplate>
说明：
还可以通过GridViewColumn的CellTemplateSelector属性，为数据项应用不同的模板，关于模板选择器这里不做详细介绍，到后面介绍到模板功能时再详细说明。
自定义列标题
通过GridViewColumn.Header属性，可以设置列头，Header支持WPF的元素，所以我们可以添加多种内容显示。
如果想用绑定的内容显示在列头，可以使用GridViewColumn.HeaderTemplate属性。
如果想设置列头的模式，可以使用GridViewColumn.HeaderContainerStyle属性，通过样式，定义列头的显示效果。
还可以通过GridViewColumn.HeaderTemplateSelector或GridView.ColumnHeaderTemplateSelector属性，为不同的标题应用不同的模板。
创建自定义视图
在创建自定视图前我们需要先了解一些概念。
1、自定义视图类需要继承自ViewBase类，它是一个抽象类，它的作用是将两个样式捆绑在一起。
2、视图通过重写两个protected属性DefaultStyleKey和ItemContainerDefaultStyleKey来进行工作，这两个属性返System.Window.ResourceKey的特殊对象。
其中：DefaultStyleKey用于控制ListView控件的样式，ItemContainerDefaultStyleKey用于控制ListViewItem控件的样式。
3、视图类创建好后，通过DataTemplate控制每个列表元素的显示效果
说明：
创建自定义视图的前提是现有的控件无法满足需求，如果在能满足的情况下，推荐通过WPF自带控件实现。
下面我们创建一个类似Windows资源管理器的视图，运行效果如下
实现步骤如下
1、创建视图类 TileView
首先在Visual Studio中，新建自定义控件，将生成的代码删除，添加如下代码
1 public class TileView : ViewBase2 {3 public static readonly DependencyProperty ItemContainerStyleProperty = ItemsControl.ItemContainerStyleProperty.AddOwner(typeof(TileView));4 5 public Style ItemContainerStyle6 {7 get { return (Style)GetValue(ItemContainerStyleProperty); }8 set { SetValue(ItemContainerStyleProperty, value); }9 }
10
11 public static readonly DependencyProperty ItemTemplateProperty = ItemsControl.ItemTemplateProperty.AddOwner(typeof(TileView));
12
13 public DataTemplate ItemTemplate
14 {
15 get { return (DataTemplate)GetValue(ItemTemplateProperty); }
16 set { SetValue(ItemTemplateProperty, value); }
17 }
18
19 private Brush selectedBackground = Brushes.Transparent;
20
21 public Brush SelectedBackground
22 {
23 get => this.selectedBackground;
24 set => this.selectedBackground = value;
25 }
26
27 private Brush selectedBorderBrush = Brushes.Black;
28
29 public Brush SelectedBorderBrush
30 {
31 get => this.selectedBorderBrush;
32 set => this.selectedBorderBrush = value;
33 }
34
35 protected override object DefaultStyleKey
36 {
37 get
38 {
39 return new ComponentResourceKey(GetType(), "TileView"); //指定ListView样式
40 }
41 }
42
43 protected override object ItemContainerDefaultStyleKey
44 {
45 get
46 {
47 return new ComponentResourceKey(GetType(), "TileViewItem"); //指定ListViewItem样式
48 }
49 }
50 }
TileView类应用了两个样式：TileView(用于ListView)和TileViewItem(用于ListViewItem)，此外，还定义了ItemTemplate、ItemContainerStyle和SelectedBackground属性，他们分别用于数据模板、元素样式和选择时背景颜色的设置。
关于ComponentResourceKey，它的作用是定义和引用从外部程序集加载的资源的键。 这使资源查找能够在程序集中指定目标类型，而不是在程序集中或类上指定显式资源字典。ComponentResourceKey封装了两部分信息：拥有样式的类的类型和标识资源描述性的ResourceId字符串。
2、为视图定义样式
创建自定义控件后，Visual Studio会生成一个Themes文件夹，并在文件夹下生成一个Generic.xaml文件，WPF使用Generic.xaml文件关联到某个类的默认样式。
我们在Generic.xaml里为ListView和ListViewItem定义样式
1 <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:TileView}, ResourceId=TileView}"2 TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}">3 <Setter Property="BorderBrush" Value="Black"></Setter>4 <Setter Property="BorderThickness" Value="0.5"></Setter>5 <Setter Property="Grid.IsSharedSizeScope" Value="True"></Setter>6 7 <Setter Property="ItemsPanel">8 <Setter.Value>9 <ItemsPanelTemplate>
10 <WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
11 RelativeSource={RelativeSource
12 AncestorType=ScrollContentPresenter}}"
13 ></WrapPanel>
14 </ItemsPanelTemplate>
15 </Setter.Value>
16 </Setter>
17 </Style>
18
19 <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:TileView},ResourceId=TileViewItem}"
20 TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
21 <Setter Property="Background" Value="Transparent"></Setter>
22 <Setter Property="Padding" Value="3"/>
23 <Setter Property="Margin" Value="2"/>
24 <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
25 <Setter Property="ContentTemplate" Value="{Binding Path=View.ItemTemplate,
26 RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"></Setter>
27
28 <Setter Property="Template">
29 <Setter.Value>
30 <ControlTemplate TargetType="{x:Type ListViewItem}">
31 <Border
32 Name="Border" BorderThickness="1" CornerRadius="3" Background="{TemplateBinding Background}">
33 <ContentPresenter />
34 </Border>
35 <ControlTemplate.Triggers>
36 <Trigger Property="IsSelected" Value="True">
37 <Setter TargetName="Border" Property="BorderBrush"
38 Value="{Binding Path=View.SelectedBorderBrush,
39 RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"></Setter>
40 <Setter TargetName="Border" Property="Background"
41 Value="{Binding Path=View.SelectedBackground,
42 RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"></Setter>
44 </Trigger>
45 <Trigger Property="IsMouseOver" Value="True">
46 <Setter Property="Background" Value="Orange" TargetName="Border"/>
47 </Trigger>
48 </ControlTemplate.Triggers>
49 </ControlTemplate>
50 </Setter.Value>
51 </Setter>
52
53 </Style>
在设置Key时，使用了ComponentResourceKey类型，然后设置TargetType为ListView/ListViewItem，通过BaseOn属性指示继承ListBox/ListBoxItem元素使用的基本样式。
在样式上：
1、将Grid.IsSharedSizeScope附加属性设置为true，当使用Grid为布局容器时，可以使不同的列表项使用共享的列或行。
2、将ItemsPanel属性从StackPanel面板改为WrapPanel面板，从而实现平铺行为。
3、为了确保最大灵活性，TileView样式需要检索TileView对象（ListView.View属性），然后从TileView.ItemTemplate属性中提取模板数据。就像下面这样
1 ItemHeight="{Binding (ListView.View).ItemHeight,
2 RelativeSource={RelativeSource AncestorType=ListView}}"
3、为ListView定义不同的视图
这里我们定义了三个视图，默认的GridView视图、图片显示视图和图片加详情视图。
1 <GridView x:Key="GridView">2 <GridView.Columns>3 <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=ModelName}"/>4 <GridViewColumn Header="Model" DisplayMemberBinding="{Binding Path=ModelNumber}"/>5 <GridViewColumn Header="Price" DisplayMemberBinding="{Binding Path=UnitCost,StringFormat={}{0:C}}"/>6 </GridView.Columns>7 </GridView>8 9 <local:TileView x:Key="ImageView" SelectedBackground="Orange">
10 <local:TileView.ItemTemplate>
11 <DataTemplate>
12 <StackPanel Width="150" VerticalAlignment="Top">
13 <Image Source="{Binding ProductImagePath}" Margin="6"></Image>
14 <TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding ModelName}"></TextBlock>
15 </StackPanel>
16 </DataTemplate>
17 </local:TileView.ItemTemplate>
18 </local:TileView>
19
20 <local:TileView x:Key="ImageDetailView">
21 <local:TileView.ItemTemplate>
22 <DataTemplate>
23 <Grid>
24 <Grid.ColumnDefinitions>
25 <ColumnDefinition Width="auto"/>
26 <ColumnDefinition Width="auto" SharedSizeGroup="Col2"/>
27 </Grid.ColumnDefinitions>
28
29 <Image Margin="5" Width="100" Source="{Binding Path=ProductImagePath}"></Image>
30 <StackPanel Grid.Column="1" VerticalAlignment="Center">
31 <TextBlock FontWeight="Bold" Text="{Binding Path=ModelName}"></TextBlock>
32 <TextBlock Text="{Binding Path=ModelNumber}"/>
33 <TextBlock Text="{Binding Path=UnitCost,StringFormat={}{0:C}}"></TextBlock>
34 </StackPanel>
35 </Grid>
36 </DataTemplate>
37 </local:TileView.ItemTemplate>
38 </local:TileView>
4、动态切换视图
我们在界面上增加一个ComboBox控件，在SelectionChanged事件处理函数中动态切换视图。
1 <ComboBox Name="combox" Width="120" SelectedIndex="0" SelectionChanged="ComboBox_SelectionChanged"> 2 <ComboBoxItem>GridView</ComboBoxItem> 3 <ComboBoxItem>ImageView</ComboBoxItem> 4 <ComboBoxItem>ImageDetailView</ComboBoxItem> 5 </ComboBox>
1 private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
2 {
3 var viewName = (this.combox.SelectedItem as ComboBoxItem)?.Content;
4 this.listview3.View = (ViewBase)this.FindResource(viewName?.ToString());
5 }
5、为视图传递信息
在定义TitlView视图类时，我们增加了一个依赖属性SelectedBackground，并在设置样式时进行了绑定
1 <Setter TargetName="Border" Property="Background"
2 Value="{Binding Path=View.SelectedBackground,
3 RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}"></Setter>
这样我们就可以动态设置这个属性。
如果我们需要传递其它信息，也可以通过这种方式。
完整的代码可以参考文末的示例代码链接。
DataGrid控件
DataGrid是用于数据显示的控件，从对象集合获取信息并在具有行和单元格的网络中显示信息。每行和单独的对象相对应 ，并且每列和对象的某个属性相对应 。
使用了样式的DataGrid控件
前面我们介绍过ItemsControl和Selector类，DataGrid类继承自MultiSelector，而MultiSelector继承自Selector类。
MultiSelector在Selector的基础上增加了SelectedItems属性以及SelectAll()函数和UnselectAll()函数。
常用属性
| 属性 | 说明 |
| RowBackground | 用于指定绘制每行背景的画刷 |
| AlternatingRowBackground | 绘制交替行的背景画刷，从而更容易区分行。 默认情况下，奇数行：白色 偶数行：淡灰色 |
| AutoGenerateColumns | 是否自动创建列，默认值是true |
| ColumnHeaderHeight | 标题行的高度 |
| RowHeaderWidth | 具有行头的列的宽度。该列在网格的最左边，不显示任何数据，它能标识当前选择的行/正在编辑的行。 |
| ColumnWidth | 获取或设置DataGrid中列和标头的标准宽度和大小调整模式。 |
| RowHeight | 每行的高度 |
| GridLineVisiblity | 是否显示网格线，可选Horizontal、Vertical、None或All等值 |
| VerticalGridLinesBrush | 用于绘制列之间网格线的画刷 |
| HorizontalGridLinesBrush | 用于绘制行之间网格线的画刷 |
| HeadersVisibility | 确定显示哪种表头，可选Column、Row、All和None |
快速填充数据
DataGrid具备自动生成功能，可以直接将数据源绑定到DataGrid
假设我们定义了一个Student类，并产生一些测试数据
1 public class Student2 {3 public int ID { get; set; }4 5 public string Name { get; set; }6 7 public float Height { get; set; }8 9 public float Weight { get; set; }
10
11 public DateTime Birthdate { get; set; }
12
13 public static List<Student> GetDemoData()
14 {
15 return new List<Student>()
16 {
17 new Student(){ID = 1,Name = "极大规模集成电路",Weight = 61,Height = 170,Birthdate = new DateTime(1990,01,01) },
18 new Student(){ID = 2,Name = "哪里有",Weight = 62,Height = 171,Birthdate = new DateTime(1991,01,01) },
19 new Student(){ID = 3,Name = "枯井",Weight = 63,Height = 172,Birthdate = new DateTime(1992,01,01) },
20 new Student(){ID = 4,Name = "粗浅",Weight = 64,Height = 173,Birthdate = new DateTime(1993,01,01) },
21 };
22 }
23 }
然后在界面上放置一个DataGrid
1 <DataGrid x:Name="grid1" AutoGenerateColumns="True"> 2 3 </DataGrid>
再将测试数据绑定到DataGrid
1 this.grid1.ItemsSource = Student.GetDemoData();
运行结果如下
可以看到DataGrid自动生成了列标题及自动填充了数据。
绑定到数据库
DataGrid的自动生成功能在展示数据库的数据时非常有用，可以直接将DataTable.DefaultView绑定到DataGrid.ItemSource上，而且还可以在编辑数据后将数据更新回数据库。
这里为了方便展示 ，以SQLite数据库为例，假设我们创建了如下的表
增加如下数据
然后查询数据并绑定到DataGrid
1 private DataTable GetDataFromDB()2 {3 var sql = "Select * from patient";4 var constr = $"data source = {Environment.CurrentDirectory + "\\patient.db"};version=3";5 using(SQLiteConnection con = new SQLiteConnection(constr))6 {7 con.Open();8 9 if (con.State != ConnectionState.Open)
10 return new DataTable();
11
12 using (SQLiteDataAdapter sQLiteDataAdapter = new SQLiteDataAdapter(sql, con))
13 {
14 DataTable dt = new DataTable();
15 sQLiteDataAdapter.Fill(dt);
16 return dt;
17 }
18 }
19 }
运行效果
将数据更新回数据库
在对DataGrid的数据进行编辑后，可以将数据再保存为数据库，可以通过下面的方法
首先我们将界面上DataGrid的数据取出来
1 private DataTable GetDataTableFromDataGrid(DataGrid dataGrid)
2 {
3 return ((DataView)dataGrid.ItemsSource).Table;
4 }
在界面上将数据编辑一下
更新回数据库
1 private void UpdateToDb(DataTable dt)2 {3 var constr = $"data source = {Environment.CurrentDirectory + "\\patient.db"};version=3";4 using (SQLiteConnection con = new SQLiteConnection(constr))5 {6 con.Open();7 if (con.State != ConnectionState.Open)8 return;9
10 var sql = "Select * from patient";
11 SQLiteDataAdapter da = new SQLiteDataAdapter();
12 da.SelectCommand = new SQLiteCommand(sql, con);
13 SQLiteCommandBuilder builder = new SQLiteCommandBuilder(da);
14 da.Update(dt);
15 }
16
17 }
保存后到数据库查看，发现数据已经更新成功了
定义列
在前面介绍ListView控件时，默认的视图是GridView，GridView在使用时，需要定义列。DataGrid也是类似的模式，在使用时，可以使用自动生成的列，也可以自己定义列。
自动生成的列相比自定义列，缺少一些控制功能：不能控制列的顺序、不能控制列宽、不能控制表头文本等。
在使用自定义列时，需要将AutoGenerateColumns属性设置为false，然后将列添加到DataGrid.Columns集合中去。
添加到DataGrid.Columns中的对象必须是DataGridColumn类型（DataGridColumn是一个抽象类，表示 DataGrid的数据列）。
DataGridColumn类有几个通用的属性
Header属性：用于获取或设置列题头，通常情况下，都是设置为普通字符串。但列题头是内容控件，可以为Header提供任何内容。
Width属性：设置获取或设置列宽，如果设置了DataGrid.ColumnWidth属性，那么值会被DataGridColumn.Width值覆盖，因为DataGrid.ColumnWidth属性是应用于整个表格的所有列，而DataGridColumn.Width只应用于当前列。
Binding属性：为当前列的数据提供绑定表达式。
DataGrid支持以下几种类型的列，这些类型都是继承自DataGridColumn类。
1、DataGridTextColumn
文本列，文本显示在TextBlock控件中，当编辑行时，TextBlock被替换为TextBox。
使用示例：
1 <DataGrid Name="grid3">
2 <DataGrid.Columns>
3 <DataGridTextColumn Header="用户名" Binding="{Binding UserName}" Width="100"></DataGridTextColumn>
4 </DataGrid.Columns>
5 </DataGrid>
2、DataGridCheckBoxColumn
复选框列，一般当值为Boolean类型时，使用这种列。默认情况下，CheckBox是只读的，在编辑行时，会变成普通的CheckBox。
DataGridCheckBoxColumn提供了IsThreeState属性，使用方法和CheckBox一致。
使用示例
1 <DataGrid Name="grid3">
2 <DataGrid.Columns>
3 <DataGridCheckBoxColumn Header="是否启用" Binding="{Binding IsEnable}" Width="60" IsThreeState="False"></DataGridCheckBoxColumn>
4 </DataGrid.Columns>
5 </DataGrid>
3、DataGridHyperlinkColumn
超链接列，这种列显示为可单击的链接。可以导航到指定的URI。
使用示例
1 <DataGridHyperlinkColumn Binding="{Binding Site}" Header="用户站点" Width="60"></DataGridHyperlinkColumn>
4、DataGridComboxColumn
下拉框列，默认情况下显示为文本，类似DataGridTextColumn，但在编辑模式下，会显示为Combox控件。
通过SelectedItemBinding属性可以设置选中项的绑定，同时还要设置SelectedValuePath来指定值的路径。ItemSource可以设置ComboBox的下拉项。
注意：如果通过SelectedItemBinding来设置选中项时会存在一定的问题，因为对象引用问题，建议通过TextBinding属性来设置选中文本。
DataGridComboxColumn.ItemSource可以设置下拉项显示值的绑定，如果将一个对象集合绑定到DataGridComboxColumn.ItemSource时，需要DisplayMemberBinding属性来设置显示哪个值。
DataGridComboxColumn.ItemSource支持以下数据源。
-
静态资源。 有关详细信息，请参阅 StaticResource 标记扩展。
-
x：Static 代码实体。 有关详细信息，请参阅 x:Static Markup Extension。
-
类型的内联集合 ComboBoxItem 。
使用示例：
这里我直接在XAML中定义了ItemSource
1 <DataGridComboBoxColumn SelectedItemBinding="{Binding Gender}" Header="性别" Width="60">
2 <DataGridComboBoxColumn.ItemsSource>
3 <col:ArrayList>
4 <sys:String>Male</sys:String>
5 <sys:String>Female</sys:String>
6 </col:ArrayList>
7 </DataGridComboBoxColumn.ItemsSource>
8 </DataGridComboBoxColumn>
5、DataGridTemplateColumn
模板列，这种列允许为显示值定义数据模板，这也就意味着，WPF的控件都可以支持。
1 <DataGridTemplateColumn Header="用户头像" Width="150">
2 <DataGridTemplateColumn.CellTemplate>
3 <DataTemplate>
4 <Image Source="{Binding Avatar}" Stretch="UniformToFill" Height="150"></Image>
5 </DataTemplate>
6 </DataGridTemplateColumn.CellTemplate>
7 </DataGridTemplateColumn>
演示：使用上面的不同列创建一个DataGrid
1 <DataGrid Name="grid3">2 <DataGrid.Columns>3 <DataGridTextColumn Header="用户名" Binding="{Binding UserName}" Width="100"></DataGridTextColumn>4 <DataGridCheckBoxColumn Header="是否启用" Binding="{Binding IsEnable}" Width="60" IsThreeState="False"></DataGridCheckBoxColumn>5 <DataGridHyperlinkColumn Binding="{Binding Site}" Header="用户站点" Width="60"></DataGridHyperlinkColumn>6 <DataGridComboBoxColumn SelectedItemBinding="{Binding Gender}" Header="性别" Width="60">7 <DataGridComboBoxColumn.ItemsSource>8 <col:ArrayList>9 <sys:String>Male</sys:String>
10 <sys:String>Female</sys:String>
11 </col:ArrayList>
12 </DataGridComboBoxColumn.ItemsSource>
13 </DataGridComboBoxColumn>
14 <DataGridComboBoxColumn SelectedItemBinding="{Binding Project}" Header="负责的项目" Width="100" ItemsSource="{Binding ProjectList}" DisplayMemberPath="{Binding ProjectName}"></DataGridComboBoxColumn>
15 <DataGridTemplateColumn Header="用户头像" Width="150">
16 <DataGridTemplateColumn.CellTemplate>
17 <DataTemplate>
18 <Image Source="{Binding Avatar}" Stretch="UniformToFill" Height="150"></Image>
19 </DataTemplate>
20 </DataGridTemplateColumn.CellTemplate>
21 </DataGridTemplateColumn>
22 </DataGrid.Columns>
23 </DataGrid>
ComboBox
ComboBox是一个下拉列表控件，与ListBox控件类似，既可以显示地也可以隐式地创建ComboBoxItem对象的集合。
但是ComboBox一次只能选择一项。
如果需要在下拉框中进行输入，可以将ComboBox.IsEditable属性设置为true，
并且必须确保选项集合中存储的是普通的纯文本的ComboBoxItem对象，或是提供了有意义的ToString()表示的对象。
例如，如果将一个图像显示在ComboBox中，文本框显示的仅是这个类的命名。
当IsEditable属性设置为true时，还可以通过设置IsReadOnly属性，来控制一些状态，详细的组合情况如下：
| IsReadonly为true | IsReadonly为false | |
IsEditable 为 true | - 无法通过输入字符串来选择 中的 ComboBox 项。 - 无法输入与 中的 ComboBox项不对应的字符串。 - 可以在文本框中选择字符串的一 ComboBox 部分。 - 可以复制文本框中的 ComboBox 字符串，但不能将字符串粘贴到 ComboBox 文本框中。 | - 可以通过输入字符串来选择 中的 ComboBox 项。 - 可以输入与 中的 ComboBox项不对应的字符串。 - 可以在文本框中选择字符串的一 ComboBox 部分。 - 可以在文本框中复制或粘贴字符串 ComboBox 。 |
IsEditable 为 false | - 可以通过输入字符串来选择 ComboBox 项。 - 无法输入与 ComboBox项不对应的字符串。 - 无法选择 字符串的一 ComboBox部分。 - 无法在 ComboBox复制或粘贴字符串。 | |
注意：只有在IsEditable为true时，IsReadonly属性才有效。
TreeView控件
TrieeView控件是WPF中的树型控件，树型控件在很多地方都有用到，最常见的就是资源管理器的树形结构显示。
TreeView也是继承自ItemsControl控件，但是它与ListBox不同的是，它的项容器控件TreeViewItem不是内容控件。每个TreeViewItem控件都是单独的ItemsControl控件，可以包含更多的TreeViewItem对象。
TreeViewItem类继承自HeaderedItemsControl类，而HeaderedItemsControl类又继承自ItemsControl类。
HeaderedItemsControl类添加Header属性，该属性用于TreeView中每个项显示的内容（通常为文本）。
跟ListBox控件类似，TreeView依旧可以通过添加项到集合或绑定的形式创建。
XAML添加
1 <TreeView>2 <TreeViewItem Header="小湔">3 <TreeViewItem Header="1"/>4 <TreeViewItem Header="80"/>5 </TreeViewItem>6 <TreeViewItem Header="立海大">7 <TreeViewItem Header="2"/>8 <TreeViewItem Header="72"/>9 </TreeViewItem> 10 </TreeView>
代码添加
1 TreeViewItem item1 = new TreeViewItem();2 item1.Header = "小湔";3 4 TreeViewItem item1SubItem1 = new TreeViewItem();5 item1SubItem1.Header = "1";6 TreeViewItem item1SubItem2 = new TreeViewItem();7 item1SubItem2.Header = "80";8 9 //每一个TreeViewItem都是一个ItemsControl控件 10 item1.Items.Add(item1SubItem1); 11 item1.Items.Add(item1SubItem2); 12 13 TreeViewItem item2 = new TreeViewItem(); 14 item2.Header = "立海大"; 15 16 TreeViewItem item2SubItem1 = new TreeViewItem(); 17 item2SubItem1.Header = "2"; 18 TreeViewItem item2SubItem2 = new TreeViewItem(); 19 item2SubItem2.Header = "80"; 20 21 item2.Items.Add(item2SubItem1); 22 item2.Items.Add(item2SubItem2); 23 24 this.tree2.Items.Add(item1); 25 this.tree2.Items.Add(item2);
运行效果如下
使用绑定
TreeView的绑定和ListBox的绑定稍有不同，因为TreeView要控制树的结构，所以需要使用到数据模板功能，这里暂时不做详细介绍，只需要知道数据绑定的存在即可，后面会单独介绍。
XAML
1 <TreeView Name="tree3" Grid.Column="2">2 <TreeView.ItemTemplate>3 <HierarchicalDataTemplate ItemsSource="{Binding SubItems}" DataType="{x:Type local:Student}">4 <Label Content="{Binding Name}"/>5 <HierarchicalDataTemplate.ItemTemplate>6 <DataTemplate DataType="{x:Type local:SubItem}">7 <Label Content="{Binding Id}"></Label>8 </DataTemplate>9 </HierarchicalDataTemplate.ItemTemplate>
10
11 </HierarchicalDataTemplate>
12 </TreeView.ItemTemplate>
13 </TreeView>
Student.cs
1 public class Student2 {3 public string Name { get; set; }4 5 public List<SubItem> SubItems { get; set; }6 }7 8 public class SubItem9 {
10 public string Id { get; set; }
11 }
构建数据列表并绑定
1 var list = new List<Student>();2 3 Student student1 = new Student();4 student1.Name = "小湔";5 student1.SubItems = new List<SubItem>() { new SubItem() { Id = "1"} };6 7 Student student2 = new Student();8 student2.Name = "立海大";9 student2.SubItems = new List<SubItem>() { new SubItem() { Id = "2" } };
10
11 list.Add(student1);
12 list.Add(student2);
13
14 this.tree3.ItemsSource = list;
说明：
如果需要绑定后动态更新集合数据，推荐使用ObservableCollection<T>类，并且实体类实现INotifyPropertyChanged接口，在属性值修改时进行通知。
运行效果如下：
常用属性
| 属性 | 说明 |
| SelectedItem | 获取 TreeView 中的选定项。 |
| SelectedValue | 获取由 SelectedValuePath 的 SelectedItem 指定的属性的值。 |
| SelectedValuePath | 获取或设置用于获取 SelectedValue 中 SelectedItem 的 TreeView 的路径。 |
常用事件
| 事件 | 说明 |
| SelectedItemChanged | 当 SelectedItem 更改时发生。 |
TreeViewItem常用属性
| IsSelected | 获取或设置 TreeViewItem 控件是否处于选定状态。 |
| IsExpanded | 获取或设置 TreeViewItem 中的嵌套项是处于展开状态还是折叠状态。 |
TreeViewItem常用事件
| Expanede | 当 IsExpanded 属性从 |
| Collapsed | 当 IsExpanded 属性从 |
| Selected | 当 IsSelected 的 TreeViewItem 属性从 |
| Unselected | 当 IsSelected 的 TreeViewItem 属性从 true 更改为 false 时发生。 |
手动展开树节点
通过TreeViewItem的IsExpanded属性，可以手动控制节点展开(true)/关闭(false)
实时创建节点
在日常使用时，因为TreeView控件是能够折叠的，所以可以省略不显示的信息，以便能降低开销以及填充树所需的时间。例如：要显示文件树时，只显示根目标，当点击展开时，再加载子目录。
当展开每个TreeViewItem对象时，会引发Expanded事件，此时我们可以填充节点。
当关闭每个TreeViewItem对象时，会引发Collapsed事件，此时我们可以丢弃节点或保留节点。
下面的示例代码展示了在树节点展开时，加载根目录
1 private void tree_Expanded(object sender, RoutedEventArgs e)2 {3 var diskPath = (e.OriginalSource as TreeViewItem).Header as DiskPath;4 5 if (diskPath == null)6 return;7 8 foreach (var subDiskPath in diskPath.Children)9 {
10 if (subDiskPath.Children == null)
11 {
12 subDiskPath.Children = new System.Collections.ObjectModel.ObservableCollection<DiskPath>();
13 Kernel32.EnumerateSubDirectory(subDiskPath.Path, subDiskPath.Children, isEnumOnce: true);
14 }
15 }
16 }
显示性能
显示大量项可能会导致性能问题，可以参考以下链接提高TreeView的性能
如何：提高 TreeView 的性能 - WPF .NET Framework | Microsoft Learn
示例代码
github
参考资料：
TextBoxBase 类 (System.Windows.Controls.Primitives) | Microsoft Learn
ListView 类 (System.Windows.Controls) | Microsoft Learn
如何：为 ListView 创建自定义视图模式 - WPF .NET Framework | Microsoft Learn