02 WPF 常用控件

基本控件使用

Border控件

在另一个元素四周绘制边框和/或背景（嵌套其他元素）

<Border Width="300" Height="100"
        Background="Red"
        BorderBrush="Black"
        BorderThickness="10"
        CornerRadius="10,20,30,40">
    <Label Background="Beige">带边框的Lable</Label>
</Border>

Background背景颜色
BorderBrush边框颜色
BorderThickness边框宽度，设置方法类似Margin
CornerRadius圆角半径，一个时表示设置四个角，设置四个时分别为左上、右上、右下、左下，当圆角半径大于等于自身尺寸一半时为圆形

Button控件

BorderBrush：获取或设置一个用于描述控件的边框背景的画笔。设置为Transparent透明的可以去边框
BorderThickness：获取或设置控件的边框宽度。设置为0透明的可以去边框
Click：点击事件
ClickMode：获取或设置 Click 事件何时发生。[|Press|Release]
- Hover 鼠标悬浮时触发
- Press 鼠标按下时触发
- Release 鼠标松开时触发

TextBlock控件

提供一个轻型控件，用于显示少量流内容。

Text显示文本（和标签内容共存，显示界面和运行界面不一致，需要运行一下。Text属性的内容在前面，标签内容在后面）
TextAlignment获取或设置一个值，该值指示文本内容的水平对齐方式
TextWrapping:获取或设置 TextBlock 对文本进行换行的方式。
- NoWrap 1 不执行换行。[默认值]
- Wrap 2 如果行溢出可用块宽度，即使标准换行算法不能确定换行时机，例如超长单词限制于固定宽度容器中而不允许滚动时，也将发生换行。
- WrapWithOverflow 0 如果行溢出可用块宽度，则将发生换行。但是，如果换行算法不能确定换行时机，例如超长单词限制于固定宽度容器中而不允许滚动时，行会溢出块宽度。
<LineBreak/>内容换行不能通过回车（会变成一个空格）或者 \r\n 来实现，只能使用该标签实现换行
<Bold>让包括的内容加粗

<TextBlock Background="BlueViolet"
           FontSize="25" Foreground="Yellow"
           Text="提供一个轻型控件，用于显示少量流内容"
           HorizontalAlignment="Center" VerticalAlignment="Top"
           TextAlignment="Center">
    <LineBreak />
    <Bold>12345</Bold>
    <LineBreak />
    abcde
</TextBlock>

排版(容器)控件

WPF中的基本控制面板类控件都是从 Panel 类中派生出来的，此类用于控制项目中的控件排列方式

StackPanel

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

属性：

Orientation指示子元素的堆叠维度
- Vertical垂直（默认）
- Horizontal水平

WrapPanel

WrapPanel的作用和使用方法和StackPanel相同，WrapPanel当内容无法排列时将会自动换行

属性：

Orientation指示子元素的堆叠维度
- Vertical垂直（默认）
- Horizontal水平

DockPanel

DockPanel 可以设定 UI 边缘的停靠位置。

<DockPanel>
  <Button DockPanel.Dock="Left">Left</Button>
  <Button DockPanel.Dock="Top">Top</Button>
  <Button DockPanel.Dock="Right">Right</Button>
  <Button DockPanel.Dock="Bottom">Bottom</Button>
  <Button>Center</Button>
</DockPanel>

以上对象元素将会产生如下效果

此例可见，先设置Dock属性的元素将会优先占满对应的位置，最后一个元素默认会占用剩余的空间，可以使用LastChildFill设置为False取消这个行为

Grid

Grid 将 UI 按表格式进行排列，需要自定义排列规则。

<Grid>
  <Grid.RowDefinitions>  // RowDefinitions 设置行
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions> // ColumnDefinitions 设置列
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Rectangle Grid.Row="0" Grid.Column="0" Fill="White" /> // Row 的值表示行坐标
  <Rectangle Grid.Row="1" Grid.Column="0" Fill="Black" /> // Column 的值表示列坐标
  <Rectangle Grid.Row="2" Grid.Column="0" Fill="Blue"  />
  <Rectangle Grid.Row="0" Grid.Column="1" Fill="Red"   />
  <Rectangle Grid.Row="0" Grid.Column="2" Fill="Yellow"/>
  <Rectangle Grid.Row="1" Grid.Column="1" Fill="Green" />
  <Rectangle Grid.Row="1" Grid.Column="2" Fill="Orange"/>
  <Rectangle Grid.Row="2" Grid.Column="1" Fill="Pink"  />
  <Rectangle Grid.Row="2" Grid.Column="2" Fill="violet"/>
</Grid>

Grid间隔

使用GridSplitter元素设置一个留白间隙,使用ResizeDirection属性设置重设行还是重设列

<GridSplitter Width="10" Grid.Column="2" Grid.Row="0"/>

设定 Grid 行或列的尺寸

Grid 调整 Grid 行列尺寸的方法有如下三种：

绝对尺寸，把 Grid 行列大小尺寸设为一个数值，Grid 的行列尺寸就不会随着其中 UI 的大小进行自动调整。
自动尺寸，把 Grid 的 Height 和 Width 设为 Auto 。Grid会自动根据当前行或列内容的最大尺寸设置
- Grid会自动根据当前行或列内容的最大尺寸设置
- 可以通过设置MinHeight、MinWidth，当内部没有控件时设置最小的尺寸
按比例分割行列尺寸，把有限的平面大小按照一定的比例划分宽高比，其比例的数值可以是浮点数。
- n*通过这样的表达方式表示对应的行和列占用几分之几，如1*、2*、2.5*表示分别占据1/5.5、2/5.5、2.5/5.5

跨行跨列

通过设置RowSpan、ColumnSpan设置一个控件占用多个格子

<Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="White" /> 
<Rectangle Grid.Row="0" Grid.Column="1" Fill="Red"   />
<Rectangle Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Fill="Yellow"/>
<Rectangle Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Fill="Black" />

呈现效果

注意跨列只能往右、跨行只能往下

设置多行或多列保持大小一致性

<Grid Grid.IsSharedSizeScope="True">  <!-- 在Grid上设置Grid.IsSharedSizeScope为true -->
    <Grid.RowDefinitions>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="g1"/>  <!-- 将需要大小一致的元素设置分组 -->
        <ColumnDefinition SharedSizeGroup="g2"/>
        <ColumnDefinition SharedSizeGroup="g1"/>
        <ColumnDefinition SharedSizeGroup="g2"/>
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Row="0" Grid.Column="0" Fill="Gold" Width="100"/>  
    <Rectangle Grid.Row="0" Grid.Column="1" Fill="Red" Width="50"/>
    <Rectangle Grid.Row="0" Grid.Column="2" Fill="Yellow"/>
    <Rectangle Grid.Row="0" Grid.Column="3" Fill="Green"/>
</Grid>

UniformGrid

UniformGrid 将其内部所有元素按当前面板大小进行统一尺寸，自动排列。

<UniformGrid>
  <TextBox Margin="5" Text="1"/>
  <TextBox Margin="5" Text="2"/>
  <TextBox Margin="5" Text="3"/>
  <TextBox Margin="5" Text="4"/>
  <TextBox Margin="5" Text="5"/>
</UniformGrid>

Canvas 画布面板

Canvas 可对其内部元素设定边界值，其作用类似于（Margin），默认为停靠左上角。

<Canvas>
  <TextBox Text="左上角" Width="100" Height="100" Canvas.Top="0" Canvas.Left="0"/>
  <TextBox Text="右上角" Width="100" Height="100" Canvas.Top="0" Canvas.Right="0"/>
  <TextBox Text="右下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Right="0"/>
  <TextBox Text="左下角" Width="100" Height="100" Canvas.Bottom="0" Canvas.Left="0"/>
</Canvas>

后面的元素将会出现在前面的元素上面，但是也可以使用Panel.ZIndex属性设置他们的层级关系，值越大，处于的层级越高

注意：

Canvas的默认值 Height 和 Width 属性为零，除非它是自动调整其子元素大小的元素的子元素，如：Label、Button.....。

Canvas 的子元素永远不会自动调整大小，它们只是定位在其指定的坐标处。

Top和Left的优先级高于Bottom和Right，如果设置了Top和Left，则Bottom和Right将会失效

ScrollViewer 滚动容器

当窗口中的内容比窗口的大小要大时，通常要在窗口中显示滚动条。在WPF中显示滚动条要用到ScrollViewer类，这是一个内容控件，和所有的内容控件一样，它只能含有一个子控件。

属性	描述
CanContentScroll	获取或设置窗口是否支持滚动
HorizontalScrollBarVisibility	获取或设置是否显示水平滚动条
VerticalScrollBarVisibility	获取或设置是否显示垂直滚动条
PanningDeceleration	获取或设置滚动条的滚动速率

<ScrollViewer HorizontalScrollBarVisibility="Auto">
  <StackPanel>
    <Button Content="Start" HorizontalAlignment="Center" Background="LightGreen" 
           Height="20" Width="550" Margin="5"/>
    <Rectangle Fill="LightBlue" Height="300" Width="550"/>
    <TextBlock Text="END" TextAlignment="Center" Background="LightCoral" 
           Height="20" Width="550" Margin="5"/>
  </StackPanel>
</ScrollViewer>

内容控件

WPF 的所有控件都是从 System.Windows.Controls.Control 类中派生出来，其命名空间是System.Windows.Controls 。

WPF有两个类似的类继承树，一个与界面（ UI ）相关，如 UIElement 类；另一个与内容（ Content ）相关，如 ContentElement。

ContentElement 支持文本方式，而 UIElement 则支持图形方式。

按钮基类

WPF 中的按钮都是从 ButtonBase 抽象类中派生出来。

ButtonBase 常用属性	描述
Name	获取或设置元素的唯一标识名称
Background	获取或设置控件填充背景画笔
Foreground	获取或设置控件前景色的画笔
BorderBrush	获取或设置控件边框颜色画笔
BorderThickness	获取或设置控件的边框宽度
Opacity	获取或设置控件的不透明度
Content	获取或设置控件中的文字内容
Margin	获取或设置元素的外边距
MaxHeight	获取或设置元素的最大高度约束
MaxWidth	获取或设置元素的最大宽度约束
MinHeight	获取或设置元素的最小高度约束
MinWidth	获取或设置元素的最小宽度约束
Height	获取或设置元素的高度
Width	获取或设置元素的宽度
HorizontalAlignment	获取或设置在父元素中此元素的水平对齐方式
HorizontalContentAlignment	获取或设置控件内容的水平对齐方式
VerticalAlignment	获取或设置在父元素中此元素的垂直对齐方式
VerticalContentAlignment	获取或设置控件内容的垂直对齐方式
Visibility	获取或设置此元素的可见性
Cursor	获取或设置在鼠标位于此元素上时显示的光标
FontFamily	获取或设置控件的字体系列
FontSize	获取或设置字号
FontWeight	获取或设置指定字体的粗细
Command（重点）	获取或设置在按下按钮时调用的命令
CommandParameter（重点）	获取或设置要传递给 Command 属性的参数
CommandTarget（重点）	获取或设置要引发指定命令的对象
ContentTemplate（重点）	获取或设置用于显示 ContentControl 内容的数据模板
ContentTemplateSelector（重点）	获取或设置一个模板选择器，以使应用程序编写器能够提供自定义模板选择逻辑
Template（重点）	获取或设置控件模板
Style（重点）	获取或设置此元素呈现时所使用的样式
ToolTip	获取或设置在用户界面中为此元素显示的工具提示对象
Triggers（重点）	获取直接在此元素上或在子元素中建立的触发器的集合
IsCancel	获取或设置一个值，该值指示 Button 是否是一个“取消”按钮。用户可以通过按 ESC 键来激活 Cancel 按钮
IsDefault	获取或设置一个值，该值指示 Button 是否是一个默认按钮。用户可以通过按 ENTER 键调用默认按钮
ClickMode	获取或设置 Click 事件何时发生

ButtonBase 常用事件	描述
Click	在单击 Button 时发生
MouseDoubleClick	在双击或多次单击鼠标按钮时发生
MouseDown	在鼠标位于此元素上并且按下任意鼠标按钮时发生
MouseEnter	在鼠标进入此元素的边界时发生
MouseLeave	在鼠标离开此元素的边界时发生
MouseLeftButtonDown	在鼠标位于此元素上并且按下鼠标左键时发生
MouseLeftButtonUp	在鼠标位于此元素上并且松开鼠标左键时发生
MouseMove	在鼠标位于此元素上并且移动鼠标指针时发生
MouseRightButtonDown	在鼠标位于此元素上并且按下鼠标右键时发生
MouseRightButtonUp	在鼠标位于此元素上并且松开鼠标右键时发生
MouseUp	在鼠标位于此元素上并且松开任意鼠标按钮时发生
MouseWheel	在鼠标位于此元素上并且用户滚动鼠标滚轮时发生

普通按钮（Button）

<Button>按钮内容</Button>

多选按钮（CheckBox）

CheckBox 控件用在可以有多个选项，而又可以同时选择两个或两个以上选项的情况下或者某个选项的开启和关闭

有时，我们需要拨动按钮维持三个状态，这时我们把 IsThreeeState 属性设为 True ，这时，IsChecked 的属性值可取三个值： True, False 和 Null 。

<CheckBox Content="选框描述" IsThreeeState="True"/>

常用事件	发生条件
Checked	当 IsChecked 为 True 时，产生该事件
UnChecked	当 IsChecked 为 False 时，产生该事件
Indeterminate	当 IsChecked 为 Null 时，产生该事件

单选按钮（RadioButton）

单选按钮不提供取消选中的操作，如果要取消选中，必须选中另一个选项，或者使用代码操作

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
  <RadioButton Content="男" Checked="RadioButton_Checked" />
  <RadioButton Content="女" Checked="RadioButton_Checked"/>
  <!-- 相同GroupName的单选框被分为一组，没有组的自成一组 -->
  <RadioButton Content="一班" GroupName="class" Checked="RadioButton_Checked" />
  <RadioButton Content="二班" GroupName="class" Checked="RadioButton_Checked" />
  <RadioButton Content="三班" GroupName="class" Checked="RadioButton_Checked" />
</StackPanel>

要对单选按钮进行分组的另一种方式是通过将他们放在不同的容器中

重复按钮（RepeatButton）

重复按钮可以在按下鼠标左键至施放按钮期间，不停地发出单击 Click 事件。这种特性在某些情况下很有用，比如视频的快进或快退键。

常用属性	描述
Delay	获取或设置开始重复前被按下时等待的时间（以毫秒为单位）。该值必须为非负数
Interval	获取或设置开始重复后重复之间的时间间隔（以毫秒为单位）。该值必须为非负数

实现一个累加器，长按增加连续增加，减少亦然

标题栏内容控件

标题栏内容控件一般用在需要带有标题的情况，它并没有太大的作用，通常我们不直接使用 HeaderedContentControl 控件，而是使用他的派生类：分组框和伸展控件

常用属性	描述
Header	获取或设置标题
BorderThickness	获取或设置边框线条大小
Foreground	获取或设置边框颜色

分组框（GroupBox）

分组框（GroupBox）作用是把一些相近的控件放在一起，同时用一个带标题的边框把它们组合起来。

<GroupBox HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="200">
    <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
            <TextBlock>学生信息</TextBlock>
            <Image Source="./wallhaven-1pr8k9.jpg" Width="20" Height="20" Margin="5,-5,0,0" />
        </StackPanel>
    </GroupBox.Header>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <Label Content="姓名：" Height="27"></Label>
            <TextBox Width="192" Height="29"></TextBox>
        </StackPanel>
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <Label Content="年龄：" Height="27"></Label>
            <TextBox Width="192" Height="29"></TextBox>
        </StackPanel>
    </Grid>
</GroupBox>

伸展控件（Expander）

伸展控件可以将内容压缩，在需要时，才展示内容，可以极大的节省页面空间。

常用属性	描述
ExpandDirection	获取或设置伸缩方向
IsExpanded	获取或设置当前控件是否展开

<Expander Header="年度最佳班级" Background="Tan" HorizontalAlignment="Left" 
          ExpandDirection="Down" IsExpanded="True" Height="220" Width="495">
    <StackPanel Margin="10">
        <RadioButton Content="一班" FontSize="16"/>
        <RadioButton Content="二班" FontSize="16"/>
        <RadioButton Content="三班" FontSize="16"/>
        <RadioButton Content="四班" FontSize="16"/>
    </StackPanel>
</Expander>

标签控件（Lable）

标签控件可以在窗口的某个地方显示字符串。

在WPF里，TextBlock 和 TextBox 等都可以用来显示字符串。标签控件区别于 TextBlock 和TextBox 的功能主要有两点：

1．在默认的情况下，标签控件是只读的，颜色是灰色的；

2．标签控件内置了一个AccessText控件，可以直接设定热键到目标控件。

常用属性	描述
Target	绑定描述的输入框，使其聚焦
Content	在该属性中使用`_key`绑定快捷键

<Label Target="{Binding ElementName=tb}" Foreground="LightGreen" Content="快捷键（_p）"/>
<TextBox x:Name="tb" Text="同时按下 Alt 和 p 键,可获取输入焦点"/>
<Label Target="{Binding ElementName=tb1}" Foreground="LightGreen" Content="快捷键（_o）"/>
<TextBox x:Name="tb1" Text="同时按下 Alt 和 o 键，可获取输入焦点"/>

热键设置

通过 AccessText 标记创建一个 AccessKey ，用下划线来指定用作访问键的字符。

如果内容包含多个下划线字符，则只会将第一个下划线字符转换为 AccessKey 其他下划线将显示为普通文本。如果要转换为访问键的下划线不是第一个下划线，则使用两个连续的下划线。

<Button Height="50" Width="200" HorizontalAlignment="Center">
  <AccessText Text="我有热键 _p"/>
</Button>
<TextBlock Height="50" Width="200" HorizontalAlignment="Center" Background="LightBlue">
  <AccessText  Text="我有热键 _t"/>
</TextBlock>
<CheckBox Width="200">
  <AccessText Text="我有热键 _c" Foreground="LightGreen"/>
</CheckBox>
<RadioButton Width="200">
  <AccessText Text="我有热键 _a" Foreground="LightGreen"/>
</RadioButton>

提示控件（ToolTip）

提示控件，该控件可创建一个弹出窗口，以便在界面中显示元素的信息。

常用属性	描述
IsOpen	获取或设置 ToolTip 是否可见
Placement（可选值）	获取或设置 ToolTip 控件打开时的方向，并指定 ToolTip 控件在与屏幕边界重叠时的行为，关于位置可参考Popup 放置行为
PlacementRectangle	获取或设置 ToolTip 控件打开时所在位置，属性值`Left,Top,Right,Botton`

<TextBox HorizontalAlignment="Left" Height="30" Width="200">鼠标移动到此处会出现提示框
  <TextBox.ToolTip>
    <ToolTip >
      <StackPanel Orientation="Vertical">
        <Image Source="./Image/liulanqi.png"/>
        <TextBlock>这是一个有意思的提示框</TextBlock>
        <Button Content="我是Button" Background="LightBlue"/>
      </StackPanel>
    </ToolTip>
  </TextBox.ToolTip>
</TextBox>

使用ToolTip需要注意下述两点：

ToolTip 虽然是一个控件，但其本身不具备接收用户输入的功能。比如上面的例子中，在ToolTip 中使用了 Button，你就无法点击 Button。
ToolTip 虽然是一个控件，但它不能像其他控件那样作为其他控件的子控件，它必须和某个控件的 ToolTip 属性相连。

Image 图像

类 Image 使你能够加载以下图像类型：.bmp、.gif、.ico、.jpg、.png、.wdp 和 .tiff。

显示多帧图像时，仅显示第一帧。控件不支持多帧图像的 Image 动画。

Source 获取或设置图像的 ImageSource。
Stretch获取或设置一个值，该值描述应如何拉伸 Image 以填充目标矩形。
- Fill 1 调整内容大小以填充目标尺寸。不保留纵横比。
- None 0 内容保持其原始大小。
- Uniform 2 在保留内容原有纵横比的同时调整内容的大小，以适合目标尺寸。
- UniformToFill 3 在保留内容原有纵横比的同时调整内容的大小，以填充目标尺寸。如果目标矩形的纵横比不同于源矩形的纵横比，则对源内容进行剪裁以适合目标尺寸

注意：

对于固定大小控件， Width 可以设置和/或 Height 属性。但是，若要保留媒体的纵横比，请设置或 Height 属性，Width但不能同时设置两者。

条目控件

WPF 控件的另一大类就是 ItemsControl，它是直接从 Control 类中派生出来的。

与内容控件中只能含有一个控件不同，ItemsControl 中含有 Items 属性，这个属性具有 ItemCollection 类型，在内容控件中，其内容可以是任何一个Object类型的对象；在Items属性中则可以加入任何一个 Object 类型的对象。

ItemsControl 类中还有一个重要的属性 ItemsSource，这个属性是用来作数据绑定。需要注意的是，一旦我们使用了 ItemsSource 属性，Items 属性就会被自动设置为 null。这表明只能使用 ItemsSource 和 Items 两个属性当中的一个，而且 ItemsSource 具有更高的优先级。

条目控件可以分成两类，一类是可以放条目的条目包容器，一类是条目本身。

条目包容器类	条目类
ComboBox	ComboBoxItem
ContextMenu	MenuItem
ListBox	ListBoxItem
ListView	ListViewItem
Menu	MenuItem
StatusBar	StatusBarItem
TabControl	TabItem
TreeView	TreeViewItem

菜单里面含有菜单条目（MenuItem），MenuItem 是一个带有标题的条目控件，它从HeaderedItemControl 类中派生出来。菜单条目下会有子菜单，子菜单的条目下还会有下一层的子菜单，等等。

Menu 控件显示用于为应用程序指定命令或选项的项列表。通常，单击菜单上的项会打开子菜单或导致应用程序执行命令。
Menu 是继承于 ItemsControl 这意味着它可以包含任何类型的对象集合， (如字符串、图像或面板) 。
有关更多信息，请参见 ItemsControl 类。 MenuItem 是中 Menu 最常见的项类型。
可以 MenuItem 包含子项。当用户选择父 MenuItem 级时，子项将显示在子菜单。

常用属性	描述
Header	获取或设置菜单的标题，可以使用 `_X` 的形式创建快捷键
Icon	获取或设置菜单图标
InputGestureText	获取或设置菜单描述
IsCheckable	获取或设置菜单是否可被选中
IsChecked	获取或设置菜单的选中状态
IsSubmenuOpen	获取或设置菜单是否打开
StaysOpenOnClick	获取或设置菜单被点击时是否关闭
Command	绑定到选项上的命令，可选值详见
InputGestureText	显示在菜单项右侧的文本，一般用于快捷键提示

菜单有两种用法，一种是下拉式菜单（Menu），另一种是弹出菜单（ContextMenu）。

硬代码直接编写xaml

<Menu VerticalContentAlignment="Center">
    <MenuItem Header="文件(_F)"></MenuItem>
    <MenuItem Header="编辑(_E)">
        <MenuItem Header="转到(_G)" IsCheckable="True"/>
        <MenuItem Header="查找和替换(_F)">
            <MenuItem.Icon>
                <Image Width="15" Height="15" Source="./images/8666681_edit_icon.png"></Image>
            </MenuItem.Icon>
            <MenuItem Header="字体加粗" IsCheckable="True" Checked="MenuItem_Checked" Unchecked="MenuItem_Unchecked"></MenuItem>
            <MenuItem Header="点我试试" Click="MenuItem_Click"></MenuItem>
            <MenuItem Header="在文件中查找"></MenuItem>
            <MenuItem Header="在文件中替换"></MenuItem>
        </MenuItem>
        <MenuItem Header="撤销(_U)"></MenuItem>
        <MenuItem Header="复制(_C)" Command="ApplicationCommands.Copy"></MenuItem>
        <MenuItem Header="粘贴(_P)" Command="ApplicationCommands.Paste"></MenuItem>
        <MenuItem Header="剪切(_T)" Command="ApplicationCommands.Cut"></MenuItem>
    </MenuItem>
    <MenuItem Header="视图(_V)"></MenuItem>
    <MenuItem Header="Git(_G)"></MenuItem>
</Menu>

上例中为某些菜单绑定了Command属性，用于执行某些命令，这些是.net内置的命令，我们也可以创建一些自己的命令，并绑定自己的快捷键，步骤如下

<!--1.使用路由UI对Command的设置-->
<Window.Resources>
    <!--myCmd 路由设置的命令-->
    <RoutedUICommand x:Key="myCmd" />
    <RoutedUICommand x:Key="myXXX" />
</Window.Resources>
<!--2.使用命令绑定 CommandBind-->
<Window.CommandBindings>
    <!--Executed 监听路由中转方法（点击）-->
    <CommandBinding Command="{StaticResource myCmd}" Executed="CommandBinding_Executed" />
    <CommandBinding Command="{StaticResource myXXX}" Executed="CommandBinding_Executed_1" />
</Window.CommandBindings>
<!--3.输入绑定 InputBinding（快捷键）-->
<Window.InputBindings>
    <!--同样绑定到上面的路由UI上-->
    <!--Gesture：手势；-->
    <!--Gesture：组合键（相当于快捷键。但是跟控件上的Ctrl+8没关系，控件仅仅只是显示）。
        执行过程：通过 Gesture="Ctrl+8" 找到 myXXX 命令，进而找到 Executed 事件-->
    <!--也可以通过右边属性面板设置：Key="N"-->
    <KeyBinding Command="{StaticResource myXXX}" Gesture="Ctrl+8" />
</Window.InputBindings>

<!-- 在某个控件上绑定对应的命令 -->
<MenuItem Header="出入库管理" Foreground="Black" FontFamily="华文楷体" Height="25" Command="{StaticResource myCmd}" InputGestureText="Ctrl+8"></MenuItem>

ContextMenu

<TextBox Name="textBox1" TextWrapping="Wrap" Margin="10">
  点击右键弹出菜单......
  <TextBox.ContextMenu>
    <ContextMenu>
      <MenuItem Header="字体加粗" IsCheckable="True" Checked="Bold_Checked" Unchecked="Bold_Unchecked" />
      <MenuItem Header="字体倾斜" IsCheckable="True" Checked="Italic_Checked" Unchecked="Italic_Unchecked" />
      <Separator/>
      <MenuItem Header="字体增大" Click="IncreaseFont_Click" />
      <MenuItem Header="字体减小" Click="DecreaseFont_Click" />
    </ContextMenu>
  </TextBox.ContextMenu>
</TextBox>

工具条（ToolBar）

工具条用于为常用功能提供快捷入口并提供功能提示。

使用工具条要涉及两个类：ToolBarTray 和 ToolBar。ToolBarTray 含有一个或多个 ToolBar ，ToolBar 中含有一个或多个WPF控件。这里的控件通常是 Button、CheckBox、ListBox、ComboBox 和 TextBox 等。

ToolBarTray 负责工具条的排版，ToolBar 负责工具条的内容。

常用属性	描述
IsOverflowOpen	获取或设置 ToolBar 溢出区当前是否可见
Band	获取或设置 ToolBar 所在行
BandIndex	获取或设置 ToolBar 所在列
Orientation	获取或设置 ToolBar 停靠方向（ToolBarTray）

<ToolBarTray>
  <ToolBar Width="100">
    <Button>按钮1</Button>
    <Button>按钮2</Button>
    <Button>按钮3</Button>
  </ToolBar>
  <ToolBar Band="1">
    <Button>编辑1</Button>
    <Button>编辑2</Button>
    <Separator />
    <TextBox Width="130"/>
  </ToolBar>
</ToolBarTray>

组合框

Selector 类

Selector 类是一个抽象类，不可以直接创建 Selector 对象。

Selector 类是下面三个条目控件的基类：

ComboBox
ListBox
TabControl

这三个控件共同的特点是：其中包含一个或多个条目供用户选择。

常用属性	描述
SelectedIndex	获取或设置被选中条目的序号
SelectedItem	获取或设置被选中条目的对象
SelectedValue	获取或设置条目的数据
SelectedPath	获取或设置条目的数据来源

组合框（ComboBox）

组合框是一组带有下拉列表的选择控件，通过单击控件上的箭头可显示或隐藏下拉列表。

常用属性	描述
IsDropDownOpen	获取或设置组合框下拉列表是否展开
IsEditable	获取或设置启用或禁用编辑文本框中文本的 ComboBox
IsReadOnly	获取或设置所选内容只读不可编辑
SelectedIndex	获取或设置当前选择中第一项的索引，如果选择为空，则返回负一(-1)
SelectedItem	获取或设置当前选择中的项，或者，如果选择为空，则返回 null。
SelectedValue	获取或设置通过使用 SelectedItem 而获取的 SelectedValuePath 的值。
DisplayMemberPath	当ComboBox绑定了一个List，并且List的项是一个对象时，使用该属性指定控件显示的内容
SelectedValuePath	获取或设置用于从 SelectedValue 获取 SelectedItem 的路径。

<!-- 静态选项 -->
<ComboBox TextBoxBase.SelectionChanged="comboBox_SelectionChanged" IsEditable="True">
  <Label>1</Label>
  <Label>2</Label>
  <Label>3</Label>
  <CheckBox>年级</CheckBox>
  <CheckBox>性别</CheckBox>
  <ComboBoxItem>
      <TextBlock>张三</TextBlock>
  </ComboBoxItem>
  <ComboBoxItem>
      <TextBlock>李四</TextBlock>
  </ComboBoxItem>
  <ComboBoxItem>
      <TextBlock>王五</TextBlock>
  </ComboBoxItem>
</ComboBox>
<!-- 动态选项，使用Binding绑定一个List -->
<ComboBox
  ItemsSource="{Binding lists}"
/>

public MainWindow()
{
  InitializeComponent();
  this.lists = new List<string>()
  {
      "唱歌",
      "跳舞"
  };
  this.DataContext = this;
}

还可能会用到的方案是使用代码手动添加，有以下几种方案

// 1. 使用 items
this.cb.Items.Add("软件1班");
this.cb.Items.Add("软件2班");
this.cb.Items.Add("网络1班");
this.cb.Items.Add("网络2班");

// 2. 使用 ItemSource 进行绑定
List<StudentClass> lists = new List<StudentClass>();
lists.Add(new StudentClass() { ClassName = "软件1班", ClassId = "1" });
lists.Add(new StudentClass() { ClassName = "软件2班", ClassId = "2" });
lists.Add(new StudentClass() { ClassName = "网络1班", ClassId = "3" });
lists.Add(new StudentClass() { ClassName = "网络2班", ClassId = "4" });
lists.Add(new StudentClass() { ClassName = "计算机1班", ClassId = "5" });
this.cb.ItemsSource = lists; // 类似于DataSource
this.cb.DisplayMemberPath = "ClassName";
this.cb.SelectedValuePath = "ClassId";

标签控件（TabControl）

标签控件，该控件将多个控件包含在同一空间中，可以节省页面空间。

<TabControl>
  <TabItem Header="1">
    <StackPanel >
        <TextBlock Text="测试1"/>
    </StackPanel>
  </TabItem>
  <TabItem>
    <TabItem.Header>2</TabItem.Header>
    <StackPanel>
        <TextBlock Text="测试2"/>
    </StackPanel>
  </TabItem>
</TabControl>

列表框（listBox）

列表框，该控件包含一个或多个可选项列表，提供用户选择操作。

ListBox 中含有至少一个 ListBoxItem 。ListBoxItem 从内容控件 (ContentControl) 中派生出来，因此具有内容控件的特征。

ListBox 中有一个 SelectionMode 属性，该属性为枚举类型。可以取 Single、Multiple 和 Extended 三个值。

Single：用户只能选择 ListBox 中一个条目；
Multiple ：用户可以选择 ListBox 中多个条目；
Extended：用户需要按下“SHIFT”键，才能选择ListBox中的多个条目；

由于 ListBox 允许用户选择多个 ListBoxItem，所以它有一个 SelectedItems 。这是一个集合，其中含有用户选择的多个条目。

<ListBox SelectionMode="Multiple">
    <ListBoxItem>选项1</ListBoxItem>
    <ListBoxItem>选项2</ListBoxItem>
    <ListBoxItem>选项3</ListBoxItem>
</ListBox>  

<!-- 动态绑定 -->
<ListBox ItemsSource="{Binding Names,ElementName=main}"/>
<!-- 自定义模板 -->
<ListBox ItemsSource="{Binding Names,ElementName=main}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <WrapPanel>
                <Rectangle Width="10" Height="10" Fill="red"/>
                <CheckBox VerticalAlignment="Center"/>
                <!-- 直接绑定数据项 -->
                <Label Content="{Binding}"/>
            </WrapPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

列表控件（ListView）

列表控件用于显示数据项列表。

<ListView ItemsSource="{Binding datas}">
  <ListView.View>
    <GridView>
      <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Path=Name}"/>
      <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Path=Age}"/>
      <GridViewColumn Header="性别" DisplayMemberBinding="{Binding Path=Sex}"/>
    </GridView>
  </ListView.View>
</ListView>

public List<People> datas { get; set; }
public MainWindow()
{
    InitializeComponent();
    this.datas = new List<People>()
    {
        new People() {Name="张三", Age = 12, Sex="男"},
        new People() {Name="李四", Age = 13, Sex="女"},
        new People() {Name="王五", Age = 14, Sex="男"},
    };
    this.DataContext = this;
}
public class People
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Sex { get; set; }
}

状态条（StatusBar）

状态条，主要用于应用程序窗口的水平栏中显示项和信息

<StatusBar VerticalAlignment="Top">
    <StatusBarItem>
        <TextBlock Text="下载进度"/>
    </StatusBarItem>
    <StatusBarItem>
        <ProgressBar Value="4" Maximum="10" Width="200" Height="20"/>
    </StatusBarItem>
    <!-- 分割 -->
    <Separator/>
    <TextBlock Text="耗时：5S  "/>
    <Separator/>
    <TextBlock Text="大小：5MB "/>
</StatusBar>

树形控件（TreeView）

树形控件，以树状结构（其中的项可以展开和折叠）显示分层数据。

1）TreeView中的相关属性：

属性	描述
SelectedItem	获取表示当前选中条目
SelectedValue	获取当前节点上的值
SelectedValuePath	读写属性，用于绑定数据

2）TreeViewItem中的相关属性：

属性	描述
IsExpanded	获取或设置节点是否展开
IsSelected	获取或设置当前节点是否被选中
IsSelectionActive	获取当前节点是否具备输入焦点

静态填充数据

<TreeView SelectedItemChanged="TreeChange">
    <TreeViewItem Header="三年一班">
        <TreeViewItem Header="一组"/>
        <TreeViewItem Header="二组"/>
    </TreeViewItem>
    <TreeViewItem Header="三年二班">
        <TreeViewItem Header="一组"/>
        <TreeViewItem Header="二组"/>
    </TreeViewItem>
</TreeView>

动态填充数据

<!--绑定数据源-->
<TreeView ItemsSource="{Binding Path=MenuInfos}">
    <!--TreeView.ItemTemplate：表示你要自定义 TreeViewItem-->
    <TreeView.ItemTemplate>
        <!--HierarchicalDataTemplate：出现层级结构的时候使用该模板（一层套一层）-->
        <!--
        DataType    设置该菜单的数据类型
        ItemsSource 设置该菜单的子菜单是哪个属性存储的
        -->
        <HierarchicalDataTemplate DataType="local:MenuInfo" ItemsSource="{Binding Path=SubMenus}">
            <!-- 展示菜单项 -->
            <TextBlock Text="{Binding MenuName}"/>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

// MenuInfo.cs     用于创建菜单类
public class MenuInfo
{
    // 菜单名称
    public string MenuName { get; set; }
    // 子菜单(声明为可空类型)
    public List<MenuInfo> SubMenus { get; set; }

    // 构造函数
    public MenuInfo(string menuName, MenuInfo parentMenu)
    {
        this.MenuName = menuName;
        // 如果当前这个菜单有父级菜单，那么把当前菜单this添加到父级菜单的SubMenus集合中
        if (parentMenu != null)
        {
            // 判断它的父级菜单是否有子菜单，有就直接添加进去，没有创建一个新集合列表
            if(parentMenu.SubMenus is null) parentMenu .SubMenus = new List<MenuInfo>();
            parentMenu.SubMenus.Add(this);
        }
    }
}

// xxx.xaml.cs    窗体的隐藏代码
public partial class MainWindow : Window
{
    public List<MenuInfo> MenuInfos { get; set; } = new List<MenuInfo>();  // 存储菜单
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;

        // 生成菜单
        MenuInfos = new List<MenuInfo>();

        // 一级菜单
        MenuInfo info1 = new MenuInfo("出入库管理", null);
        MenuInfo info2 = new MenuInfo("请假管理", null);
        MenuInfo info3 = new MenuInfo("商品管理", null);
        MenuInfos.Add(info1);
        MenuInfos.Add(info2);
        MenuInfos.Add(info3);

        // 二级菜单
        new MenuInfo("1_1", info1);
        new MenuInfo("1_2", info1);
        MenuInfo info3_1 = new MenuInfo("单位管理", info3);
        MenuInfo info3_2 = new MenuInfo("类别管理", info3);

        // 三级菜单
        new MenuInfo("单位管理_1", info3_1);
        new MenuInfo("单位管理_2", info3_1);
        new MenuInfo("类别管理_1", info3_2);
        new MenuInfo("类别管理_2", info3_2);
    }
}

Calendar 日历

Calendar 类：代表一个控件，此控件允许用户使用可视的日历显示来选择日期。备注：仅支持公历。

Calendar.SelectionMode 指定用户是否可以选择日期、日期范围或多个日期范围。
- SingleDate0可以选择单个日期。使用 SelectedDate 属性可检索所选日期。
- SingleRange 1 只能选择一个日期范围。使用 SelectedDates 属性可检索所选日期
- MultipleRange 2 可以选择多个非连续范围的日期。按住 shift、或者拖拽范围多个范围。使用SelectedDates 属性可检索所选日期。
- None 3 不允许选定内容。
SelectedDate="9/15/2023" | "2023-9-23"：默认选中的时间
DisplayDate="3/15/2009" 获取或设置要显示的日期
DisplayDateStart="2023-01-01" DisplayDateEnd="2023-06-01"可以选择的起始时间和结束时间
DisplayMode获取或设置一个值，该值指示日历是显示月份、年份还是十年期。
- Decade 2 Calendar 一次显示一个十年。
- Month 0 Calendar 一次显示一个月。
- Year 1 Calendar 一次显示一年

DatePicker 日期选择器

Calendar 控件可以单独使用，也可以用作 DatePicker 控件的下拉部分。有关详细信息，请参阅 DatePicker。

<DatePicker SelectedDate="3/23/09" DisplayDateStart="1/01/09" DisplayDateEnd="12/31/09" FirstDayOfWeek="Monday"/>

文本控件

文本控件包括：密码输入框、基本输入框、富文本输入框

TextBoxBase 是 TextBox 和 RichTextBox 的基类，它是一个不能实例化的抽象类。

密码输入框（PasswordBox）

密码输入框，用于输入和处理密码的控件。

属性	描述
MaxLength	获取或设置密码的最大长度
PasswordChar	获取或设置密码的掩码字符
Password	获取或设置当前保留的密码

输入框（TextBoxBase）

TextBox 常用属性

由于 TextBox 和 RichTextBox 都是以 TextBoxBase 为基类，所以这些属性对两种文本输入控件都有效。

属性	描述
AcceptsReturn	是否支持输入 Enter 键换行
AcceptsTab	是否支持插入tab控制符
AutoWordSelection	是否支持自动选择整个词
CanRedo	是否支持重做前一个动作
CanUndo	是否支持撤销前一个动作
HorizontalOffset	获取或设置水平滚动条位置
HorizontalScrollBarVisibility	是否显示水平滚动条
VerticalOffset	获取或设置垂直滚动条的位置
VerticalScrollBarVisibility	是否显示垂直滚动条
IsReadOnly	是否只读
IsUndoEnabled	是否支持恢复操作
UndoLimit	获取或设置可以恢复的动作次数
AcceptsReturn	获取或设置一个值，该值指示在用户按 ENTER 键时文本编辑控件如何响应
AcceptsTab	获取或设置一个值，该值指示在用户按 TAB 键时文本编辑控件如何响应

文字输入框（TextBox）

文字输入框，该控件可用于显示或编辑无格式文本。

文字输入框是一个非常常用的控件，它是由多个控件组成的，其中含有Border、ScrollViewer、Grid、Rectangle、TextView、ScrollBar等一些控件。

属性	描述
MinLines	获取或设置最小可见行数
MaxLines	获取或设置最大可见行数
Text	获取或设置文本框的文本内容
CharacterCasing	枚举类，获取或设置输入字符的大小写
TextAlignment	枚举类，获取或设置文本框的内容的水平对齐方式
SelectionLength	获取或设置当前所选内容的字符数
LineCount	获取文本框中的总行数
SelectedText	获取或设置文本框中当前选择的内容
TextWrapping	枚举类，获取或设置文本的换行方式
MaxLength	获取或设置文本框中输入的最大字符数
SelectionBrush	获取或设置会突出显示选定文本的画笔。

事件	描述
TextChanged	在文本元素中的内容更改的情况下发生。
PreviewMouseUp PreviewMouseDown	鼠标按下和抬起事件已经被TextBox已经处理了，因此不会生效，需要使用`PreviewXXXXX`事件

超链接（Hyperlink）

提供用于在流内容中承载超链接的功能的内联级别的流内容元素。必须用在TextBlock或者其他的文本容器中

<Hyperlink NavigateUri="https://www.baidu.com" Click="Hyperlink_Click">百度一下</Hyperlink>

还需要在对应的隐藏代码中处理点击事件

private void Hyperlink_Click(object sender, RoutedEventArgs e
{
    // 强制转换为 Hyperlink
    Hyperlink link = (Hyperlink)sender;
    // 启动进程信息
    ProcessStartInfo process = new ProcessStartInfo()
    {
        // 路径名称
        FileName = link.NavigateUri.AbsoluteUri,
        // 是否使用操作系统的Shell
        UseShellExecute = true
    };
    // 启动
    Process.Start(process);
}

Hyperlink控件仅在Page中生效，也就是创建时创建的是Page而不是窗体，如果在窗体中使用必须手动处理点击事件，如上

它可以支持绝对路径和相对路径，如下

<Hyperlink NavigateUri="https://www.baidu.com/s?wd=超链接">超链接</Hyperlink>
<Hyperlink NavigateUri="./Page2.xaml">超链接到页面2</Hyperlink>

富文本框（RichTextBox）

富文本框，该控件可以使用图像、文本等对象作为文本内容。并可以设置文本的样式等

<RichTextBox Name="mainRTB" AcceptsTab="True"/>
<RichTextBox>
  <FlowDocument>
    <!--TextIndent：表示首行缩进，单位像素-->
    <Paragraph TextIndent="36">
        将 HTML 内容粘贴到 可能会导致意外行为， RichTextBox 因为 RichTextBox 使用 RTF 格式而不是直接使用 HTML 格式。
        <LineBreak />
        文本始终在 中 RichTextBox换行。 如果不希望文本换行， PageWidth 请将 上的 FlowDocument 设置为大于 的 RichTextBox宽度。 但是，一旦达到页面宽度，文本仍会换行。
    </Paragraph>
    <Paragraph>
        <!--其他标签也可以在段落中书写-->
        <Label>这是一个Label控件</Label>
        <CheckBox>男</CheckBox>
        <CheckBox>女</CheckBox>
        <GroupBox Header="分组">分组的内容</GroupBox>
    </Paragraph>
    <!--BlockUIContainer：块标签(块状容器)，跟Paragraph有点像-->
    <BlockUIContainer>
        <!--不支持多个子元素，会报错-->
        <!--<Label>在段落中可以写 Label 标签</Label>
        <Label>在段落中可以写 Label 标签</Label>-->
        <StackPanel>
            <Label>在段落中可以写 Label 标签</Label>
            <Label>在段落中可以写 Label 标签</Label>
        </StackPanel>
    </BlockUIContainer>
    <!--实现数学公式：x的4次方 + y的3次方=99-->
    <Paragraph FontSize="30">
        <!--内联标签-->
        <Run>x</Run>
            <Label Margin="0,0,2,10">4</Label>
        <Run>+</Run>
        <Run>y</Run>
        <Span>
            <Label Margin="0,0,2,10">4</Label>
        </Span>
        <Run>=</Run>
        <Run>99</Run>
    </Paragraph>
  </FlowDocument>
</RichTextBox>

常用属性

AcceptsTab 控制富文本输入框是否支持接收tab缩进

快捷操作

只需一个简单的标签即可使用快捷键进行文本操作，如alt+b、alt+i、alt+u等，当然也可以使用按钮的Command属性执行指令来完成这些快捷键操作

<Button Command="ApplicationCommands.Cut" CommandTarget="{Binding ElementName=a}">
    剪切
</Button>
<Button Command="ApplicationCommands.Copy" CommandTarget="{Binding ElementName=a}">
    复制
</Button>

指令	作用
ApplicationCommands.Cut	剪切
ApplicationCommands.Copy	复制
ApplicationCommands.Paste	粘贴
ApplicationCommands.Undo	撤销
ApplicationCommands.Redo	反撤销
EditingCommands.ToggleBold	加粗
EditingCommands.ToggleItalic	斜体
EditingCommands.ToggleUnderline	下划线
EditingCommands.IncreaseFontSize	放大字体
EditingCommands.DecreaseFontSize	缩小字体
EditingCommands.ToggleBullets	无序列表
EditingCommands.ToggleNumbering	有序列表
EditingCommands.AlignLeft	左对齐
EditingCommands.AlignCenter	右对齐
EditingCommands.AlignRight	居中

下面是一个点击按钮选择图片插入到光标位置的示例

private void selectImg(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    openFileDialog.Filter = " 图片文件|*.jpg";
    if (openFileDialog.ShowDialog() != null)
    {
        // 创建一个图像源
        BitmapImage bitmap = new BitmapImage();
        bitmap.BeginInit();
        // 设置BitmapImage的UriSource，这里指定的是用户选择的图片路径
        bitmap.UriSource = new Uri(openFileDialog.FileName);
        bitmap.EndInit();

        // 创建一个Image对象并设置Source属性
        Image image = new Image();
        image.Source = bitmap;
        // 将元素插入到RichTextBox中的光标位置，rich.CaretPosition为当前光标位置
        new InlineUIContainer(image, rich.CaretPosition);
    }
}

获取文本内容

string StringFromRichTextBox(RichTextBox rtb)
{
    TextRange textRange = new TextRange(
        // TextPointer to the start of content in the RichTextBox.
        rtb.Document.ContentStart,
        // TextPointer to the end of content in the RichTextBox.
        rtb.Document.ContentEnd
    );

    // The Text property on a TextRange object returns a string
    // representing the plain text content of the TextRange.
    return textRange.Text;
}

范围控件

范围控件包括：

1.ScrollBar（滚动条）

2.Slider（滑动条）

3.ProgressBar（进度条）

它们都是从同一个基类 RangeBase 中派生出来。

属性	描述
Maximum	获取或设置最大取值范围
Minimum	获取或设置最小取值范围
LargeChange	获取或设置最大变化单位
SmallChange	获取或设置最小变化单位
Value	获取或设置当前值

滑动条（Slider）

滑动条（Slider）是一个边上带有刻度的范围控件

属性	描述
IsSnapToTickEnabled	获取或设置是否自动将滑块移动到最近的刻度线
Ticks	获取或设置刻度线的位置，如："10, 30, 50, 70" 则只显示这些数字位置的刻度
TickPlacement	获取或设置与 Track 的 Slider 相关的刻度线的位置
IsSelectionRangeEnabled	获取或设置一个值，该值指示 Slider 是否显示选择范围
IsMoveToPointEnabled	获取或设置一个值，该值指示是否立即将 Slider 的 Thumb 移动到在鼠标指针悬停在 Slider 轨道的上方时鼠标单击的位置
SelectionEnd	获取或设置 Slider 的指定选择内容的最大值
TickFrequency	设置间隔多少显示一个刻度

<Slider Name="RectangleHeight" Margin="10" Width="450" Orientation="Horizontal"
  Value="30" Minimum="0" Maximum="100"
  Ticks="20, 25,30, 35, 40, 45"
  IsSelectionRangeEnabled="True"
  TickPlacement="Both" TickFrequency="1" SelectionEnd="40"/>

<Rectangle Fill="LightBlue" HorizontalAlignment="Left" Margin="10" 
   Height="30" Width="{Binding ElementName=RectangleHeight,Path=Value}"/>
<TextBlock Text="{Binding ElementName=RectangleHeight,Path=Value}"/>

进度条（ProgressBar）

ProgressBar 用于指示操作进度。

Value 当前进度
Maximum、Minimum 最大值和最小值
Orientation获取或设置 ProgressBar 的方向：水平或垂直。
IsIndeterminate获取或设置 ProgressBar 是显示实际值，还是显示一般的连续进度反馈。

<TextBox Grid.Row="0" Name="textBox" Text="20" Height="50" Width="100" Margin="20,10,20,10" FontSize="40"/>
<ProgressBar Grid.Row="1" Maximum="100" Minimum="0" Value="{Binding ElementName=textBox,Path=Text}" Height="50" 
     Margin="20,0,20,0" Background="LightYellow" Foreground="LightGreen"/>

画刷画笔

WPF 有5种画刷和1种自定义画刷，都是继承自基类 Brush，主要用于控制元素的颜色属性，元素需要控制颜色的时候都可以使用画刷来控制，如背景、字体、边框等等

常用属性	描述
Opacity	透明度（取值区间在 0-1 之间）
Color	填充颜色

实心画刷（ SolidColorBrush ）

实心画刷：填充单一颜色

<Rectangle Width="100" Height="100" >
  <Rectangle.Fill>
    <SolidColorBrush Color="LightGreen" Opacity="0.555"/>
  </Rectangle.Fill>
</Rectangle>

或者

<Rectangle Width="100" Height="100" Fill="LightGreen" Opacity="0.5555"/>

线性梯度画刷（LinearGradientBrush）

直线型渐变色填充

常用属性	描述
StartPoint	起始位置坐标（取值区间 0~1）
EndPoint	结束位置坐标（取值区间 0~1）
GradientStop.Offset	渐变向量中渐变停止点的位置（取值区间 0~1）

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  // 开始坐标0,0为元素左上角，结束坐标1,1为元素右下角
      <GradientStop Color="blue" Offset="0.5"/>  // Offset为渐变点，两个渐变点的大小决定了颜色变化方向和位置，颜色总是从小往大变化
      <GradientStop Color="red" Offset="0.5"/>
      <GradientStop Color="yellow" Offset="1"/>
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialgradientBrush(圆形梯度画刷)

圆形渐变色填充

常用属性	描述
Point GradientOrigin	渐变开始的焦点的坐标（取值区间0~1）
Point Center	渐变的最外面圆的中心坐标（结束坐标）（取值区间0~1）
double RadiusX	渐变的最外面圆的水平半径（按比例）
double RadiusY	渐变的最外面圆的垂直半径（按比例）

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="1" RadiusY="1">
      <GradientStop Color="red" Offset="0"/>
      <GradientStop Color="yellow" Offset="0.5"/>
      <GradientStop Color="blue" Offset="1"/>
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

图像画刷（ ImageBrush ）

使用图像进行填充

常用属性	描述
ImageSource ImageSource	图像来源地址，可以是本地地址也能是网络地址
Stretch Stretch	枚举类，内容拉伸类型

<Rectangle Height="200" Width="200">
  <Rectangle.Fill>
    <ImageBrush ImageSource="./Image/liulanqi.png"/>
  </Rectangle.Fill>
</Rectangle>

控件画刷（ VisualBrush ）

使用控件进行填充

常用属性	描述
Stretch Stretch	枚举类，内容拉伸类型

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <VisualBrush>
      <VisualBrush.Visual>
        <StackPanel>
          <TextBlock Text="重" />
          <TextBox Text="测试" />
          <TextBlock Text="重" />
          <TextBlock Text="重" />
          <TextBlock Text="重" />
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

形状控件

通用属性

Fill表示要填充的颜色
Stroke：获取或设置 Brush，用于指定 Shape 边框绘制的方式
StrokeThickness：获取或设置 Shape 边框的宽度。
StrokeDashArray：获取或设置 Double 值的集合，这些值指示用于勾勒形状轮廓的虚线和间隙样式。

Rectangle 矩形控件

Rectangle绘制一个矩形

RadiusX：获取或设置令矩形边角改为圆角的椭圆半径( X 轴)。
RadiusY：获取或设置令矩形边角改为圆角的椭圆半径(Y 轴)。

Ellipse 椭圆控件

使用Ellipse该控件展示圆形头像

<Ellipse Width="200" Height="200" Stroke="Blue" StrokeThickness="3" >
    <Ellipse.Fill>
        <ImageBrush ImageSource="img.png"/>
    </Ellipse.Fill>
</Ellipse>

Line 线控件

Line控件绘制一条线

Stroke线条颜色
X1，X2，Y1，Y2设置线条的起始坐标和结束坐标
StrokeThickness线条宽度

<Line Stroke="Red" X1="0" X2="50" Y1="1" Y2="50" StrokeThickness="3"/>

posted @ 2023-11-09 20:15 讨厌敲代码的老郭阅读(844) 评论(0) 编辑收藏举报

刷新页面返回顶部

老郭的笔记分享

02 WPF 常用控件

02 WPF 常用控件

目录

基本控件使用

Border控件

Button控件

TextBlock控件

排版(容器)控件

StackPanel

WrapPanel

DockPanel

Grid

Grid间隔

设定 Grid 行或列的尺寸

跨行跨列

设置多行或多列保持大小一致性

UniformGrid

Canvas 画布面板

ScrollViewer 滚动容器

内容控件

按钮基类

普通按钮（Button）

多选按钮（CheckBox）

单选按钮（RadioButton）

重复按钮（RepeatButton）

标题栏内容控件

分组框（GroupBox）

伸展控件（Expander）

标签控件（Lable）

热键设置

提示控件（ToolTip）

Image 图像

条目控件

菜单（Menu）

Menu

ContextMenu

工具条（ToolBar）

组合框

Selector 类

组合框（ComboBox）

标签控件（TabControl）

列表框（listBox）

列表控件（ListView）

状态条（StatusBar）

树形控件（TreeView）

Calendar 日历

DatePicker 日期选择器

文本控件

密码输入框（PasswordBox）

输入框（TextBoxBase）

文字输入框（TextBox）

超链接（Hyperlink）

富文本框（RichTextBox）

常用属性

快捷操作

范围控件

滑动条（Slider）

进度条（ProgressBar）

画刷画笔

实心画刷 （ SolidColorBrush ）

线性梯度画刷（LinearGradientBrush）

RadialgradientBrush(圆形梯度画刷)

图像画刷 （ ImageBrush ）

控件画刷 （ VisualBrush ）

形状控件

Rectangle 矩形控件

Ellipse 椭圆控件

Line 线控件

公告

实心画刷（ SolidColorBrush ）

图像画刷（ ImageBrush ）

控件画刷（ VisualBrush ）