WPF—常用控件、属性、事件、详细介绍-EW帮帮网

WPF—常用控件、属性、事件、详细介绍

WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。

本篇就为大家分享一下WPF中常用的控件和属性以及事件的详细介绍，非常适合初学者，和复习者。

本篇包含WPF四十七个控件以及属性和事件的介绍，包含控件的数据绑定，自定义，数据模版，控件模版等知识点。

WPF常用控件

单标签和双标签
- 
-

1. label文本

2. button按钮

3. textbox输入文本
- 常用事件
  - TextChanged 输入框发生变化时触发的事件

4. border 元素四周绘制边框和/或背景。
- border不能有多个子元素
- 常用属性
  - CornerRadius 设置边框弧度

5. ToolBarTray 任务栏
- 常用属性
  - Orientation 修改工具栏排列方向默认为水平排列

6. Toolbar 工具栏
- 常用属性
  - Band 控制工具栏不再是同一行/列如果band值相等多个toolbar会在同一行/列
  - BandIndex 索引当控制栏在同一行时可以用BandIndex来决定谁在前面

7. image 显示图片
- Source 显示图片的路径
  - - ```
    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#实现 :
    - ```
    // 参数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跳转页面并且传参

MyPage 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跳转页面并且使用构造函数传参

// (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设置相同值进行分组
  - ```
  <RadioButton GroupName="sex" Content="男" /> 
  <RadioButton GroupName="sex" Content="女" />
```
- 可以将多个单选框添加到一个父标签下
  - ```
  <Grid Name="g2"> 
      <RadioButton Content="男" /> 
      <RadioButton Content="女" /> 
  </Grid>
```
11. Calendar日历
- 常用属性
  - SelectionMode：选中日历类型(下列是属性)
    - SingleDate 只能选一个日期 SingleRange 单个范围 MultipleRange 多个范围
  - DisplayDate：展示的日期
  - SelectedDate：选着的日期
  - DisplayDateStart 展示的起始时间
  - DisplayDateEnd 展示的结束时间
- 常用事件
  - SelectedDatesChanged 选择日历后触发
- 获取选择的日期
  - // 使用空间name属性调用SelectedDate
  - ```
  MessageBox.Show(c1.SelectedDate.ToString());
```
- // 2 通过findName方法查询元素
- ```
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 下拉框选项发生改变时触发

自定义子选项

自定义子选项(固态数据)

<ComboBox Width="100" Height="50"> 
    <ComboBoxItem>
         <StackPanel Orientation="Horizontal"> 
            <Button>1111</Button> 
            <Label>222</Label> 
         </StackPanel> 
    </ComboBoxItem> 
</ComboBox>

自定义子选项(动态数据)

<ComboBox Width="100" Height="50" ItemsSource="{Binding list}"> 
    <ComboBox.ItemTemplate> 
        <DataTemplate> 
            <Button Content="{Binding name}"></Button> 
        </DataTemplate> 
    </ComboBox.ItemTemplate> 
</ComboBox>

C#添加数据操作

// 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 可以选中多个

自定义子选项

自定义子选项(动态数据)

<ListBox Width="100" Height="50" ItemsSource="{Binding list}"> 
    <ListBox.ItemTemplate> 
        <DataTemplate> 
            <Button Content="{Binding name}"></Button> 
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>

自定义子选项(固态数据)

<ListBox Width="100" Height="50"> 
    <ListBoxItem> <Button Content="000"></Button> </ListBoxItem> 
</ListBox>

listbox数据绑定

// 标签布局 
<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:

<TextBox Width="300" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top"> 当鼠标移入输入框显示提示信息 <TextBox.ToolTip> 23 </TextBox.ToolTip> </TextBox>

<Button Width="100" Height="40" Margin="200,0,0,0"> 
点击 
    <Button.ToolTip> 
        <StackPanel> 
            <TextBlock>天王盖地虎</TextBlock> 
            <TextBlock>宝塔镇河妖</TextBlock> 
        </StackPanel> 
    </Button.ToolTip> 
</Button>

方法3设置属性

<Label Content="12122" ToolTip="000000"></Label>

31. RichTextBox 富文本: 编辑小型文档和文本段落的控件
- 富文本中的子控件
  -

32. Run 包含一连串格式化或非格式化文本的内联级别流内容元素
- 使用
  - ```
  <Run>y</Run> <InlineUIContainer> <Label>4</Label> </InlineUIContainer>
```

33. DataGrid 数据网格(表格)

可以显示的数据
- 可以显示以下几种标签显示不同数据 :
- 显示文本: DataGridTextColumn
- 显示复选框: DataGridCheckboxColumn
- 下拉框: DataGridComboboxColumn
- 超链接: DataGridHyperlinkColumn-->
常用属性
- 
- 
- 
-  IsReadOnly 是否只读

表格的用法

自定义单元格

<!--自定义单元格的模版-->
        <!--自定义列-->
        <DataGridTemplateColumn>
            <!--自定义列的标题-->
            <DataGridTemplateColumn.Header>
                <TextBlock>编号</TextBlock>
            </DataGridTemplateColumn.Header>
            
            <!--自定义单元格的模版-->
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ClassId}"></TextBlock>
                </DataTemplate>
          </DataGridTemplateColumn>

设置表头局部样式

<!--表头局部样式-->
<DataGrid.ColumnHeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalAlignment"
                Value="Center" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="Background"
                Value="Red"/>
    </Style>
</DataGrid.ColumnHe

设置单元格局部样式

<!--内容局部样式-->
<DataGridTextColumn.ElementStyle>
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment"
                Value="Center" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="Background"
                Value="Pink" />
    </Style>
</DataGridTextColumn.Ele

表头全局样式

<!--表头全局样式-->
<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}">

单元格全局样式

<!--内容全局样式-->
<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

设置单元格为按钮

// 自定义表头
<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>

表格设计和表格数据绑定

设计表格

// 设计表格
<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

数据绑定

数据绑定
// 设计模型类
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

添加表格数据

// 添加
students.Add(new Student()
 {
    Name = "鲁班" + 000,
    Age = 000 + 19 + "",
    Sex = "男",
    Class = 989 + "班",
    Ah = true
});
this.data.Items.Refresh();

删除表格数据

students.RemoveAt(data.SelectedIndex);// 获取当前选中元素 
data.Items.Refresh(); // 强制更新表格

34. Expander折叠栏

常用属性
- IsEnabled 默认是打开或者折叠起来，true就是展开 false折叠
- ExpandDirection 展开的方向 down 向下展开，展开标签一般展开方向是上下，不设置高度一般展开方向是左右，不设置宽度
- VerticalAlignment= "top" HorizontalAlignment="Center" 展开宽随着内容进行自适应

实例:

<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 菜单标签

菜单操作

自定义菜单

<!--自定义菜单项-->
<MenuItem>
    <!--自定义菜单项模版标签-->
    <MenuItem.Template>
        <!--ControlTemplate 控件模版 TargetType作用到哪种类型标签上-->
        <ControlTemplate TargetType="MenuItem">
            <TextBlock Name="text"
                       Text="原子弹管理"
                       Padding="5">
            </TextBlock>
        </ControlTemplate>
    </MenuItem.Template>

设置图标

<!--FlowDirection 设置图表是从左往右还是从右往左-->
<MenuItem Header="请假管理"
          FontFamily="华文彩魏"
          FontSize="20"
          FlowDirection="RightToLeft"
          Height="40">
    <!--设置图标-->
    <MenuItem.Icon>
        <Image Source="C:\Users\86152\Desktop\图片\wallhaven-jx16pm.jpg" />
    </MenuItem.Icon>
<

使用菜单

<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

树形数据绑定

《--标签布局--》
<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 连接路径

使用实例

// 标签布局
<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 右键菜单

实例

<!--右键菜单-->
<Label Content="右键弹出内容菜单"
       FontSize="30">
    <Label.ContextMenu>
        <ContextMenu Name="c1">
            <MenuItem Header="111">
            </MenuItem>
        </ContextMenu>
    </Label.ContextMenu>

树形属性模版

<!--右键菜单-->
// 设置标签布局
<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
- 实例
  - ```
  <Canvas Width="500" Height="300">
      <StackPanel Width="100"
                  Height="100"
                  Background="Red"></StackPanel>
  </Canvas>
```

40. DockPanel 定义一个区域，从中可以按相对位置水平或垂直排列各个子元素。

常用属性
- LastChildFill 最后一个表情是否铺满剩余空间
布局时常用的属性(用在子控件上的)
- DockPanel.Dock="Left" 用于控制标签排列到那个方向（top,bottom,left,right）

实例:

<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 进度条
- 常用属性
  - 
  - 
  - 
  - 
  - 
  -

42. TreeView 竖向菜单

常用事件
- SelectedItemChanged 当选择子项发生改变的时候触发

标签布局

<TreeView >
    <!--静态数据绑定 TreeViewItem 子项-->
    <TreeViewItem Header="实验小学">
        <TreeViewItem Header="二年级">
            <TreeViewItem Header="三班">
            </TreeViewItem>
        </TreeViewItem>
    </TreeViewItem>
</T

动态数据绑定树形数据模版

// 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标签滚动视图发生变化时触发

本篇文章到此结束，转载请附上原创网址，谢谢！！！

WPF—常用控件、属性、事件、详细介绍

WPF—常用控件、属性、事件、详细介绍

目录

WPF常用控件

单标签和双标签

1. label文本

2. button按钮

3. textbox输入文本

常用事件

4. border 元素四周绘制边框和/或背景。

常用属性

5. ToolBarTray 任务栏

常用属性

6. Toolbar 工具栏

常用属性

7. image 显示图片

Source 显示图片的路径

8. Frame 用于承载页面

常用属性

常用事件

Frame窗体跳转

9. checkbox 复选框

常用属性

常用事件

10. RadioButton 单选框

常用属性

常用事件

可以通过groupName设置相同值进行分组

可以将多个单选框添加到一个父标签下

11. Calendar日历

常用属性

常用事件

获取选择的日期

12. DatePicker 选择日期框

常用属性

13. combobox 下拉框

常用属性

常用事件

自定义子选项

C#添加数据操作

获取选中的值

14. ComboBoxItem 设置下拉框内容的标签

实例

15. StackPanel 将子元素排列成水平或垂直的一行

常用属性

16. TabControl 选项卡

17. TabItme 设置选项卡内容的标签

常用属性

18. Grid 网格区域

19. Grid.ColumnDefinitions 网格布局 列

20. Grid.RowDefinitions 网格布局 行

21. ColumnDefinition 设置网格布局 列 的区域

常用属性

22. RowDefinition 设置网格布局 行 的区域

常用属性

23. WrapPanel 换行panel

常用属性

24. textBlock 显示文本 标签内容和Text属性共存的

常用属性

25. lineBreak 换行标签

26. ListBox 选项列表

常用属性

自定义子选项

listbox数据绑定

27. ListBoxItem 给选项列表添加静态选项的标签

28. GroupBox分组盒子（表示一个控件，该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。）

常用属性

29. ScrollViewer 滚动条标签

常用属性

30 ToolTip 当鼠标移入输入框显示提示信息(该标签只能当做子标签或属性使用)

使用方法

31. RichTextBox 富文本: 编辑小型文档和文本段落的控件

富文本中的子控件

32. Run 包含一连串格式化或非格式化文本的内联级别流内容元素

使用

33. DataGrid 数据网格(表格)

可以显示的数据

常用属性

表格的用法

自定义单元格

19. Grid.ColumnDefinitions 网格布局列

20. Grid.RowDefinitions 网格布局行

21. ColumnDefinition 设置网格布局列的区域

22. RowDefinition 设置网格布局行的区域

24. textBlock 显示文本标签内容和Text属性共存的