参考
环境
| 软件/系统 | 版本 | 说明 |
|---|---|---|
| Windows | Windows 10 专业版 22H2 19045.4046 | |
| Microsoft Visual Studio | Microsoft Visual Studio Community 2022 (64 位) - 17.6.5 | |
| Microsoft .Net SDK | 8.0.101 | 手动安装 |
| Microsoft .Net SDK | 7.0.306 | Microsoft Visual Studio 携带 |
| .net | 6.x | 创建当前文章演示 WPF 项目时指定 .net 版本所选择的框架 |
- MainWindow.xaml
当前项目名为控件<Window x:Class="控件.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:控件" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="MainWindow" Width="800" Height="650 " mc:Ignorable="d"> <Grid> </Grid> </Window>
正文
Border 边框
- Border 只能有一个子级。 若要显示多个子元素，需要在父 Border内放置一个附加Panel元素。 然后，可以在该 Panel 元素中放置子元素。
- 如果要在内容周围显示边框，必须将元素放在父 Border 元素中。
<StackPanel> <Border Background="LightBlue" BorderBrush="Black" BorderThickness="2" CornerRadius="45" Padding="25" Margin="10"/> <Border Background="LightBlue" BorderBrush="Black" BorderThickness="2" CornerRadius="45" Margin="10" Width="50" Height="50"/> <Border Margin="10" BorderBrush="Black" BorderThickness="1" > <TextBlock Width="60" TextWrapping="Wrap" Text="TextBlock"/> </Border> </StackPanel>
BulletDecorator 对齐
-
BulletDecorator 具有两个内容属性：Bullet 和 Child。 Bullet 属性定义要用作项目符号的 UIElement。 Child 属性定义在视觉上与项目符号对齐的 UIElement。
-
使用TextBlock控件，不能居中对齐，即使设置VerticalAlignment也是无效果的，原因：MSDN上有对这个的解释，如果子控件为TextBlock时，Bullet将与其上端对齐，也就是Top，哪些是居中，它也始终保持与基线对齐
<StackPanel Orientation="Vertical"> <BulletDecorator> <BulletDecorator.Bullet> <CheckBox /> </BulletDecorator.Bullet> <TextBlock Text="列表项 1" Height="60" Background="Red"/> </BulletDecorator> <BulletDecorator VerticalAlignment="Bottom"> <BulletDecorator.Bullet> <CheckBox/> </BulletDecorator.Bullet> <TextBox Height="60" Background="Blue"/> </BulletDecorator> <BulletDecorator HorizontalAlignment="Center" VerticalAlignment="Center"> <BulletDecorator.Bullet> <CheckBox/> </BulletDecorator.Bullet> <TextBox Height="40" Text="请输入内容" Width="120" Background="Blue"/> </BulletDecorator> <BulletDecorator FlowDirection="RightToLeft"> <BulletDecorator.Bullet> <CheckBox/> </BulletDecorator.Bullet> <StackPanel Orientation="Vertical" Background="Pink"> <TextBlock Text="列表项 1" Height="30"/> <TextBlock Text="列表项 1" Height="30"/> <TextBlock Text="列表项 1" Height="30"/> <TextBlock Text="列表项 1" Height="30"/> </StackPanel> </BulletDecorator> </StackPanel>
Button 按钮
- Button 控件对来自鼠标、键盘、触笔或其他输入设备的用户输入做出反应并引发 Click 事件。 Button 是一个基本的用户界面 (UI) 组件，可以包含简单的内容（例如文本），也可以包含复杂的内容（例如图像和 Panel 控件）。
- XAML 代码
<StackPanel Orientation="Vertical"> <!-- 指定当鼠标悬停在控件上时应引发 Click 事件。 --> <Button Background="Pink" BorderBrush="Black" BorderThickness="1" Click="Button_Click" ClickMode="Hover"> Hover </Button> <!-- 指定当按下按钮时引发 Click 事件。 --> <Button Background="LightBlue" BorderBrush="Black" BorderThickness="1" Click="Button_Click" ClickMode="Press"> Press </Button> <!-- 指定当按下和释放按钮时应引发 Click 事件。 --> <Button Click="Button_Click" ClickMode="Release"> Release </Button> </StackPanel> - C# 代码
private void Button_Click(object sender, RoutedEventArgs e) { Button? b = sender as Button; if(b == null) { return; } MessageBox.Show(b.Content.ToString()); }
- XAML 代码
Calendar 日历
- 此控件允许用户使用可视的日历显示来选择日期，仅支持公历。
- Calendar 控件可以单独使用，也可以用作 DatePicker 控件的下拉部分。 有关详细信息，请参阅 DatePicker。
- XAML
<StackPanel> <!-- 创建显示2009年1月10日的日历至2009年4月18日。 DisplayDate：当前展示时间 SelectedDate：当前默认选中时间 DisplayDateStart：日期可选区间开始 DisplayDateEnd：日期可选区间结束 --> <Calendar x:Name="calendar1" Margin="20" DisplayDate="3/15/2009" DisplayDateEnd="4/18/2009" DisplayDateStart="1/10/2009" SelectedDate="2/15/2009" /> <Button Click="Button_Click_1" Content="获取calendar1选择的日期" /> <!-- 创建一个日历，该日历显示到2009年1月31日的日期，并且部分日期不可选。 IsTodayHighlighted：是否突出显示当前日期 SelectionMode：指定用户是否可以选择日期、日期范围或多个日期范围 Calendar.BlackoutDates：不可选日期区间（支持多个） Calendar.SelectedDates：自动选中的日期列表（支持多个） --> <Calendar xmlns:sys="clr-namespace:System;assembly=mscorlib" x:Name="calendar2" Margin="20" DisplayDate="1/1/2009" DisplayDateEnd="1/31/2009" IsTodayHighlighted="false" SelectionMode="MultipleRange"> <Calendar.BlackoutDates> <CalendarDateRange End="1/4/2009" Start="1/2/2009" /> <CalendarDateRange End="1/9/2009" Start="1/9/2009" /> <CalendarDateRange End="1/16/2009" Start="1/16/2009" /> <CalendarDateRange End="1/25/2009" Start="1/23/2009" /> <CalendarDateRange End="1/30/2009" Start="1/30/2009" /> </Calendar.BlackoutDates> <Calendar.SelectedDates> <sys:DateTime>1/5/2009</sys:DateTime> <sys:DateTime>1/12/2009</sys:DateTime> <sys:DateTime>1/14/2009</sys:DateTime> <sys:DateTime>1/13/2009</sys:DateTime> <sys:DateTime>1/15/2009</sys:DateTime> <sys:DateTime>1/27/2009</sys:DateTime> <sys:DateTime>4/2/2009</sys:DateTime> </Calendar.SelectedDates> </Calendar> <Button Click="Button_Click_2" Content="获取calendar2选择的日期" /> </StackPanel> - C#
private void Button_Click_1(object sender, RoutedEventArgs e) { MessageBox.Show(String.Join(",", this.calendar1.SelectedDates)); } private void Button_Click_2(object sender, RoutedEventArgs e) { MessageBox.Show(String.Join(",", this.calendar2.SelectedDates)); }
- XAML
DatePicker 下拉/输入/选择日历
-
此控件允许用户使用可视的日历显示来下拉/输入/选择日期，仅支持公历。
- XAML
<StackPanel> <!-- 已选择2009年3月23日并显示长日期格式的日期选择器。 --> <DatePicker x:Name="datePicker1" DisplayDateEnd="12/31/09" DisplayDateStart="1/01/09" FirstDayOfWeek="Monday" SelectedDate="3/23/09" SelectedDateFormat="Long" /> <Button Click="Button_Click_1" Content="获取datePicker1选择的日期" /> </StackPanel> - C#
private void Button_Click_1(object sender, RoutedEventArgs e) { MessageBox.Show(this.datePicker1.SelectedDate.ToString()); }
- XAML
CheckBox 复选框
- CheckBox 控件可具有三种状态：选中、未选中、和不确定。
- CheckBox可以包含任何类型的单个对象， (如字符串、图像或面板) 。 有关更多信息，请参见 ContentControl 类。
- XAML
<StackPanel> <TextBlock Grid.Row="0" Margin="0,20,10,20" FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FF5C9AC9" Text="复选框演示" /> <CheckBox x:Name="cb1" Margin="5,0,0,0" Checked="HandleCheck" Content="三个状态复选框" Indeterminate="HandleThirdState" IsThreeState="True" Unchecked="HandleUnchecked" /> <TextBlock x:Name="text1" Margin="5,0,0,0" /> </StackPanel> - C#
private void HandleCheck(object sender, RoutedEventArgs e) { text1.Text = "复选框处于选中状态."; } private void HandleUnchecked(object sender, RoutedEventArgs e) { text1.Text = "未选中该复选框."; } private void HandleThirdState(object sender, RoutedEventArgs e) { text1.Text = "复选框处于不确定状态."; }
- XAML
ComboBox 下拉选择/搜索/输入框
-
ComboBox 控件向用户显示选项列表。 当控件展开和折叠时，列表将显示和隐藏。 在默认状态下，列表是折叠的，仅显示一个选项。 用户可单击按钮查看完整的选项列表。
- XAML
<StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <ComboBox x:Name="comboBox" Width="120" HorizontalAlignment="Left" VerticalAlignment="Top" SelectionChanged="Combo_SelectionChanged"> <ComboBoxItem Content="Item #1" /> <ComboBoxItem Content="Item #2" /> <ComboBoxItem Content="Item #3" /> </ComboBox> <TextBox x:Name="textBox" Width="200" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" /> </StackPanel> <StackPanel Orientation="Horizontal"> <ComboBox x:Name="comboBox1" Width="120" HorizontalAlignment="Left" VerticalAlignment="Top" IsEditable="True" SelectionChanged="Combo1_SelectionChanged"> <ComboBoxItem Content="Item #1" /> <ComboBoxItem Content="Item #2" /> <ComboBoxItem Content="Item #3" /> </ComboBox> <TextBox x:Name="textBox1" Width="200" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" /> </StackPanel> </StackPanel> - C#
private void Combo_SelectionChanged(object sender, SelectionChangedEventArgs e) { textBox.Text = comboBox.SelectedItem.ToString(); } private void Combo1_SelectionChanged(object sender, SelectionChangedEventArgs e) { textBox1.Text = comboBox1.SelectedItem.ToString(); }
- XAML
ContextMenu 控件上下文菜单/控件右键菜单
-
ContextMenu 允许控件显示特定于该控件上下文的 Menu。 通常，ContextMenu 通过鼠标鼠标右键或键盘的菜单按钮在用户界面 (UI) 中公开。
-
ContextMenu 是 ItemsControl ，这意味着它可以包含任何类型的对象集合， (如字符串、图像或面板) 。 有关更多信息，请参见 ItemsControl 类。
- XAML
<StackPanel Orientation="Vertical"> <TextBox Name="textBox1" Grid.Row="7" Margin="10,10,5,5" TextWrapping="Wrap"> 敏捷的棕毛狐狸从懒狗身上跃过。 <TextBox.ContextMenu> <ContextMenu> <MenuItem Checked="Bold_Checked" Header="_加粗" IsCheckable="True" Unchecked="Bold_Unchecked" /> <MenuItem Checked="Italic_Checked" Header="_斜体" IsCheckable="True" Unchecked="Italic_Unchecked" /> <Separator /> <MenuItem Click="IncreaseFont_Click" Header="_增大字号" /> <MenuItem Click="DecreaseFont_Click" Header="_减小字号" /> </ContextMenu> </TextBox.ContextMenu> </TextBox> </StackPanel> - C#
private void Bold_Checked(object sender, RoutedEventArgs e) { textBox1.FontWeight = FontWeights.Bold; } private void Bold_Unchecked(object sender, RoutedEventArgs e) { textBox1.FontWeight = FontWeights.Normal; } private void Italic_Checked(object sender, RoutedEventArgs e) { textBox1.FontStyle = FontStyles.Italic; } private void Italic_Unchecked(object sender, RoutedEventArgs e) { textBox1.FontStyle = FontStyles.Normal; } private void IncreaseFont_Click(object sender, RoutedEventArgs e) { if (textBox1.FontSize < 18) { textBox1.FontSize += 2; } } private void DecreaseFont_Click(object sender, RoutedEventArgs e) { if (textBox1.FontSize > 10) { textBox1.FontSize -= 2; } }
- XAML
DataGrid 数据网格/数据表格
-
表示用于在可自定义的网格中显示数据的控件。
-
通过 DataGrid 控件可显示和编辑来自许多不同源的数据，例如来自 SQL 数据库、LINQ 查询或任何其他可绑定数据源的数据。 有关详细信息，请参阅绑定源概述。
本示例代码功能并未完善，仅供了解该控件。
- XAML
<Window x:Class="控件.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:core="clr-namespace:System;assembly=mscorlib" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:控件" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="MainWindow" Width="800" Height="650 " mc:Ignorable="d"> <Window.Resources> <ObjectDataProvider x:Key="myEnum" MethodName="GetValues" ObjectType="{x:Type core:Enum}"> <ObjectDataProvider.MethodParameters> <x:TypeExtension Type="local:Party" /> </ObjectDataProvider.MethodParameters> </ObjectDataProvider> </Window.Resources> <Grid> <StackPanel Orientation="Vertical"> <StackPanel Margin="0,10" Orientation="Horizontal"> <Button Name="btnAdd" Click="btnAdd_Click" Content="添加" /> <Button Name="btnSave" Click="btnSave_Click" Content="保存" /> <Button Name="btnDel" Click="btnDel_Click" Content="删除" /> </StackPanel> <!-- CanUserAddRows=false的时候就不会自动生成新行 --> <DataGrid Name="dataGrid" AlternatingRowBackground="LightBlue" AlternationCount="2" AutoGenerateColumns="False" CanUserAddRows="False" CellEditEnding="dataGrid_CellEditEnding"> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding Name}" Header="姓名" /> <DataGridTextColumn Binding="{Binding Title}" Header="标题" /> <DataGridCheckBoxColumn Binding="{Binding WasReElected}" Header="再次当选?" /> <DataGridComboBoxColumn Header="聚会" ItemsSource="{Binding Source={StaticResource myEnum}}" SelectedItemBinding="{Binding Affiliation}" /> </DataGrid.Columns> </DataGrid> </StackPanel> </Grid> </Window> - C#
using System; using System.Collections; using System.Collections.Generic; using System.Collections.ObjectModel; using System.ComponentModel; using System.Linq; using System.Runtime.CompilerServices; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Xml.Linq; namespace 控件 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { ObservableCollection<Employee> employees = new ObservableCollection<Employee>{ new Employee() { Id = 1, Name = "张三", Title = "好好学习", WasReElected = true, Affiliation = Party.Indepentent }, new Employee() { Id = 2, Name = "夏秋初", Title = "天天向上", WasReElected = false, Affiliation = Party.Federalist }, }; public MainWindow() { InitializeComponent(); dataGrid.ItemsSource = this.employees; } private void btnAdd_Click(object sender, RoutedEventArgs e) { this.employees.Add(new Employee() { Id = 0, Name = "", Title = "", WasReElected = false, Affiliation = Party.Indepentent }); } private void btnSave_Click(object sender, RoutedEventArgs e) { List<Employee> addItems = new List<Employee>(); foreach (Employee emp in dataGrid.Items) { if(emp.Id == 0) { addItems.Add(emp); } } } private void btnDel_Click(object sender, RoutedEventArgs e) { // 获取选中的行 List<Employee> selectedItems = new List<Employee>(); foreach (Employee item in dataGrid.SelectedItems) { selectedItems.Add(item); } // 从数据源中删除选中的行，并写入数据库 foreach (Employee item in selectedItems) { employees.Remove(item); } // 刷新 DataGrid 显示最新的数据 dataGrid.Items.Refresh(); } // 编辑完成后捕获相应的事件 private void dataGrid_CellEditEnding(object sender, DataGridCellEditEndingEventArgs e) { // 获取编辑的行，这里的值是旧值 Employee? selectedObject = dataGrid.SelectedItem as Employee; if (selectedObject != null) { MessageBox.Show(selectedObject.Name); } // 下面这些代码未实现真实的功能 //Employee? selectedObject = dataGrid.SelectedItem as Employee; //DataGridBoundColumn? editedColumn = e.Column as DataGridBoundColumn; //if (selectedObject != null && editedColumn != null) //{ // var binding = editedColumn.Binding as Binding; // if (binding != null) // { // // 获取当前控件名 // string tagName = e.EditingElement.GetType().Name.ToString(); // // 获取绑定的属性名称 // string propertyName = binding.Path.Path; // // 获取编辑后的值 // //TextBox? editedTextBox = e.EditingElement as TextBox; // //string newValue = editedTextBox.Text; // //// 更新数据源中的值 // //selectedObject.GetType().GetProperty(propertyName).SetValue(新值); // MessageBox.Show(tagName); // } //} } } public enum Party { Indepentent, Federalist, DemocratRepublican, } public class Employee : INotifyPropertyChanged { private int id; public int Id { get { return id; } set { id = value; RaiseProperChanged(); } } private string name; public string Name { get { return name; } set { name = value; RaiseProperChanged(); } } private string title; public string Title { get { return title; } set { title = value; RaiseProperChanged(); } } private bool wasReElected; public bool WasReElected { get { return wasReElected; } set { wasReElected = value; RaiseProperChanged(); } } private Party affiliation; public Party Affiliation { get { return affiliation; } set { affiliation = value; RaiseProperChanged(); } } public event PropertyChangedEventHandler PropertyChanged; private void RaiseProperChanged([CallerMemberName] string caller = "") { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(caller)); } } } }
- XAML
Expander 扩展器/折叠面板
- 表示一种控件，该控件显示具有可折叠内容显示窗口的标题。
- 如果展开窗口的内容对于窗口来说太大，则可以将 的内容 Expander 包装在 控件中 ScrollViewer 以提供可滚动的内容。 控件不会自动提供 Expander 滚动功能。
- XAML
<StackPanel Orientation="Vertical"> <Expander Width="565" Background="Tan" ExpandDirection="Down" Header="折叠面板的标题" IsExpanded="False"> <TextBlock TextWrapping="Wrap"> <StackPanel Orientation="Vertical"> <TextBlock Text="折叠面板的内容" /> <Button Content="按钮1" /> <Button Content="按钮2" /> <Button Content="按钮3" /> <Button Content="按钮4" /> </StackPanel> </TextBlock> </Expander> <Expander Width="565" Background="Tan" ExpandDirection="Down" Header="折叠面板的标题" IsExpanded="True"> <TextBlock TextWrapping="Wrap"> <StackPanel Orientation="Vertical"> <TextBlock Text="折叠面板的内容" /> <Button Content="按钮1" /> <Button Content="按钮2" /> <Button Content="按钮3" /> <Button Content="按钮4" /> </StackPanel> </TextBlock> </Expander> <Expander Width="565" Background="Tan" ExpandDirection="Up" Header="折叠面板的标题" IsExpanded="True"> <TextBlock TextWrapping="Wrap"> <StackPanel Orientation="Vertical"> <TextBlock Text="折叠面板的内容" /> <Button Content="按钮1" /> <Button Content="按钮2" /> <Button Content="按钮3" /> <Button Content="按钮4" /> </StackPanel> </TextBlock> </Expander> <Expander Width="565" Background="Tan" ExpandDirection="Right" Header="折叠面板的标题" IsExpanded="True"> <TextBlock TextWrapping="Wrap"> <StackPanel Orientation="Vertical"> <TextBlock Text="折叠面板的内容" /> <Button Content="按钮1" /> <Button Content="按钮2" /> <Button Content="按钮3" /> <Button Content="按钮4" /> </StackPanel> </TextBlock> </Expander> <Expander Width="565" Background="Tan" ExpandDirection="Left" Header="折叠面板的标题" IsExpanded="True"> <TextBlock TextWrapping="Wrap"> <StackPanel Orientation="Vertical"> <TextBlock Text="折叠面板的内容" /> <Button Content="按钮1" /> <Button Content="按钮2" /> <Button Content="按钮3" /> <Button Content="按钮4" /> </StackPanel> </TextBlock> </Expander> </StackPanel>
- XAML
FlowDocumentReader 流文档阅读器
提供一种查看流内容的控件，该控件内置了对多种查看模式的支持。
FlowDocumentReader 包含使用户能够动态选择各种查看模式的功能，这些查看模式包括单页（一次一页）查看模式、一次两页（书本阅读格式）查看模式和连续滚动（无界限）查看模式。 如果不需要在不同查看模式之间动态切换的功能，则可以在特定查看模式下固定更轻量级流内容查看器。
FlowDocumentPageViewer 以单页查看模式显示流内容，以 FlowDocumentScrollViewer 连续滚动模式显示流内容。 有关可用显示模式的详细信息，请参阅 FlowDocumentReaderViewingMode。
Frame 框架
-
Frame 框架是一种支持导航的内容控件。
-
内容可以是任何类型的.NET Framework对象和 HTML 文件。 但是，一般情况下，页面是打包内容以用于导航 (查看 Page) 的首选方式。
-
当 Frame 控件导航到 HTML 内容时，该控件在 Frame 内部实例化本机 WebBrowser ActiveX 控件。 WPF 通过将功能控件应用于 WebBrowser ActiveX 控件来启用安全功能。 对于 XBAP 和独立应用程序，应用的功能控件有所不同。 某些应用程序应应用其他功能控制，以防止恶意内容运行。 有关详细信息，请参阅 Security (WPF) 和 WebBrowser 控件概述和教程中的“WebBrowser 控件和功能控件”部分。
MainWindow.xaml<StackPanel Orientation="Vertical"> <Border BorderBrush="Black" BorderThickness="2"> <Frame Source="http://baidu.com" /> </Border> <Border BorderBrush="Black" BorderThickness="2"> <Frame Source="UserControl1.xaml" /> </Border> </StackPanel>UserControl1.xaml(在当前MainWindow.xaml同级目录下添加的用户控件)<StackPanel> <TextBox Width="120" HorizontalAlignment="Left" VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap" /> <Button Content="Button" /> <TextBox Width="120" Text="TextBox" TextWrapping="Wrap" /> <Button Content="Button" /> </StackPanel>
GroupBox 分组
-
表示一个控件，该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。
-
GroupBox 是 HeaderedContentControl这意味着它的 Content 和 Header 属性可以是任何类型的 (如字符串、图像或面板) 。 有关更多信息，请参见 HeaderedContentControl 类。
- XAML
<StackPanel Orientation="Vertical"> <GroupBox Width="300" Height="410"> <GroupBox.Header> <Label>员工数据</Label> </GroupBox.Header> <StackPanel> <TabControl Name="myTabControl" Height="350" Margin="0,0,0,10" TabStripPlacement="Top"> <TabItem Name="userInfo"> <TabItem.Header>_员工信息</TabItem.Header> <StackPanel> <TextBlock>雇员 / 从业员工</TextBlock> <TextBlock>选择您的姓名</TextBlock> <ListBox Name="empName"> <ListBoxItem IsSelected="true">埃丝特</ListBoxItem> <ListBoxItem>乔治</ListBoxItem> <ListBoxItem>艾伦</ListBoxItem> <ListBoxItem>艾瑞克</ListBoxItem> </ListBox> </StackPanel> </TabItem> <TabItem> <TabItem.Header>_职务信息</TabItem.Header> <StackPanel> <TextBlock>选择工作</TextBlock> <ListBox Name="job"> <ListBoxItem IsSelected="true">程序编制员</ListBoxItem> <ListBoxItem>试验者</ListBoxItem> <ListBoxItem>作者</ListBoxItem> <ListBoxItem>管理人员</ListBoxItem> </ListBox> </StackPanel> </TabItem> <TabItem Name="Skill"> <TabItem.Header>_技能</TabItem.Header> <StackPanel> <TextBlock> 选择你最强的技能 </TextBlock> <ListBox Name="skills"> <ListBoxItem IsSelected="true">C#</ListBoxItem> <ListBoxItem>Visual Basic</ListBoxItem> <ListBoxItem>.NET</ListBoxItem> <ListBoxItem>JScript</ListBoxItem> </ListBox> </StackPanel> </TabItem> </TabControl> <Button Click="Button_Click" Content="显示总结" /> </StackPanel> </GroupBox> </StackPanel> - C#
private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show(empName.SelectedValue.ToString() + job.SelectedValue.ToString() + skills.SelectedValue.ToString() ); }
- XAML
Image 图片
- 类 Image 使你能够加载以下图像类型：.bmp、.gif、.ico、.jpg、.png、.wdp 和 .tiff。
- 显示多帧图像时，仅显示第一帧。 控件不支持多帧图像的 Image 动画。
- 对于固定大小控件， Width 可以设置 和/或 Height 属性。 但是，若要保留媒体的纵横比，请设置 或 Height 属性，Width但不能同时设置两者。
- 图像处理：复制
apple.jpg图片到项目目录\images\apple.jpg，选中图片后在属性面板设置：- 复制到输出目录：不复制
- 生成操作：资源
- XAML
<StackPanel Orientation="Vertical"> <Image Width="200" Height="200" Source="/images/apple.jpg" /> <Image Width="200" Height="200" Source="pack://application:,,,/images/apple.jpg" /> <Image Grid.Row="1" Grid.Column="1" Width="200" Margin="5"> <Image.Source> <BitmapImage UriSource="images/apple.jpg" /> </Image.Source> </Image> </StackPanel>
- 图像处理：复制
Label 标签
-
表示控件的文本标签，并提供访问密钥支持。
-
Label 为访问键提供功能和视觉方面的支持。 它通常用于启用对控件的快速键盘访问，如 TextBox。 若要将 Label 分配到 Control，请设置 Label.Target 属性为当用户按下访问键时应获取焦点的控件。
- XAML
<StackPanel Orientation="Vertical"> <Label Width="200" HorizontalAlignment="Left" Target="{Binding ElementName=tb}"> _File </Label> <TextBox Name="tb" Width="50" /> <TextBox Name="textBox1" Width="50" Height="20" /> <Label Width="200" HorizontalAlignment="Left" Target="{Binding ElementName=textBox1}"> <AccessText TextWrapping="WrapWithOverflow"> _Another long piece of text that requires text wrapping goes here. </AccessText> </Label> </StackPanel>
- XAML
ListBox 标签
-
为用户提供可选项列表。
-
ListBox 是 ItemsControl 这意味着它可以包含任何类型的对象集合， (如字符串、图像或面板) 。 有关更多信息，请参见 ItemsControl 类。
-
SelectionMode 确定用户可以一次选择多少项。 可以将 属性设置为 Single (默认，用户一次只能选择一项。) 、 Multiple（用户可以选择多个项而无需按下修改键。）或 Extended（用户可以选择多个连续项，同时按住 SHIFT 键或非连续项，方法是按住 Ctrl 键并单击项。）。
- XAML
<StackPanel Orientation="Vertical"> <TextBox Name="tb" Width="100" Height="30" /> <ListBox Name="lb" Width="100" Height="120" SelectionChanged="lb_SelectionChanged" SelectionMode="Single"> <ListBoxItem>Item 1</ListBoxItem> <ListBoxItem>Item 2</ListBoxItem> <ListBoxItem>Item 3</ListBoxItem> <ListBoxItem>Item 4</ListBoxItem> <ListBoxItem>Item 5</ListBoxItem> <ListBoxItem>Item 6</ListBoxItem> <ListBoxItem>Item 7</ListBoxItem> <ListBoxItem>Item 8</ListBoxItem> <ListBoxItem>Item 9</ListBoxItem> <ListBoxItem>Item 10</ListBoxItem> </ListBox> </StackPanel> - C#
private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e) { ListBoxItem lbi = ((sender as ListBox).SelectedItem as ListBoxItem); tb.Text = " You selected " + lbi.Content.ToString() + "."; }
- XAML
ListView 数据列表/静态表格
-
表示用于显示数据项列表的控件。
-
ListView 是 ItemsControl 这意味着它可以包含任何类型的对象集合， (如字符串、图像或面板) 。 有关更多信息，请参见 ItemsControl 类。
-
中 ListView 数据项的表示形式由其视图模式定义，该模式由 View 属性指定。 Windows Presentation Foundation (WPF) 提供了一种GridView视图模式，用于将数据ListView项内容分区为列。 上的 GridView 属性和方法及其相关类样式并指定列的内容。
- XAML
<StackPanel Orientation="Vertical"> <TextBlock Text="绑定列表" /> <!-- 绑定列表 --> <ListView Name="lvUsers" Margin="10"> <ListView.View> <GridView> <GridViewColumn Width="120" DisplayMemberBinding="{Binding Name}" Header="Name" /> <GridViewColumn Width="50" DisplayMemberBinding="{Binding Age}" Header="Age" /> <GridViewColumn Width="150" DisplayMemberBinding="{Binding Mail}" Header="Mail" /> </GridView> </ListView.View> </ListView> <TextBlock Text="列表模板" /> <!-- 列表模板 --> <ListView Name="lvUsers2" Margin="10"> <ListView.View> <GridView> <GridViewColumn Width="120" DisplayMemberBinding="{Binding Name}" Header="Name" /> <GridViewColumn Width="50" DisplayMemberBinding="{Binding Age}" Header="Age" /> <GridViewColumn Width="150" Header="Mail"> <GridViewColumn.CellTemplate> <DataTemplate> <TextBlock Cursor="Hand" Foreground="Blue" Text="{Binding Mail}" TextDecorations="Underline" /> </DataTemplate> </GridViewColumn.CellTemplate> </GridViewColumn> </GridView> </ListView.View> </ListView> <TextBlock Text="有图片的ListViewItem，图片不要可以去掉" /> <!-- 有图片的ListViewItem，图片不要可以去掉 --> <ListView Margin="10"> <ListViewItem> <StackPanel Orientation="Horizontal"> <Image Height="20" Margin="0,0,5,0" Source="/images/black.jpg" /> <TextBlock>Blue</TextBlock> </StackPanel> </ListViewItem> <ListViewItem> <StackPanel Orientation="Horizontal"> <Image Height="20" Margin="0,0,5,0" Source="/images/black.jpg" /> <TextBlock>Blue</TextBlock> </StackPanel> </ListViewItem> <ListViewItem IsSelected="True"> <StackPanel Orientation="Horizontal"> <Image Height="20" Margin="0,0,5,0" Source="/images/black.jpg" /> <TextBlock>Red</TextBlock> </StackPanel> </ListViewItem> </ListView> </StackPanel> - C#
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); List<User> items = new List<User>(); items.Add(new User() { Name = "John Doe", Age = 42, Mail = "[email protected]" }); items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "[email protected]" }); items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "[email protected]" }); lvUsers.ItemsSource = items; lvUsers2.ItemsSource = items; } } public class User { public string Name { get; set; } public int Age { get; set; } public string Mail { get; set; } }
- XAML
PasswordBox 密码输入框
- XAML
<StackPanel Orientation="Vertical"> <TextBlock Text="密码输入框" /> <PasswordBox x:Name="pwdBox" MaxLength="64" PasswordChanged="pwdBox_PasswordChanged" PasswordChar="#" /> <TextBlock Text="同步的密码" /> <TextBox x:Name="textBox" /> </StackPanel> - C#
private void pwdBox_PasswordChanged(object sender, RoutedEventArgs e) { PasswordBox passwordBox = (PasswordBox)sender; textBox.Text = passwordBox.Password; }
Popup 弹出窗口/气泡卡片/文字气泡
-
Popup 有一个内容属性： Child。 Popup最多可以有一个子级，可以是任何 UIElement。
-
XAML
<StackPanel Orientation="Vertical"> <Canvas Width="200" Height="150"> <Image Name="image1" Canvas.Left="75" Width="200" Height="200" Source="/images/apple.jpg" /> <Popup IsOpen="True" Placement="Bottom" PlacementTarget="{Binding ElementName=image1}"> <TextBlock Background="LightGreen" FontSize="14">Placement=Bottom</TextBlock> </Popup> <Popup IsOpen="True" Placement="Top" PlacementTarget="{Binding ElementName=image1}"> <TextBlock Background="LightGreen" FontSize="14">Placement=Top</TextBlock> </Popup> <Popup IsOpen="True" Placement="Left" PlacementTarget="{Binding ElementName=image1}"> <TextBlock Background="LightGreen" FontSize="14">Placement=Left</TextBlock> </Popup> <Popup IsOpen="True" Placement="Right" PlacementTarget="{Binding ElementName=image1}"> <TextBlock Background="LightGreen" FontSize="14">Placement=Right</TextBlock> </Popup> </Canvas> <StackPanel Margin="50,50,0,0" Orientation="Horizontal"> <Canvas Width="200" Height="200" Background="Red"> <Rectangle Canvas.Left="50" Canvas.Top="50" Width="50" Height="100" Stroke="White" StrokeThickness="3" /> <Popup IsOpen="True" PlacementRectangle="50,50,50,100"> <TextBlock Width="140" Background="Yellow" FontSize="14" TextWrapping="Wrap"> This is a popup with a PlacementRectangle. </TextBlock> </Popup> </Canvas> <Canvas Width="200" Height="200" Margin="30,0,0,0" Background="Red"> <Rectangle Canvas.Left="50" Canvas.Top="50" Width="50" Height="100" Stroke="White" StrokeThickness="3" /> <Popup IsOpen="True"> <TextBlock Width="140" Background="Yellow" FontSize="14" TextWrapping="Wrap"> This is a popup without a PlacementRectangle. </TextBlock> </Popup> </Canvas> <Canvas Width="200" Height="200" Margin="20" Background="Yellow"> <Popup HorizontalOffset="20" IsOpen="True" Placement="Bottom" VerticalOffset="20"> <TextBlock Background="#42F3FD" FontSize="14"> This is a popup. </TextBlock> </Popup> </Canvas> </StackPanel> </StackPanel>
ProgressBar 进度条
-
ProgressBar 指示操作的进度。 ProgressBar 控件包含一个窗口，其中填充系统高亮色来显示操作进度。
-
控件 ProgressBar 由一个窗口组成，该窗口默认在操作进行时从左到右填充。 控件具有范围和当前位置。
-
ProgressBar 重写 属性的元数据， Maximum 并将其默认值设置为 100。 ProgressBar 重写 属性的元数据， Focusable 并将其默认值设置为 false。
-
XAML
<StatusBar Name="sbar" VerticalAlignment="Bottom" Background="Beige"> <StatusBarItem> <TextBlock>下载文件</TextBlock> </StatusBarItem> <StatusBarItem> <ProgressBar Name="progressBar1" Width="100" Height="20"> <ProgressBar.Triggers> <EventTrigger RoutedEvent="ProgressBar.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="progressBar1" Storyboard.TargetProperty="Value" From="0" To="100" Duration="0:0:5" /> </Storyboard> </BeginStoryboard> </EventTrigger> </ProgressBar.Triggers> </ProgressBar> </StatusBarItem> <Separator /> <StatusBarItem> <TextBlock>进度</TextBlock> </StatusBarItem> <StatusBarItem HorizontalAlignment="Right"> <Image Width="16" Height="16" Source="images/apple.jpg" /> </StatusBarItem> </StatusBar>
PrintDialog 打印对话框
-
调用标准的 Microsoft Windows 打印对话框，此对话框可根据用户输入配置 PrintTicket 和 PrintQueue，然后打印文档。
-
用户可以使用“ 打印 ”对话框来选择打印机、对其进行配置和执行打印作业。
-
严格地说，可在没有打开对话框的情况下使用 PrintDocument 方法。 从这个意义上说，该控件可用作不可见的打印组件。 但是出于性能原因，最好使用 AddJob 方法或 XpsDocumentWriter 的 Write 和 WriteAsync 方法之一。 有关此内容的详细信息，请参阅 如何：以编程方式打印 XPS 文件。
-
不要将此类 System.Windows.Controls.PrintDialog与 System.Windows.Forms.PrintDialog混淆。 后者用于Windows 窗体应用程序。 System.Windows.Controls.PrintDialog与 Windows Presentation Foundation 应用程序一起使用。
-
XAML
<Button Width="200" Click="InvokePrint">Invoke PrintDialog</Button> -
C#
private void InvokePrint(object sender, RoutedEventArgs e) { // Create the print dialog object and set options PrintDialog pDialog = new PrintDialog(); pDialog.PageRangeSelection = PageRangeSelection.AllPages; pDialog.UserPageRangeEnabled = true; // Display the dialog. This returns true if the user presses the Print button. Nullable<Boolean> print = pDialog.ShowDialog(); if (print == true) { //XpsDocument xpsDocument = new XpsDocument("C:\\FixedDocumentSequence.xps", FileAccess.ReadWrite); //FixedDocumentSequence fixedDocSeq = xpsDocument.GetFixedDocumentSequence(); //pDialog.PrintDocument(fixedDocSeq.DocumentPaginator, "Test print job"); } }
RadioButton 单选按钮
-
可由用户选择但不能清除的按钮。 可以通过单击来设置 IsChecked 的 RadioButton 属性，但只能以编程方式清除该属性。
-
RadioButton是 ，ContentControl这意味着它可以包含任何类型的单个对象， (如字符串、图像或面板) 。 有关更多信息，请参见 ContentControl 类。
-
XAML
<StackPanel> <TextBlock Text="按钮组内只能选中一个" /> <StackPanel Orientation="Horizontal"> <RadioButton GroupName="colorgrp">Red</RadioButton> <RadioButton GroupName="colorgrp">Blue</RadioButton> </StackPanel> <TextBlock Text="按钮组内只能选中一个" /> <StackPanel Orientation="Horizontal"> <RadioButton GroupName="numgrp">1</RadioButton> <RadioButton GroupName="numgrp">2</RadioButton> </StackPanel> <TextBlock Text="事件测试" /> <StackPanel Orientation="Horizontal"> <RadioButton Name="rb1" Checked="WriteText2">Yes</RadioButton> <RadioButton Name="rb2" Checked="WriteText2">No</RadioButton> <RadioButton Name="rb3" Checked="WriteText2">No opinion</RadioButton> <TextBlock x:Name="txtb" /> </StackPanel> </StackPanel> -
C#
void WriteText2(object sender, RoutedEventArgs e) { RadioButton li = (sender as RadioButton); txtb.Text = "You clicked " + li.Content.ToString() + "."; }
RepeatButton 重复按钮
- 普通按钮只有按下触发一次 Click 事件，RepeatButton 可以通过设置间隔在按下时到抬起时重复执行 Click 事件。
- 表示从按下按钮到释放按钮的时间内重复引发其 Click 事件的控件。
- RepeatButton是 ，ContentControl这意味着它可以包含任何类型的单个对象， (如字符串、图像或面板) 。 有关更多信息，请参见 ContentControl 类。
- 类 RepeatButton 表示类似于 的 Button控件。 但是，“重复”按钮可让你控制事件发生的时间和方式 Click 。 从 RepeatButton 按下事件到释放事件时，会重复引发 Click 事件。 属性 Delay 确定事件的开始时间。 还可以使用 Interval 属性控制重复的间隔。
- XAML
<StackPanel> <RepeatButton Width="100" Click="Increase" Delay="500" DockPanel.Dock="Top" Interval="100"> 长按每隔100ms递增 </RepeatButton> <TextBlock Name="valueText" Width="100" DockPanel.Dock="Top" FontSize="16" TextAlignment="Center"> 0 </TextBlock> <RepeatButton Width="100" Click="Decrease" Delay="500" DockPanel.Dock="Top" Interval="100"> 长按每隔100ms递减 </RepeatButton> </StackPanel> - C#
void Increase(object sender, RoutedEventArgs e) { Int32 Num = Convert.ToInt32(valueText.Text); valueText.Text = ((Num + 1).ToString()); } void Decrease(object sender, RoutedEventArgs e) { Int32 Num = Convert.ToInt32(valueText.Text); valueText.Text = ((Num - 1).ToString()); }
RichTextBox 富文本编辑器
-
RichTextBox 元素定义一个编辑控件，其中内置了剪切粘贴、丰富的文档演示和内容选择等功能支持。
-
对 FlowDocument 对象进行操作的丰富编辑控件。
-
FlowDocument 是 支持的唯一 RichTextBox子元素。
-
可以在 TextBox 或 RichTextBox 中启用实时拼写检查。 启用拼写检查时，任何拼写错误的字词下方都会出现红线。
-
默认情况下，TextBox 和 RichTextBox 都有一个上下文菜单，该菜单在用户在控件内右键单击时显示。 上下文菜单使用户可以剪切、复制或粘贴。
-
通常 TextChanged 事件应该用于检测 TextBox 或 RichTextBox 中文本的更改，而不是你可能认为的 KeyDown。 有关示例，请参阅检测 TextBox 中的文本何时更改。
-
XAML
<StackPanel> <RichTextBox Name="richTB"> <FlowDocument> <Paragraph> This is flow content and you can<Bold>edit me!</Bold> </Paragraph> <Paragraph> <Run>Paragraph 1</Run> </Paragraph> <Paragraph> <Run>Paragraph 2</Run> </Paragraph> <Paragraph> <Run>Paragraph 3</Run> </Paragraph> </FlowDocument> </RichTextBox> </StackPanel>
ScrollBar 滚动条
-
利用 ScrollBar，可以通过滑动 Thumb 使内容可见来查看当前查看区域之外的内容。
-
表示提供滚动条的控件，该滚动条具有一个滑动 Thumb，其位置对应于一个值。
-
XAML
<StackPanel Orientation="Vertical"> <TextBlock Text="创建值范围为 0 和 100 的水平 ScrollBar" /> <ScrollBar x:Name="scrollBar" Width="4in" Maximum="100" Minimum="1" Orientation="Horizontal" /> <TextBox Text="{Binding ElementName=scrollBar, Path=Value, Mode=OneWay}" /> <TextBlock Text="创建值范围为 0 和 100 的水平 ScrollBar" /> <ScrollBar x:Name="scrollBar1" Height="4in" Maximum="100" Minimum="1" Orientation="Vertical" /> <TextBox Text="{Binding ElementName=scrollBar1, Path=Value, Mode=OneWay}" /> </StackPanel>
ScrollViewer 可滚动容器
- ScrollViewer 控件将创建可滚动的区域，可在其中水平或垂直滚动内容。
- 当 ScrollViewer 子元素显示不全时，自动显示滚动条；子元素正常显示完整，自动隐藏滚动条。
- ScrollViewer如果包含大量项，滚动性能可能会受到影响。
- XAML
<StackPanel Orientation="Vertical"> <ScrollViewer Height="200" HorizontalScrollBarVisibility="Auto"> <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"> <TextBlock Margin="0,0,0,20" TextWrapping="Wrap"> Scrolling is enabled when it is necessary. Resize the window, making it larger and smaller. </TextBlock> <Rectangle Width="1500" Height="1500" Fill="Red" /> </StackPanel> </ScrollViewer> </StackPanel>
Separator 分隔符/分割线
- Separator 控件在控件（例如 ListBox、Menu 和 ToolBar）中的项之间绘制一条水平线或垂直线。
- XAML
<StackPanel Orientation="Vertical"> <ToolBarTray Background="White"> <ToolBar Band="1" BandIndex="1"> <Button> <Image Height="50" Source="/images/apple.jpg" /> </Button> <Separator /> <Button> <Image Height="50" Source="/images/apple.jpg" /> </Button> <Separator /> <Button> <Image Height="50" Source="/images/apple.jpg" /> </Button> </ToolBar> </ToolBarTray> <Separator Margin="10" /> <Button Content="按钮" /> <Separator Margin="10" /> <Button Content="按钮" /> <Separator Margin="10" /> <Button Content="按钮" /> </StackPanel>
Slider 滑块
- Slider 允许通过沿着 Track 移动 Thumb 来从一系列值中进行选择。
- XAML
<StackPanel Orientation="Vertical"> <Slider Name="RectangleWidth" Height="100" Margin="10,0,0,0" HorizontalAlignment="Left" LargeChange="10" Maximum="200" Minimum="0" Orientation="Vertical" SmallChange="1" TickFrequency="10" TickPlacement="BottomRight" Value="50" /> <Slider Name="RectangleHeight" Width="100" Margin="10,0,0,0" HorizontalAlignment="Left" LargeChange="10" Maximum="200" Minimum="0" Orientation="Horizontal" SmallChange="1" TickFrequency="10" TickPlacement="TopLeft" Value="50" /> <Separator Margin="10" /> <Rectangle Width="{Binding ElementName=RectangleWidth, Path=Value}" Height="{Binding ElementName=RectangleHeight, Path=Value}" Margin="50,20,0,0" HorizontalAlignment="Left" Fill="Blue" /> </StackPanel>
StatusBar 窗口状态栏
-
窗口底部的水平区域，应用程序可以显示状态信息。
-
该控件在应用程序窗口的水平栏中显示项和信息。
-
StatusBar 是 ItemsControl 这意味着它可以包含任何类型的对象集合， (如字符串、图像或面板) 。 有关更多信息，请参见 ItemsControl 类。
-
是 StatusBar 通常显示图像和状态信息的水平行的条形图。 可以使用 控件将 中的 StatusBar 项划分为包含相关项的 Separator 组。 中的 StatusBar 项可以显示文本、图形或其他复杂内容。 中的 StatusBar 项定义为 StatusBarItem 对象。
-
当用户单击 中的项时，将引发在 StatusBarItem 上 StatusBar定义的事件。
-
XAML
<StatusBar Name="sbar" VerticalAlignment="Bottom" Background="Beige"> <StatusBarItem> <TextBlock>下载文件</TextBlock> </StatusBarItem> <StatusBarItem> <ProgressBar Name="progressBar1" Width="100" Height="20"> <ProgressBar.Triggers> <EventTrigger RoutedEvent="ProgressBar.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="progressBar1" Storyboard.TargetProperty="Value" From="0" To="100" Duration="0:0:5" /> </Storyboard> </BeginStoryboard> </EventTrigger> </ProgressBar.Triggers> </ProgressBar> </StatusBarItem> <Separator /> <StatusBarItem> <TextBlock>进度</TextBlock> </StatusBarItem> <StatusBarItem HorizontalAlignment="Right"> <Image Width="16" Height="16" Source="images/apple.jpg" /> </StatusBarItem> </StatusBar>
TabControl 选项卡
-
表示包含多个项的控件，这些项共享屏幕上的同一空间。
-
可用于 TabControl 最大程度地减少屏幕空间使用量，同时允许应用程序公开大量数据。 由 TabControl 共享同一屏幕空间的多个 TabItem 对象组成。 TabItemTabControl一次只有一个可见。 当用户选择 的 TabItem选项卡时，该选项卡的内容 TabItem 变为可见，而其他 TabItem 对象的内容将隐藏。
-
TabControl 是 ， ItemsControl这意味着它可以包含任何类型的对象集合， (如字符串、图像或面板) 。 有关更多信息，请参见 ItemsControl 类。
- XAML
<StackPanel Orientation="Vertical"> <GroupBox Width="300" Height="410"> <GroupBox.Header> <Label>员工数据</Label> </GroupBox.Header> <StackPanel> <TabControl Name="myTabControl" Height="350" Margin="0,0,0,10" TabStripPlacement="Top"> <TabItem Name="userInfo"> <TabItem.Header>_员工信息</TabItem.Header> <StackPanel> <TextBlock>雇员 / 从业员工</TextBlock> <TextBlock>选择您的姓名</TextBlock> <ListBox Name="empName"> <ListBoxItem IsSelected="true">埃丝特</ListBoxItem> <ListBoxItem>乔治</ListBoxItem> <ListBoxItem>艾伦</ListBoxItem> <ListBoxItem>艾瑞克</ListBoxItem> </ListBox> </StackPanel> </TabItem> <TabItem> <TabItem.Header>_职务信息</TabItem.Header> <StackPanel> <TextBlock>选择工作</TextBlock> <ListBox Name="job"> <ListBoxItem IsSelected="true">程序编制员</ListBoxItem> <ListBoxItem>试验者</ListBoxItem> <ListBoxItem>作者</ListBoxItem> <ListBoxItem>管理人员</ListBoxItem> </ListBox> </StackPanel> </TabItem> <TabItem Name="Skill"> <TabItem.Header>_技能</TabItem.Header> <StackPanel> <TextBlock> 选择你最强的技能 </TextBlock> <ListBox Name="skills"> <ListBoxItem IsSelected="true">C#</ListBoxItem> <ListBoxItem>Visual Basic</ListBoxItem> <ListBoxItem>.NET</ListBoxItem> <ListBoxItem>JScript</ListBoxItem> </ListBox> </StackPanel> </TabItem> </TabControl> <Button Click="Button_Click" Content="显示总结" /> </StackPanel> </GroupBox> </StackPanel> - C#
private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show(empName.SelectedValue.ToString() + job.SelectedValue.ToString() + skills.SelectedValue.ToString() ); }
- XAML
TextBlock 文本块
- TextBlock 控件为 WPF 应用程序提供灵活的文本支持。 该元素主要面向不需要多个文本段落的基本 UI 方案。
- 提供一个轻型控件，用于显示少量流内容。
- 可以在TextBlock其属性中包含字符串，也可以Inline在其InlinesText属性中包含流内容元素（如 Bold、 Hyperlink和 InlineUIContainer）。
- TextBlock 设计为轻量级，专门用于将少量流内容集成到用户界面 (UI) 。 TextBlock 针对单行显示进行了优化，并且为显示最多几行内容提供了良好的性能。
- TextBlock 未针对需要显示多行内容的方案进行优化;对于此类方案， FlowDocument 在性能方面，与 适当的查看控件相结合是比 TextBlock更好的选择。 之后 TextBlock， FlowDocumentScrollViewer 是用于显示流内容的下一个最轻量级控件，只需使用最少的 UI 即可提供滚动内容区域。 FlowDocumentPageViewer 围绕流内容的“一次一页”查看模式进行优化。 最后， FlowDocumentReader 支持用于查看流内容的最丰富集功能，但相应地更重。
- 水平对齐 中的 TextBlock 文本是使用 属性完成的 TextAlignment 。 TextBlock使用 和 VerticalAlignment 属性在页面布局内对齐 HorizontalAlignment 。
- XAML
<StackPanel Orientation="Vertical"> <TextBlock Name="textBlock1" TextWrapping="Wrap"> <Bold>TextBlock</Bold> is designed to be<Italic>lightweight</Italic> , and is geared specifically at integrating<Italic>small</Italic> portions of flow content into a UI.</TextBlock> <Button Width="100" Margin="10">Click Me, 无事件</Button> <TextBlock Name="textBlock2" Background="AntiqueWhite" TextAlignment="Center" TextWrapping="Wrap"> By default, a TextBlock provides no UI beyond simply displaying its contents. </TextBlock> <Button Width="100" Margin="10">Click Me，无事件</Button> </StackPanel>
TextBox 文本容器
- TextBox 控件提供对 WPF 应用程序中的基本文本输入的支持。
- 表示一个控件，该控件可用于显示或编辑无格式文本。
- XAML
<StackPanel Orientation="Vertical"> <TextBox Name="tbSettingText"> Initial text contents of the TextBox. </TextBox> </StackPanel>
ToolBar 工具栏
- 为一组命令或控件提供容器。
- ToolBar 控件提供了一种溢出机制，用于将不适合 的 ToolBar 项放入溢出区域。 用户只能移动父 ToolBarTray 项中的工具栏元素或调整其大小。
- ToolBar 是 ， HeaderedItemsControl这意味着其标头和对象的集合可以是任何类型的 (，例如字符串、图像或面板) 。 有关更多信息，请参见 HeaderedItemsControl 类。
- XAML
<StackPanel Orientation="Vertical"> <ToolBarTray Width="100" Background="White"> <ToolBar Band="1" BandIndex="1"> <Button> <Image Height="50" Source="/images/apple.jpg" /> </Button> <Separator /> <Button> <Image Height="50" Source="/images/apple.jpg" /> </Button> <Separator /> <Button> <Image Height="50" Source="/images/apple.jpg" /> </Button> </ToolBar> </ToolBarTray> </StackPanel>
ToolTip 提示
- 表示一个控件，该控件可创建一个弹出窗口，以便在界面中显示元素的信息。
- 是 ToolTip ， ContentControl这意味着它可以包含任何类型的单个对象， (如字符串、图像或面板) 。 有关更多信息，请参见 ContentControl 类。
- 使用 ToolTip 控件向用户提供信息。 例如，可以使用 ToolTip 在 中ToolBarTray提供 或 ToolBar 的名称Button。 控件的内容 ToolTip 可以从简单的文本字符串到更复杂的内容（例如 StackPanel 包含嵌入文本和图像的 ）。 ToolTip的内容无法接收焦点。
- 控件 ToolTip 不能具有父级。 例如，不能将 Content 的 Button 属性设置为 ，ToolTip而是将 FrameworkContentElement.ToolTip 分配给 ToolTip 和 FrameworkElement.ToolTip 属性。
- 可以通过在 中ResourceDictionary定义 来ToolTip对多个元素使用 ToolTip 。
- 类的属性 ToolTip 用于定义工具提示的位置和行为。 其中许多属性也在 类中 ToolTipService 定义。 如果其中一个属性的值由 ToolTip 属性和 ToolTipService 附加属性指定，则使用 属性的值 ToolTipService 。 此外， ToolTipService 类还提供用于设置计时行为的属性。 这些附加属性不包含在 类中， ToolTip 但可由 控件使用。
- XAML
<StackPanel Orientation="Vertical"> <TextBox HorizontalAlignment="Left"> ToolTip with non-text content <TextBox.ToolTip> <ToolTip> <DockPanel Width="50" Height="70"> <Image Source="image/apple.jpg" /> <TextBlock>Useful information goes here.</TextBlock> </DockPanel> </ToolTip> </TextBox.ToolTip> </TextBox> <Ellipse Width="50" Height="25" HorizontalAlignment="Left" Fill="Gray" ToolTipClosing="Ellipse_ToolTipClosing" ToolTipOpening="Ellipse_ToolTipOpening" ToolTipService.BetweenShowDelay="2000" ToolTipService.HasDropShadow="false" ToolTipService.HorizontalOffset="10" ToolTipService.InitialShowDelay="1000" ToolTipService.IsEnabled="true" ToolTipService.Placement="Right" ToolTipService.PlacementRectangle="50,0,0,0" ToolTipService.ShowDuration="7000" ToolTipService.ShowOnDisabled="true" ToolTipService.VerticalOffset="20"> <Ellipse.ToolTip> <BulletDecorator> <BulletDecorator.Bullet> <Ellipse Width="20" Height="10" Fill="Blue" /> </BulletDecorator.Bullet> <TextBlock>Uses the ToolTipService class</TextBlock> </BulletDecorator> </Ellipse.ToolTip> </Ellipse> </StackPanel> - C#
private void Ellipse_ToolTipClosing(object sender, ToolTipEventArgs e) { } private void Ellipse_ToolTipOpening(object sender, ToolTipEventArgs e) { }
TreeView 树形容器
- TreeView 控件使用可折叠的节点来显示层次结构中的信息。
- 表示一个控件，该控件在树结构（其中的项可以展开和折叠）中显示分层数据。
- TreeView 是 ， ItemsControl这意味着它可以包含任何类型的对象集合， (如字符串、图像或面板) 。 有关更多信息，请参见 ItemsControl 类。
- TreeView可以通过绑定到数据源并使用 HierarchicalDataTemplate 对象来填充其树。 数据源的示例包括
XmlDataProvider和ObservableCollection<T>对象。 - 显示大量项可能会导致性能问题。 有关详细信息 ，请参阅优化性能：控件 。 若要提高 的性能 TreeView，请参阅 如何：提高 TreeView 的性能。
- XAML
<StackPanel Orientation="Vertical"> <TreeView> <TreeViewItem Header="Employee1"> <TreeViewItem Header="Jesper" /> <TreeViewItem Header="Aaberg" /> <TreeViewItem Header="12345" /> </TreeViewItem> <TreeViewItem Header="Employee2"> <TreeViewItem Header="折叠"> <TreeViewItem Header="Jesper" /> <TreeViewItem Header="Employee1"> <TreeViewItem Header="Jesper" /> <TreeViewItem Header="Aaberg" /> <TreeViewItem Header="12345" /> </TreeViewItem> </TreeViewItem> <TreeViewItem Header="Paiha" /> <TreeViewItem Header="98765" /> </TreeViewItem> </TreeView> </StackPanel>
Viewbox 伸缩/缩放容器(暂时不明白)
- Viewbox 控件用于拉伸或缩放子元素。
- 定义一个内容修饰器，以便拉伸或缩放单一子项使其填满可用的控件。
- 只能 Viewbox 有一个 Child。 如果添加其他 Child，则会在运行时导致 ArgumentException 。
- XAML
<DockPanel> <StackPanel Margin="0,0,0,10" HorizontalAlignment="Center" DockPanel.Dock="Top" Orientation="Horizontal"> <Button Name="btn1" Click="stretchNone">Stretch="None"</Button> <Button Name="btn2" Click="stretchFill">Stretch="Fill"</Button> <Button Name="btn3" Click="stretchUni">Stretch="Uniform"</Button> <Button Name="btn4" Click="stretchUniFill">Stretch="UniformToFill"</Button> </StackPanel> <StackPanel Margin="0,0,0,10" HorizontalAlignment="Center" DockPanel.Dock="Top" Orientation="Horizontal"> <Button Name="btn5" Click="sdUpOnly">StretchDirection="UpOnly"</Button> <Button Name="btn6" Click="sdDownOnly">StretchDirection="DownOnly"</Button> <Button Name="btn7" Click="sdBoth">StretchDirection="Both"</Button> </StackPanel> <TextBlock Name="txt1" DockPanel.Dock="Top" /> <TextBlock Name="txt2" DockPanel.Dock="Top" /> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <Viewbox Name="vb1" MaxWidth="500" MaxHeight="500"> <Image Source="/images/apple.jpg" /> </Viewbox> </StackPanel> </DockPanel> - C#
private void stretchNone(object sender, RoutedEventArgs e) { vb1.Stretch = System.Windows.Media.Stretch.None; txt1.Text = "Stretch is now set to None."; } private void stretchFill(object sender, RoutedEventArgs e) { vb1.Stretch = System.Windows.Media.Stretch.Fill; txt1.Text = "Stretch is now set to Fill."; } private void stretchUni(object sender, RoutedEventArgs e) { vb1.Stretch = System.Windows.Media.Stretch.Uniform; txt1.Text = "Stretch is now set to Uniform."; } private void stretchUniFill(object sender, RoutedEventArgs e) { vb1.Stretch = System.Windows.Media.Stretch.UniformToFill; txt1.Text = "Stretch is now set to UniformToFill."; } private void sdUpOnly(object sender, RoutedEventArgs e) { vb1.StretchDirection = System.Windows.Controls.StretchDirection.UpOnly; txt2.Text = "StretchDirection is now UpOnly."; } private void sdDownOnly(object sender, RoutedEventArgs e) { vb1.StretchDirection = System.Windows.Controls.StretchDirection.DownOnly; txt2.Text = "StretchDirection is now DownOnly."; } private void sdBoth(object sender, RoutedEventArgs e) { vb1.StretchDirection = System.Windows.Controls.StretchDirection.Both; txt2.Text = "StretchDirection is now Both."; }