WPF---常用控件、属性、事件、详细介绍
WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交互用户图形界面。
本篇就为大家分享一下WPF中常用的控件和属性以及事件的详细介绍,非常适合初学者,和复习者。
本篇包含WPF四十七个控件以及属性和事件的介绍,包含控件的数据绑定,自定义,数据模版,控件模版等知识点。
目录
[1. label文本](#1. label文本)
[2. button按钮](#2. button按钮)
[3. textbox输入文本](#3. textbox输入文本)
[4. border 元素四周绘制边框和/或背景。](#4. border 元素四周绘制边框和/或背景。)
[5. ToolBarTray 任务栏](#5. ToolBarTray 任务栏)
[6. Toolbar 工具栏](#6. Toolbar 工具栏)
[7. image 显示图片](#7. image 显示图片)
[Source 显示图片的路径](#Source 显示图片的路径)
[8. Frame 用于承载页面](#8. Frame 用于承载页面)
[9. checkbox 复选框](#9. checkbox 复选框)
[10. RadioButton 单选框](#10. RadioButton 单选框)
[11. Calendar日历](#11. Calendar日历)
[12. DatePicker 选择日期框](#12. DatePicker 选择日期框)
[13. combobox 下拉框](#13. combobox 下拉框)
[14. ComboBoxItem 设置下拉框内容的标签](#14. ComboBoxItem 设置下拉框内容的标签)
[15. StackPanel 将子元素排列成水平或垂直的一行](#15. StackPanel 将子元素排列成水平或垂直的一行)
[16. TabControl 选项卡](#16. TabControl 选项卡)
[17. TabItme 设置选项卡内容的标签](#17. TabItme 设置选项卡内容的标签)
[18. Grid 网格区域](#18. Grid 网格区域)
[19. Grid.ColumnDefinitions 网格布局 列](#19. Grid.ColumnDefinitions 网格布局 列)
[20. Grid.RowDefinitions 网格布局 行](#20. Grid.RowDefinitions 网格布局 行)
[21. ColumnDefinition 设置网格布局 列 的区域](#21. ColumnDefinition 设置网格布局 列 的区域)
[22. RowDefinition 设置网格布局 行 的区域](#22. RowDefinition 设置网格布局 行 的区域)
[23. WrapPanel 换行panel](#23. WrapPanel 换行panel)
[24. textBlock 显示文本 标签内容和Text属性共存的](#24. textBlock 显示文本 标签内容和Text属性共存的)
[25. lineBreak 换行标签](#25. lineBreak 换行标签)
[26. ListBox 选项列表](#26. ListBox 选项列表)
[27. ListBoxItem 给选项列表添加静态选项的标签](#27. ListBoxItem 给选项列表添加静态选项的标签)
[28. GroupBox分组盒子(表示一个控件,该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。)](#28. GroupBox分组盒子(表示一个控件,该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。))
[29. ScrollViewer 滚动条标签](#29. ScrollViewer 滚动条标签)
[30 ToolTip 当鼠标移入输入框显示提示信息(该标签只能当做子标签或属性使用)](#30 ToolTip 当鼠标移入输入框显示提示信息(该标签只能当做子标签或属性使用))
[31. RichTextBox 富文本: 编辑小型文档和文本段落的控件](#31. RichTextBox 富文本: 编辑小型文档和文本段落的控件)
[32. Run 包含一连串格式化或非格式化文本的内联级别流内容元素](#32. Run 包含一连串格式化或非格式化文本的内联级别流内容元素)
[33. DataGrid 数据网格(表格)](#33. DataGrid 数据网格(表格))
[34. Expander折叠栏](#34. Expander折叠栏)
[35. Menu 菜单标签](#35. Menu 菜单标签)
[36. MenuItem 设置菜单标签的标题](#36. MenuItem 设置菜单标签的标题)
[37. Hyperlink 超链接](#37. Hyperlink 超链接)
[38. ContextMenu 右键菜单](#38. ContextMenu 右键菜单)
[39. Canvas 定义一个区域,可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。](#39. Canvas 定义一个区域,可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。)
[40. DockPanel 定义一个区域,从中可以按相对位置水平或垂直排列各个子元素。](#40. DockPanel 定义一个区域,从中可以按相对位置水平或垂直排列各个子元素。)
[41. ProgressBar 进度条](#41. ProgressBar 进度条)
[42. TreeView 竖向菜单](#42. TreeView 竖向菜单)
[43. Ellipse 绘制椭圆形](#43. Ellipse 绘制椭圆形)
[44. Path 制一系列相互连接的直线和曲](#44. Path 制一系列相互连接的直线和曲)
[45. Rectangle 矩形标签(一般用于动画)](#45. Rectangle 矩形标签(一般用于动画))
[46. UniformGrid 提供一种在网格(网格中的所有单元格都具有相同的大小)中排列内容的方法。](#46. UniformGrid 提供一种在网格(网格中的所有单元格都具有相同的大小)中排列内容的方法。)
[47. ListView 表示用于显示数据项列表的控件。](#47. ListView 表示用于显示数据项列表的控件。)
[WindowStartupLocation 获取或设置窗体首次显示的位置](#WindowStartupLocation 获取或设置窗体首次显示的位置)
[WindowStyle 获取或设置窗口的边框样式](#WindowStyle 获取或设置窗口的边框样式)
[name 组件名称](#name 组件名称)
[height 高度](#height 高度)
[Content 标签文本](#Content 标签文本)
[HorizontalAlignment 水平对齐](#HorizontalAlignment 水平对齐)
[VerticalAlignment 竖值对齐](#VerticalAlignment 竖值对齐)
[HorizontalContentAlignment 文本水平内容排列](#HorizontalContentAlignment 文本水平内容排列)
[VerticalContentAlignment 垂直内容排列](#VerticalContentAlignment 垂直内容排列)
[Padding 内边距](#Padding 内边距)
[Margin 外边距](#Margin 外边距)
[FontSize 字体大小](#FontSize 字体大小)
[FontStyle 字体样式](#FontStyle 字体样式)
[Foreground 字体颜色](#Foreground 字体颜色)
[Fontweight 字体粗细](#Fontweight 字体粗细)
[FontFamily 字体字形(比如楷体)](#FontFamily 字体字形(比如楷体))
[FontStretch 设置字体在屏幕上紧缩或加宽的程度](#FontStretch 设置字体在屏幕上紧缩或加宽的程度)
[Background 背景颜色](#Background 背景颜色)
[BorderThickness 边框大小](#BorderThickness 边框大小)
[BorderBrush 边框背景](#BorderBrush 边框背景)
[SelectionBrush 选定的文本的颜色](#SelectionBrush 选定的文本的颜色)
[CornerRadius 边框拐角的弧度](#CornerRadius 边框拐角的弧度)
[Source 显示路径](#Source 显示路径)
[DisplayDateStart 展示日期的起始时间-->](#DisplayDateStart 展示日期的起始时间-->)
[DisplayDateEnd 展示日期的结束时间-->](#DisplayDateEnd 展示日期的结束时间-->)
[IsEditable 文本是否编辑(值: ture/false)](#IsEditable 文本是否编辑(值: ture/false))
[IsReadOnly 是否为只读属性(值: ture/false)](#IsReadOnly 是否为只读属性(值: ture/false))
[Header 设置选项卡内容标题](#Header 设置选项卡内容标题)
[ShowGridLines 是否显示网格布局分割线(值: true/false)](#ShowGridLines 是否显示网格布局分割线(值: true/false))
[Grid.Row 设置标签在网格布局中的行数](#Grid.Row 设置标签在网格布局中的行数)
[Grid.Column 设置标签在网格布局中的列数](#Grid.Column 设置标签在网格布局中的列数)
[Orientation 设置排列标签的排列方式(StackPanel )](#Orientation 设置排列标签的排列方式(StackPanel ))
[ItemsSource 设置动态绑定数据](#ItemsSource 设置动态绑定数据)
[SelectionMode 设置listbox标签一次选中多少个数据](#SelectionMode 设置listbox标签一次选中多少个数据)
[Template 用于调用自定义模版的键](#Template 用于调用自定义模版的键)
[Header 设置标题](#Header 设置标题)
[Visibility 该标签是否显示](#Visibility 该标签是否显示)
[Opacity 设置标签的透明度](#Opacity 设置标签的透明度)
[Panel.ZIndex 设置组件的Z轴(标签在屏幕上的显示顺序)](#Panel.ZIndex 设置组件的Z轴(标签在屏幕上的显示顺序))
[value 用于获取进度条进度](#value 用于获取进度条进度)
[Maximum 进度条最大值](#Maximum 进度条最大值)
[Minimum 进度条最小值](#Minimum 进度条最小值)
[一. 生命周期事件](#一. 生命周期事件)
[二. 常用的键盘事件](#二. 常用的键盘事件)
[三. 常用的鼠标事件](#三. 常用的鼠标事件)
[五. 多点触控事件](#五. 多点触控事件)
WPF常用控件
单标签和双标签
-
<!--<Button/> 单标签-->
-
<!--<Button></Button> 双标签-->
1. label文本
2. button按钮
3. textbox输入文本
##### 常用事件
* TextChanged 输入框发生变化时触发的事件
4. border 元素四周绘制边框和/或背景。
-
border不能有多个子元素
##### 常用属性
* CornerRadius 设置边框弧度
5. ToolBarTray 任务栏
##### 常用属性
* Orientation 修改工具栏排列方向 默认为水平排列
6. Toolbar 工具栏
##### 常用属性
* Band 控制工具栏不再是同一行/列 如果band值相等 多个toolbar会在同一行/列
* BandIndex 索引 当控制栏在同一行时 可以用BandIndex来决定谁在前面
7. image 显示图片
##### Source 显示图片的路径
*
*
```cs
img.Source = new BitmapImage(new Uri(@"C:\Users\86152\Desktop\WPF\WPF练习\05 轮播图\img\" + Items[--County] +".jpg"));
```
* 小提示: 如果使用绝对路径的话需要修改图片属性 将属性复制到输出目录属性改为 始终复制 将生成操作属性改为 内容
8. Frame 用于承载页面
##### 常用属性
-
NavigationUIVisibility ="Visible"属性 显示出一个自动记录前进后退导航
Source 页面路径(下列是参数)-
Source在frame控件中用于接收网络页面路径和窗体页面
-
接收网络页面 Source="https://ilive.lenovo.com.cn/?f=stee"
-
接收窗体页面 Source="../Pages/MyPage.xaml"
-
C#实现 :
```cs // 参数1: 路径 参数2: 网址的类型(相对路径/绝对路径) this.f1.Source = new Uri("https://www.7/68145989.html",UriKind.Absolute); ```
-
##### 常用事件
* LoadCompleted 页面加载完毕后触发的事件
-
Frame窗体跳转
-
// 1 第一种使用frame的source属性进行跳转 // new uri("网址",网址的类型包含绝对路径和相对路基)
-
this.f1.Source = new Uri("https://www.7kzww7.com/20/20716/68145989.html",UriKind.Absolute);
-
// 2 第二种跳转方式使用Navigate进行跳转
-
this.f1.Navigate(new Uri("https://c.biancheng.net/csharp/"));
-
// 3 使用Navigate跳转到自己的页面
-
Pages/MyPage.xaml MyPage p = new MyPage(); // 创建页面对象 this.f1.Navigate(p);
-
// 4 第三种跳转方式 使用Navigate跳转页面并且传参
csMyPage p1 = new MyPage(); this.f1.Navigate(p1,"张三"); // 参数1 跳转的页面对象 | 参数2 传递参数 // 参数可以在页面的加载完毕的事情中取出参数 在上面f1_LoadCompleted函数中取出张三的值 // 使用LoadCompleted事件取出参数 : // 网页加载完成之后触发 private void f1_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e) { // e.ExtraData;取出页面的参数,列如张三 object obj = e.ExtraData; if (obj != null) { MessageBox.Show("网页加载完毕: " +obj); } }
-
// 4 第三种跳转方式 使用Navigate跳转页面并且使用构造函数传参
```cs // (1) 先在page页面cs文件中创建构造函数 public partial class Page1 : Page { public Page1() { InitializeComponent(); } // this 调用上面的Pagel方法 public Page1(string s): this() { l1.Content = s; } } // (2) 然后在窗体cs文件中进行页面跳转 Page1 p1 = new Page1("牛牛"); // 当创建对象时利用构造函数进行传参 this.fra.Navigate(p1); ```
-
9. checkbox 复选框
##### 常用属性
* content 标题
* 获取选中状态 check.IsChecked
##### 常用事件
* Unchecked 复选框为false时调用
* Checked 复选框为true时调用
* click 点击事件
10. RadioButton 单选框
##### 常用属性
* 获取选中状态 check.IsChecked
##### 常用事件
* Unchecked 复选框为false时调用
* Checked 复选框为true时调用
* click 点击事件
##### 可以通过groupName设置相同值进行分组
*
```cs
<RadioButton GroupName="sex" Content="男" />
<RadioButton GroupName="sex" Content="女" />
```
##### 可以将多个单选框添加到一个父标签下
*
```cs
<Grid Name="g2">
<RadioButton Content="男" />
<RadioButton Content="女" />
</Grid>
```
11. Calendar日历
##### 常用属性
* SelectionMode:选中日历类型(下列是属性)
*
> SingleDate 只能选一个日期 SingleRange 单个范围 MultipleRange 多个范围
* DisplayDate:展示的日期
* SelectedDate:选着的日期
* DisplayDateStart 展示的起始时间
* DisplayDateEnd 展示的结束时间
##### 常用事件
* SelectedDatesChanged 选择日历后触发
##### 获取选择的日期
* // 使用空间name属性调用SelectedDate
*
```cs
MessageBox.Show(c1.SelectedDate.ToString());
```
* // 2 通过findName方法查询元素
*
```cs
Calendar c = (Calendar)this.FindName("c1"); // 查询name属性为c1的组件
MessageBox.Show(c.SelectedDate.ToString());
```
12. DatePicker 选择日期框
##### 常用属性
* DisplayDate:展示的日期--\>
* SelectedDate:选着的日期--\>
* DisplayDateStart 展示的起始时间--\>
* DisplayDateEnd 展示的结束时间--\>
13. combobox 下拉框
##### 常用属性
* IsEditable 文本是否编辑(值: ture/false)
* (当iseditable等于true时下拉框为白色)
* IsReadOnly 是否为只读属性(值: ture/false)
* Text默认值
##### 常用事件
* SelectionChanged 下拉框选项发生改变时触发
##### 自定义子选项
* 自定义子选项(固态数据)
*
```cs
<ComboBox Width="100" Height="50">
<ComboBoxItem>
<StackPanel Orientation="Horizontal">
<Button>1111</Button>
<Label>222</Label>
</StackPanel>
</ComboBoxItem>
</ComboBox>
```
* 自定义子选项(动态数据)
*
```cs
<ComboBox Width="100" Height="50" ItemsSource="{Binding list}">
<ComboBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding name}"></Button>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
```
##### C#添加数据操作
*
```cs
// 1 使用items属性进行添加
this.c1.Items.Add("贺钓帝");
this.c1.Items.Add("冰心");
this.c1.Items.Add("周树人");
// clear();清空属性
this.c1.Items.Clear();
// 2 使用datacontext进行绑定
// 班级模型类
public class StudentClass
{
public int StudentId { get; set; }
public string Name { get; set; }
}
List<StudentClass> values = new List<StudentClass>();
values.Add(new StudentClass()
{ StudentId = 1, Name = "软件1班",
});
// 需要再标签上添加数据绑定 ItemsSource="{Binding}
this.c1.ItemsSource = values; // 设置数据源
this.c1.DisplayMemberPath = "Name"; // 设置显示成员
this.c1.SelectedValuePath = "StudentId"; // 获取selectvalue值,获取的是selectedvaluePath的值
```
##### 获取选中的值
*
> // 获取selectvalue值,获取的是selectedvaluePath的值 c1.SelectedValue
14. ComboBoxItem 设置下拉框内容的标签
##### 实例
*
> \<ComboBoxItem\>饮食\</ComboBoxItem\>
15. StackPanel 将子元素排列成水平或垂直的一行
##### 常用属性
* Orientation 排列方式(下列属性)
* Horizontal水平排布
* Vertical 垂直排布
16. TabControl 选项卡
17. TabItme 设置选项卡内容的标签
##### 常用属性
* Hrader 设置标题
* content 设置文本
18. Grid 网格区域
19. Grid.ColumnDefinitions 网格布局 列
20. Grid.RowDefinitions 网格布局 行
21. ColumnDefinition 设置网格布局 列 的区域
##### 常用属性
* width 设置列的宽度 (将值设为\*是平分)
22. RowDefinition 设置网格布局 行 的区域
##### 常用属性
* height 设置列的高度 (将值设为\*是平分)
23. WrapPanel 换行panel
-
标签介绍: 当子元素的宽度或者高度超出了父元素,才进行换行。高度超出父元素的高度 也会另起一列
##### 常用属性
* Orientation 排列方式
* Horizontal水平排布
* Vertical 垂直排布
24. textBlock 显示文本 标签内容和Text属性共存的
##### 常用属性
* TextWrapping 获取或设置 TextBlock 应如何换行文本。
25. lineBreak 换行标签
26. ListBox 选项列表
##### 常用属性
* SelectionMode 设置一次选中多少个数据(下面是属性)
* Extended 只能选中一个、 Multiple 可以选中多个
##### 自定义子选项
* 自定义子选项(动态数据)
*
```cs
<ListBox Width="100" Height="50" ItemsSource="{Binding list}">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding name}"></Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
```
* 自定义子选项(固态数据)
*
```cs
<ListBox Width="100" Height="50">
<ListBoxItem> <Button Content="000"></Button> </ListBoxItem>
</ListBox>
```
##### listbox数据绑定
*
```cs
// 标签布局
<ListBox Name="lis" Height="100" Width="200" ItemsSource="{Binding}" VerticalAlignment="Bottom">
<!--自定义选项-->
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding}"></Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
// 编辑数据并且绑定
ObservableCollection<string> list = new ObservableCollection<string>() { "111","2222","22233"};
lis.ItemsSource = list;
```
27. ListBoxItem 给选项列表添加静态选项的标签
28. GroupBox分组盒子(表示一个控件,该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。)
##### 常用属性
* Header设置分组标题
29. ScrollViewer 滚动条标签
##### 常用属性
* VerticalScrollBarVisibility 设置列滚动条(下面是属性)
* Auto自动显示,当显示内容的宽与高超过所在容器的时候显示,没有则不显示
* Visible滚动条一直显示
* Hidden隐藏滚动条
* Disabled 禁止显示滚动条
* HorizontalScrollBarVisibility 设置行滚动条(下面是属性)
* Auto自动显示,当显示内容的宽与高超过所在容器的时候显示,没有则不显示
* Visible滚动条一直显示
* Hidden隐藏滚动条
* Disabled 禁止显示滚动条
30 ToolTip 当鼠标移入输入框显示提示信息(该标签只能当做子标签或属性使用)
##### 使用方法
* 方法1:
*
```cs
<TextBox Width="300" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top"> 当鼠标移入输入框显示提示信息 <TextBox.ToolTip> 23 </TextBox.ToolTip> </TextBox>
```
* \<!--方法2设置多个提示语--\>
*
```cs
<Button Width="100" Height="40" Margin="200,0,0,0">
点击
<Button.ToolTip>
<StackPanel>
<TextBlock>天王盖地虎</TextBlock>
<TextBlock>宝塔镇河妖</TextBlock>
</StackPanel>
</Button.ToolTip>
</Button>
```
* 方法3设置属性
*
```cs
<Label Content="12122" ToolTip="000000"></Label>
```
31. RichTextBox 富文本: 编辑小型文档和文本段落的控件
##### 富文本中的子控件
* \<!--FlowDocument 是wpf中流文档。用来承载大篇文章,是wpf3.0之后提出的心的基数, 在该标签下 可以使用
* paragraph代表一个段落
* section代表一个区域
* table代表一个表格.
* BlockUIContainer代表一个块元素。
* InlineUICntainer代表一个内联元素--\>
32. Run 包含一连串格式化或非格式化文本的内联级别流内容元素
##### 使用
*
```cs
<Run>y</Run> <InlineUIContainer> <Label>4</Label> </InlineUIContainer>
```
33. DataGrid 数据网格(表格)
##### 可以显示的数据
* 可以显示以下几种标签显示不同数据 :
* 显示文本: DataGridTextColumn
* 显示复选框: DataGridCheckboxColumn
* 下拉框: DataGridComboboxColumn
* 超链接: DataGridHyperlinkColumn--\>
##### 常用属性
* \<!--AutoGenerateColumns 是否自动生成列 设置为false不会自动生成列--\>
* \<!--AutoGenerateColumns 是否删除行--\>
* \<!--CanUserSortColums 是否允许列进行排序--\>
* \<!--GridLinesVisibility设置网格线--\> IsReadOnly 是否只读
##### 表格的用法
*
###### 自定义单元格
*
```cs
<!--自定义单元格的模版-->
<!--自定义列-->
<DataGridTemplateColumn>
<!--自定义列的标题-->
<DataGridTemplateColumn.Header>
<TextBlock>编号</TextBlock>
</DataGridTemplateColumn.Header>
<!--自定义单元格的模版-->
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding ClassId}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn>
```
*
###### 设置表头局部样式
*
```cs
<!--表头局部样式-->
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Background"
Value="Red"/>
</Style>
</DataGrid.ColumnHe
```
*
###### 设置单元格局部样式
*
```cs
<!--内容局部样式-->
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Background"
Value="Pink" />
</Style>
</DataGridTextColumn.Ele
```
*
###### 表头全局样式
*
```cs
<!--表头全局样式-->
<Style x:Key="sty" TargetType="DataGridColumnHeader">
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Background"
Value="Red" />
</Style>
// 在datagrid中调用样式的键key
<DataGrid FontSize="18"
FontFamily="宋体"
Name="data"
ColumnHeaderStyle="{StaticResource sty}">
```
*
###### 单元格全局样式
*
```cs
<!--内容全局样式-->
<Style x:Key="styl" TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Background"
Value="Pink"></Setter>
</Style>
// 在DataGridTextColumn中去调用样式键key
<DataGrid FontSize="18"
FontFamily="宋体"
Name="data">
<DataGrid.Columns>
<DataGridTextColumn Width="130"
Header="姓名"
ElementStyle="{StaticResource styl}">
</DataGridTextColumn>
</DataGrid.Column
```
*
###### 设置单元格为按钮
*
```cs
// 自定义表头
<DataGridTemplateColumn Width="130">
<DataGridTemplateColumn.Header>
<TextBlock>操作</TextBlock>
</DataGridTemplateColumn.Header>
// 自定义单元格
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
// 在单元格中设置按钮
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Button Width="40"
Height="22"
Content="编辑"
Margin="5"
Click="Button_Click_2"></Button>
<Button Width="40"
Height="22"
Content="删除"
Margin="5"
Click="Button_Click_1"></Button>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
```
*
###### 表格设计和表格数据绑定
* 设计表格
*
```cs
// 设计表格
<DataGrid FontSize="18" FontFamily="宋体"
Name="d1"
ItemsSource="{Binding}"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserSortColumns="False"
GridLinesVisibility="All">
<!--设置表头样式-->
<!--TargetType 给表头设置样式-->
<DataGrid.CellStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
</Style>
</DataGrid.CellStyle>
<!--设置列-->
<DataGrid.Columns>
<!--设置表头文本列,显示的数据可以通过bind进行绑定-->
<DataGridTextColumn Header="姓名" Width="150"
Binding="{Binding Name}">
<DataGridTextColumn.ElementStyle>
<!--行内单元格样式-->
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<!--下拉框列-->
<DataGridComboBoxColumn Header="班级"
x:Name="com"
SelectedValueBinding="{Binding ClassId}"></DataGridComboBoxColumn>
<!--自定义列-->
<DataGridTemplateColumn>
<!--自定义列的标题-->
<DataGridTemplateColumn.Header>
<TextBlock>编号</TextBlock>
</DataGridTemplateColumn.Header>
<!--自定义单元格的模版-->
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding ClassId}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplat
```
* 数据绑定
*
```cs
数据绑定
// 设计模型类
public class Student
{
public string Name { get; set; } // 学生姓名
public string ClassId { get; set; } // 班级编号
}
public class BanJi
{
public string ClassName { get; set; } // 班级名称
}
// 整理数据并添加
List<Student> list = new List<Student>();
list.Add(new Student(){Name = "迪迦",ClassId = "1000"});
list.Add(new Student(){Name = "赵丽颖",ClassId = "1002"});
list.Add(new Student(){Name = "普京",ClassId = "1003"});
// 整理第二个数据源
List<BanJi> list2 = new List<BanJi>();
list2.Add(new BanJi(){ClassName = "挖机一班"});
list2.Add(new BanJi(){ClassName = "上位机"});
list2.Add(new BanJi(){ClassName = "机械视觉"});
this.d1.ItemsSource = list;
this.com.ItemsSource = list2;
this.com.DisplayMemberPath = "ClassName";// 展示班级名称
this.com.Selecte
```
*
###### 添加表格数据
*
```cs
// 添加
students.Add(new Student()
{
Name = "鲁班" + 000,
Age = 000 + 19 + "",
Sex = "男",
Class = 989 + "班",
Ah = true
});
this.data.Items.Refresh();
```
*
###### 删除表格数据
*
```cs
students.RemoveAt(data.SelectedIndex);// 获取当前选中元素
data.Items.Refresh(); // 强制更新表格
```
34. Expander折叠栏
##### 常用属性
* IsEnabled 默认是打开或者折叠起来,true就是展开 false折叠
* ExpandDirection 展开的方向 down 向下展开,展开标签一般展开方向是上下,不设置高度一般展开方向是左右,不设置宽度
* VerticalAlignment= "top" HorizontalAlignment="Center" 展开宽随着内容进行自适应
##### 实例:
*
```cs
<Expander IsEnabled="True" ExpandDirection="Down" Width="200"
BorderThickness="2" BorderBrush="Green"
VerticalAlignment="Top" HorizontalAlignment="Center">
<!--设置标题-->
<Expander.Header>
我的好友
</Expander.Header>
<StackPanel Orientation="Vertical">
<CheckBox IsChecked="True" Margin="0,10">马云</CheckBox>
<CheckBox>马化腾</CheckBox>
<CheckBox>许家印</CheckBox>
</StackPanel>
```
35. Menu 菜单标签
##### 菜单操作
*
###### 自定义菜单
*
```cs
<!--自定义菜单项-->
<MenuItem>
<!--自定义菜单项模版标签-->
<MenuItem.Template>
<!--ControlTemplate 控件模版 TargetType作用到哪种类型标签上-->
<ControlTemplate TargetType="MenuItem">
<TextBlock Name="text"
Text="原子弹管理"
Padding="5">
</TextBlock>
</ControlTemplate>
</MenuItem.Template>
```
*
##### 设置图标
*
```cs
<!--FlowDirection 设置图表是从左往右还是从右往左-->
<MenuItem Header="请假管理"
FontFamily="华文彩魏"
FontSize="20"
FlowDirection="RightToLeft"
Height="40">
<!--设置图标-->
<MenuItem.Icon>
<Image Source="C:\Users\86152\Desktop\图片\wallhaven-jx16pm.jpg" />
</MenuItem.Icon>
<
```
*
##### 使用菜单
*
```cs
<Menu Height="40" VerticalAlignment="Top">
<MenuItem Header="出入管理"
FontFamily="华文彩魏"
FontSize="20"
Height="40">
</MenuItem>
<!--FlowDirection 设置图表是从左往右还是从右往左-->
<MenuItem Header="请假管理"
FontFamily="华文彩魏"
FontSize="20"
FlowDirection="RightToLeft"
Height="40">
<!--设置图标-->
<MenuItem.Icon>
<Image Source="C:\Users\86152\Desktop\图片\wallhaven-jx16pm.jpg" />
</MenuItem.Icon>
<!--二级菜单-->
<MenuItem Header="考勤打卡"
FontFamily="楷体"
FontSize="20"
FlowDirection="LeftToRight"
Height="40">
</MenuItem>
</MenuItem>
<!--自定义菜单项-->
<MenuItem>
<!--自定义菜单项模版标签-->
<MenuItem.Template>
<!--ControlTemplate 控件模版 TargetType作用到哪种类型标签上-->
<ControlTemplate TargetType="MenuItem">
<TextBlock Name="text"
Text="原子弹管理"
Padding="5">
</TextBlock>
</ControlTemplate>
</MenuI
```
##### 树形数据绑定
*
```cs
《--标签布局--》
<Menu VerticalAlignment="Top"
Height="40"
ItemsSource="{Binding}"
HorizontalContentAlignment="Center"
x:Name="Men">
<Menu.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type e:MEN}"
ItemsSource="{Binding MenList}">
<Label Content="{Binding Name}"
MouseDown="Label_MouseDown"></Label>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
</Menu>
《--设置模型类--》
public class MEN
{
public string Name { get; set; }
public List<MEN> MenList { get; set; }
public MEN(string n1, MEN? MenList1)
{
Name = n1;
if (MenList1 != null)
{
List<MEN> list = MenList1.MenList ?? new List<MEN>();
list.Add(this);
MenList1.MenList = list;
}
}
}
《--绑定数据--》
public MainWindow()
{
InitializeComponent();
List<MEN> NumList = new List<MEN>(); // 总数据
// 一级菜单
MEN m1 = new MEN("娱乐",null);
MEN m2 = new MEN("体育",null);
MEN m3 = new MEN("练习", null);
// 练习的二级菜单
MEN m31 = new MEN("练习21",m3);
MEN m32 = new MEN("练习22",m3);
// 练习22的三季菜单
MEN m321 = new MEN("练习321", m32);
// 绑定数据
NumList.Add(m1);
NumList.Add(m2);
NumList.Add
```
36. MenuItem 设置菜单标签的标题
##### 实例
* \<MenuItem Header="出入管理" FontFamily="华文彩魏" FontSize="20" Height="40"\> \</MenuItem\>
37. Hyperlink 超链接
##### 常用属性
* NavigateUri 连接路径
##### 使用实例
*
```cs
// 标签布局
<Hyperlink NavigateUri="https://ilive.lenovo.com.cn/?f=stee"
Click="Hyperlink_Click">
00000
</Hyperlink>
// 设置点击事件,在点击事件里设置跳转方式
private void Hyperlink_Click(object sender, RoutedEventArgs e)
{
Hyperlink hy = (Hyperlink)sender;
var psi = new ProcessStartInfo
{
// 设置跳转的方式以绝对的方式进行跳转
FileName = hy.NavigateUri.AbsoluteUri,
// 使用powershell终端进行跳转
UseShellExecute = true,
};
Process.Sta
```
38. ContextMenu 右键菜单
##### 实例
*
```cs
<!--右键菜单-->
<Label Content="右键弹出内容菜单"
FontSize="30">
<Label.ContextMenu>
<ContextMenu Name="c1">
<MenuItem Header="111">
</MenuItem>
</ContextMenu>
</Label.ContextMenu>
```
##### 树形属性模版
*
```cs
<!--右键菜单-->
// 设置标签布局
<Label Content="右键弹出内容菜单"
FontSize="30">
<Label.ContextMenu>
<ContextMenu Name="c1"
ItemsSource="{Binding}">
<ContextMenu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding SubMenus}">
<TextBlock Text="{Binding Name}"></TextBlock>
</HierarchicalDataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</Label.ContextMenu>
</Label>
<!--在cs文件中设置数据绑定
// 设置模型类
public class Menu
{
// 属性结构模型定义的方法
public List<Menu> SubMenus { get; set; } // 存储下层的数据的list对象
public string Name { get; set; } // 存储标题
// 使用构造函数给属性赋值
public Menu(string name,Menu?m1)
{
Name = name;
if (m1 !=null)
{
List<Menu> list = m1.SubMenus ?? new List<Menu>();
list.Add(this);
m1.SubMenus = list;
}
}
}
public Window右键菜单()
{
InitializeComponent();
List<Menu> list = new List<Menu>(); // 总类集合
// 一级菜单
Menu dudian = new Menu("断电", null);
// 二级菜单
Menu dudian2_1 = new Menu("插入断电", dudian);
Menu dudian2_2 = new Menu("插入跟踪断电", dudian);
// 只用添加一级菜单就可,二级菜单一级添加到一级菜单的集合中
list.Add(dudian);
// 将数据绑定到Context
```
39. Canvas 定义一个区域,可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。
##### 常用属性
* 定位元素 不要设置两个相对的距离,例如设置了Canvas。Right,就不要设置Canvas.Left
* Canvas.Right="0" 距离canvas右边的距离是0
* Canvas.left="0" 距离canvas左边的距离是0
* Canvas.top="0" 距离canvas上边的距离是0
* Canvas.Bottom="0" 距离canvas下边的距离是0
##### 实例
*
```cs
<Canvas Width="500" Height="300">
<StackPanel Width="100"
Height="100"
Background="Red"></StackPanel>
</Canvas>
```
40. DockPanel 定义一个区域,从中可以按相对位置水平或垂直排列各个子元素。
##### 常用属性
* LastChildFill 最后一个表情是否铺满剩余空间
##### 布局时常用的属性(用在子控件上的)
* DockPanel.Dock="Left" 用于控制标签排列到那个方向(top,bottom,left,right)
##### 实例:
*
```cs
<DockPanel Background="Red" LastChildFill="True">
<Button DockPanel.Dock="Left" Width="50" Background="Green">2222</Button>
<Button DockPanel.Dock="Left"
Width="50"
Background="Black"></Button>
<DockPanel DockPanel.Dock="Top"
Background="Pink"></DockPanel>
</Do
```
41. ProgressBar 进度条
##### 常用属性
* \<!--Value 进度条当前进度--\>
* \<!--Minimum 进度条最小值--\>
* \<!--Maximum 进度条最大值--\>
* \<!--Orientation 进度方向--\>
* \<!--Foreground 进度条颜色--\>
* \<!--Background 背景颜色--\>
42. TreeView 竖向菜单
##### 常用事件
* SelectedItemChanged 当选择子项发生改变的时候触发
##### 标签布局
*
```cs
<TreeView >
<!--静态数据绑定 TreeViewItem 子项-->
<TreeViewItem Header="实验小学">
<TreeViewItem Header="二年级">
<TreeViewItem Header="三班">
</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</T
```
##### 动态数据绑定树形数据模版
*
```cs
// 1. 设置标签布局
<TreeView ItemsSource="{Binding name}"
Name="t2">
<!--子项绑定是其中的一个对象的属性-->
<TreeView.ItemTemplate>
<!--树形数据模版-->
<HierarchicalDataTemplate ItemsSource="{Binding SubMenus}">
<!--绑定子集标题-->
<TextBlock Text="{Binding Name}"></TextBlock>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
// 2 创建模型类
public class MenuInfo
{
public string Name { get; set; }
public List<MenuInfo> SubMenus { get; set; }
public MenuInfo(string n,MenuInfo?m1)
{
Name = n;
if (m1 != null)
{
if (m1.SubMenus is null) m1.SubMenus = new List<MenuInfo>();
m1.SubMenus.Add(this);
}
}
public MenuInfo()
{
}
}
// 3 设置数据和绑定数据
// 设置数据
MenuInfo m1 = new MenuInfo()
{
// 一级标题
Name = "誓言小学",
// 存放子级标题对象
SubMenus = new List<MenuInfo>()
{
// 二级标题
new MenuInfo() {Name = "一年级",SubMenus = new List<MenuInfo>()
{
// 三级标题
new MenuInfo(){Name = "一班"}
} },
new MenuInfo() {Name = "二年级"},
new MenuInfo() {Name = "三年级"},
new MenuInfo() {Name = "四年级"},
new MenuInfo() {Name = "五年级"},
}
};
// 绑定数据
List<MenuInfo> list = new List<MenuInfo
```
43. Ellipse 绘制椭圆形
44. Path 制一系列相互连接的直线和曲
45. Rectangle 矩形标签(一般用于动画)
46. UniformGrid 提供一种在网格(网格中的所有单元格都具有相同的大小)中排列内容的方法。
##### 常用属性
* Rows 设置网格的行数
* Columns 设置网格的列数
47. ListView 表示用于显示数据项列表的控件。
WPF常用属性
WindowStartupLocation 获取或设置窗体首次显示的位置
WindowStyle 获取或设置窗口的边框样式
name 组件名称
height 高度
Content 标签文本
HorizontalAlignment 水平对齐
-
C#:
-
f1.HorizontalAlignment = HorizontalAlignment.Center
-
VerticalAlignment 竖值对齐
-
C#:
-
f1.VerticalAlignment = VerticalAlignment.Center;
-
HorizontalContentAlignment 文本水平内容排列
-
C#:
-
f1.HorizontalContentAlignment = HorizontalAlignment.Center;
-
VerticalContentAlignment 垂直内容排列
-
C#:
-
f1.VerticalContentAlignment = VerticalAlignment.Center;
-
Padding 内边距
-
2个参数顺序: 左、上 4参数顺序: 左上右下
Margin 外边距
-
2个参数顺序: 左、上 4参数顺序: 左上右下
-
C#
-
this.qiu.Margin = new Thickness(10,0,0,0);
-
FontSize 字体大小
FontStyle 字体样式
Foreground 字体颜色
-
C#
-
l.Foreground = Brushes.Pink;
-
Fontweight 字体粗细
FontFamily 字体字形(比如楷体)
FontStretch 设置字体在屏幕上紧缩或加宽的程度
Background 背景颜色
-
C#
-
this.nn.Background = Brushes.Red; // 设置三原色
l1.Background = new SolidColorBrush(Color.FromRgb(1,2, 2)); // 带透明度的四元色
l1.Background = new SolidColorBrush(Color.FromScRgb(1,2, 2,1));
-
-
C#判断背景颜色是否为红色
-
if (this.nn.Background == Brushes.Red ) { this.nn.Background = Brushes.Pink; }
-
BorderThickness 边框大小
-
C#
-
myBorder1.BorderThickness = new Thickness(5, 10, 15, 20);
-
BorderBrush 边框背景
-
C#
-
b.BorderBrush = Brushes.Red;
-
SelectionBrush 选定的文本的颜色
CornerRadius 边框拐角的弧度
-
当宽高是一样的时候 并且设置CornerRadius为一半的时候边框为圆
Source 显示路径
-
C#
-
img.Source = new BitmapImage(new Uri(@"C:\Users\05 轮播图\" + Items[--County] +".jpg"),UriKind.Absolute);
// 参数1 路径 , 参数2 路径方式 : (相对路径UriKind.Relative | 绝对路径UriKind.Absolute)
-
小提示: 如果使用绝对路径的话需要修改图片属性 将属性复制到输出目录属性改为 始终复制 将生成操作属性改为 内容
DisplayDate:展示的日期-->
SelectedDate:选着的日期-->
DisplayDateStart 展示日期的起始时间-->
DisplayDateEnd 展示日期的结束时间-->
IsEditable 文本是否编辑(值: ture/false)
-
当iseditable等于true时下拉框为白色
IsReadOnly 是否为只读属性(值: ture/false)
Header 设置选项卡内容标题
ShowGridLines 是否显示网格布局分割线(值: true/false)
Grid.Row 设置标签在网格布局中的行数
-
C#
-
// 参数1是标签,参数2是行数
Grid.SetRow(l1, y);
Grid.Column 设置标签在网格布局中的列数
-
C# //
-
参数1是标签,参数2是列数
Grid.SetColumn(l1, x);
Orientation 设置排列标签的排列方式(StackPanel )
ItemsSource 设置动态绑定数据
-
演示
-
ItemsSource="{Binding}"
-
SelectionMode 设置listbox标签一次选中多少个数据
-
Extended 只能选中一个、 Multiple 可以选中多个
Template 用于调用自定义模版的键
-
演示
-
Template="{StaticResource c1}"
-
Header 设置标题
Visibility 该标签是否显示
-
C#
-
this.ss.Visibility = Visibility.Visible;
Opacity 设置标签的透明度
-
默认不透明度为 1.0。 值应介于 0.0 和 1.0 之间。
Panel.ZIndex 设置组件的Z轴(标签在屏幕上的显示顺序)
value 用于获取进度条进度
Maximum 进度条最大值
Minimum 进度条最小值
WPF常用事件
事件类型
-
事件类型 : 生命周期事件:元素初始化,加载或卸载时发生的事件 鼠标事件:操作使用鼠标动作触发的事件。 键盘事件:操作使用键盘触发的事件。 手写笔事件:使用触控笔出发事件。 多点触控事件:类似触控屏多位置点击事件。
一. 生命周期事件
-
Load:整个窗口加载完成时触发的事件
-
Activated:当用户切换到该窗口时发生的事件,值得注意的是窗体第一次加载时也会触发该事件。
-
Deactivated:当用户从该窗口切换到其他窗口时发生事件。值得注意的是窗体关闭时也会触发该事件。该事件在Closing事件之后发生,但是在Closed事件之前发生。
-
Closing:窗体关闭时发生,无论是用户关闭还是调用Window.Close()方法或者Application.Shutdown()方法关闭窗体都会触发
-
Close:窗体关闭后事件,注意此时仍然可以访问元素对象。可以做一些清理工作或者注册表写东西。
-
LoadCompleted 网页加载完成之后触发
-
ContentRendered 当窗体的内容完成渲染后触发。
二. 常用的键盘事件
-
KeyDown:按下一个键时发生
-
KeyUp:按键释放时发生
-
TextInput:按键完成并且元素接收输入文本时发生,对于不会产生文本输入的按键(如:Ctrl,Shift等)不会发生
-
常用的获取键盘状态的方法
-
IsKeyDown():判断是否按下了指定按键
-
IsKeyUp():是否释放了指定按键
-
IsKeyToggled():指定按键是否处于打开状态,如:Caps Lock等
-
三. 常用的鼠标事件
-
MouseLeftButtonDown:鼠标左单击按下事件
-
MouseLeftButtonUp:鼠标左单击释放事件
-
MouseRightButtonDown:鼠标右单击按下事件
-
MouseRightButtonUp:鼠标右单击释放事件
-
MouseEnter 鼠标移入
-
MouseEnter 鼠标移开
五. 多点触控事件
-
PreviewTouchDown 当用户触摸元素时发生
-
TouchDown 当用户触摸元素时发生
-
PreviewTouchMove 当用户移动放到触摸屏上的手指时发生
-
TouchMove 当用户移动放到触摸屏上的手指时发生
-
PreviewTouchUp 当用户移开手指,结束触摸时发生
-
TouchUp 当用户移开手指,结束触摸时发生
-
TouchEnter 当触点从元素外进入元素内时发生
-
TouchLeave 当触点离开元素时发生
其他
-
click 点击事件
-
Unchecked 复选框为false时调用
-
Checked 复选框为true时调用
-
TextChanged 输入框发生变化时触发的事件
-
SelectionChanged 下拉框选项发生改变时触发
-
ScrollChanged 当ScrollViewer标签滚动视图发生变化时触发
本篇文章到此结束,转载请附上原创网址,谢谢!!!