首页 > 其他分享 >02 WPF 常用控件

02 WPF 常用控件

时间:2023-11-09 20:36:24浏览次数:38  
标签:02 控件 鼠标 元素 获取 设置 WPF 属性

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 事件何时发生。[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>

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

​​image​​

此例可见,先设置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>

image

Grid间隔

使用GridSplitter​元素设置一个留白间隙

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

设定 Grid 行或列的尺寸

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

  1. 绝对尺寸,把 Grid 行列大小尺寸设为一个数值,Grid 的行列尺寸就 不会 随着其中 UI 的大小进行自动调整。

  2. 自动尺寸,把 Grid 的 Height 和 Width 设为 Auto 。Grid会自动根据当前行或列内容的最大尺寸设置

    • Grid会自动根据当前行或列内容的最大尺寸设置
    • 可以通过设置MinHeight、MinWidth,当内部没有控件时设置最小的尺寸
  3. 按比例分割行列尺寸,把有限的平面大小 按照一定的比例 划分宽高比,其比例的数值可以是浮点数。

    • 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" /> 

呈现效果

image

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

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

<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>

image

画布面板

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>

内容控件

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 获取或设置开始重复 后 重复之间的时间间隔(以毫秒为单位)。 该值必须为非负数

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

image

标题栏内容控件

标题栏内容控件一般用在需要带有标题的情况,它并没有太大的作用,通常我们不直接使用 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需要注意下述两点:

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

滚动条

当窗口中的内容比窗口的大小要大时,通常要在窗口中显示滚动条。在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 控件的另一大类就是 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

菜单(Menu)

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

常用属性 描述
Icon 获取或设置菜单图标
InputGestureText 获取或设置菜单描述
IsCheckable 获取或设置菜单是否可被选中
IsChecked 获取或设置菜单的选中状态
IsPressed 获取菜单是否被按下
IsSubmenuOpen 获取或设置菜单是否打开
StaysOpenOnClick 获取或设置菜单被点击时是否关闭

菜单有两种用法,一种是下拉式菜单,另一种是弹出菜单。

 <Menu>
  <MenuItem Header="文件"/>
  <MenuItem Header="编辑">
    <MenuItem Header="查找"/>
    <MenuItem Header="替换">
      <MenuItem.Icon>
        <Image Source="/img.jpg" />
      </MenuItem.Icon>
    </MenuItem>
  </MenuItem>
</Menu>

image

<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>

image

工具条(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>
    <TextBox Width="130"/>
  </ToolBar>
</ToolBarTray>

image

组合框

Selector 类

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

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

  • ComboBox
  • ListBox
  • TabControl

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

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

组合框(ComboBox)

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

常用属性 描述
IsDropDownOpen 获取或设置组合框下拉列表是否展开
IsEditable 获取或设置启用或禁用编辑文本框中文本的 ComboBox
IsReadOnly 获取或设置所选内容只读不可编辑
SelectedIndex 获取或设置当前选择中第一项的索引,如果选择为空,则返回负一(-1)
SelectedItem 获取或设置当前选择中的项,或者,如果选择为空,则返回 null。
<!-- 静态选项 -->
<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 Header="2">
    <StackPanel>
        <TextBlock Text="测试2"/>
    </StackPanel>
  </TabItem>
</TabControl>

列表框(listBox)

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

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

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

  1. Single:用户只能选择 ListBox 中一个条目;
  2. Multiple :用户可以选择 ListBox 中多个条目;
  3. Extended:用户需要按下“SHIFT”键,才能选择ListBox中的多个条目;

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

<ListBox SelectionMode="Multiple">
    <ListBoxItem>选项1</ListBoxItem>
    <ListBoxItem>选项2</ListBoxItem>
    <ListBoxItem>选项3</ListBoxItem>
</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>

image

树形控件(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>

文本控件

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

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​事件

提供用于在流内容中承载超链接的功能的内联级别的流内容元素。必须用在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">
    剪切
</Button>
<Button Command="ApplicationCommands.Copy">
    复制
</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 获取或设置当前值

滚动条(ScrollBar)

滚动条(ScrollBar)为可滚动控件,该滚动条具有一个滑块,其位置对应于一个值。

属性 描述
Orientation 获取或设置滚动方向
<ScrollBar x:Name="scrollbar" Orientation="Horizontal" Value="0.5" Maximum="2"/>
<TextBlock Text="{Binding ElementName=scrollbar,Path=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)

<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>

标签:02,控件,鼠标,元素,获取,设置,WPF,属性
From: https://www.cnblogs.com/laoguonana/p/02-wpf-commonly-used-control-1elrtt.html

相关文章

  • WPF控件,按钮名称分行显示的方法
    1、利用XML规则下的特殊字符和空格下面的字符在[XML]中被定义为空白(whitespace)字符: 空格【】Tab 【】回车 【】换行【】这里,为了实现分行,我们选择最后一个换行。比如:<ButtonWidth="100" Height="50" Click="Button_Click_2" Content="第一行&#x000A......
  • [CSP-J 2021] 小熊的果篮 题解
    题目链接既然只有两种东西,我们不妨分开考虑,这里也借鉴了很多二分图题目的切入点。假设苹果和桔子下标分别如下图所示:苹果:1367910桔子:2458那么第一次取,应该是这样取:1234689也就是先取开头比较小的,然后轮流取,注意一定保证递增,也就是对于苹果找出来的\(x\)......
  • [鹏程杯2023]复现
    ​SecretShareX的20个值和R的21个值已经被全部泄露,X和R都是1024bit的值,此时X总共泄露了32*20=640,于是,此时我们可以使用mt19937将其还原,还原之后,我们往前推20个1024bit的值,便可以求得A的后20个,此时便可以使用方程组求出A的第一个值(secret的值)importrandomfromCrypto.Util.n......
  • 2023-2024-1 20231414 《计算机基础与程序设计》第七周学习总结
    学期(2023-2024-1)学号(20231414)《计算机基础与程序设计》第七周学习总结作业信息这个作业属于哪个课程<班级的链接>(如2023-2024-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(2023-2024-1计算机基础与程序设计第七周作业)这个作业的目标<写上具体方......
  • 2023-2024-1 20231419 《计算机基础与程序设计》第七周学习总结
    2023-2024-120231419《计算机基础与程序设计》第七周学习总结作业信息这个作业属于哪个课程https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP这个作业要求在哪里https://www.cnblogs.com/rocedu/p/9577842.html#WEEK07这个作业的目标自学《计算机科学概......
  • [ACTF2023]复现
    ​MDH源题:fromsecretimportflagr=128c=96p=308955606868885551120230861462612873078105583047156930179459717798715109629Fp=GF(p)defgen():a1=random_matrix(Fp,r,c)a2=random_matrix(Fp,r,c)A=a1*a2.Treturn(a1,a2......
  • 2023年11月9号数学总结和笔记
    微积分的主要研究:事物运动中的数量的变化规律微积分分为两大类微分学(导数)积分学(积分)主要研究两种变化均匀变化(用初等数学可以解决)非均匀变化(用高等数学来解决)还有两个侧面宏观(局部,微分学,用来研究事物在某一时刻的变化率)微观(整体,积分学,用来研究......
  • 中睿天下荣获2023全国智能驾驶测试赛车联网安全比赛第一名
    9月24日,由工业和信息化部、公安部、交通运输部、中国科学技术协会、北京市人民政府共同主办的2023世界智能网联汽车大会展览会在北京闭幕。同期举行的全国智能驾驶测试赛(京津冀赛区)宣布比赛结果,中睿天下凭借过硬的产品实力,深厚的技术沉淀荣获车联网安全专项赛车联网实车靶场破解赛......
  • SNP应邀参加2023中国企业数字化转型峰会暨赛意用户大会
    创新驱动科技,数智驱动未来。如今,我国产业数字化进程提速升级,数字产业化规模持续壮大。数据显示,2022年,我国数字经济规模达50.2万亿元,总量稳居世界第二。数字经济已经成为推动传统产业转型升级、促进高质量发展的新引擎。10月27日,2023中国企业数字化转型峰会暨赛意用户大会在武汉隆重......
  • 09_LCD1602调试工具
    LCD1602调试工具编写代码LCD1602.c#include<REGX52.H>//引脚配置:sbitLCD_RS=P2^6;sbitLCD_RW=P2^5;sbitLCD_EN=P2^7;#defineLCD_DataPortP0//函数定义:/***@briefLCD1602延时函数,12MHz调用可延时1ms*@param无*@retval无*/voidLCD_Delay(vo......