目录

常用控件

这里会介绍一下常用控件的用途及属性

Rectangle

用于绘制矩形

  1. Fill：矩形的填充色。
  2. Stroke：边框颜色。
  3. StrokeThickness：边框厚度
Button

常用属性如下：

  1. Content：设置按钮文本或内容
  2. IsEnabled：设置按钮是否可用
  3. Command：绑定命令（常用于 MVVM 模式）
  4. Click：设置点击事件的处理程序
RepeatButton

这个按钮与Button的区别就是支持长按效果

TextBox

文本输入控件

  1. TextWrapping：
    1. Wrap：文本超过指定宽度就换行
  2. Text：放置占位文本
  3. ScrollViewer.VerticalScrollBarVisibility：
    1. Auto：垂直滚动条
Label

用于显示文本，与 TextBlock 类似，但支持更复杂的内容

  1. Target：绑定到其他控件
  2. Content：设置显示的文字内容
TextBlock

用于显示文本

  1. TextWrapping：是否自动换行
  2. Text：设置显示的文字。
PasswordBox

文本输入控件，用于密码输入框

  1. Password：放置占位文本
  2. PasswordChar：密码输入框输入字符的呈现方式，默认是圆角
  3. MaxLength：密码的最大长度
RichTextBox

富文本输入控件

Image

用于显示图片，其常用属性如下：

  1. Stretch：设置图片的缩放模式
  2. Source：图片路径
RadioButton

单选控件

  1. GroupName：组名，用于分组，确保同组中仅单选一个
  2. IsChecked：是否选中
  3. Content：显示的文本
CheckBox

多选控件

  1. IsChecked：是否选中
    1. True：选中
    2. Null：半选中
  2. Checked / Unchecked：复选框状态变化事件
Slider

这个控件用于调整值，如音量控制、亮度调整

  1. Minimum：最小值
  2. Maximum：最大值
  3. Value：滑块初始化的默认值
  4. Orientation：水平或垂直方向
ProgressBar

使用这个控件可以实现软件正在加载中的效果（一个进度条）

  1. Value：进度条初始化的默认值
  2. Minimum：最小值
  3. Maximum：最大值
ComboBox

下拉框

  1. SelectedIndex：下拉框默认显示的item，index从0开始
  2. ItemsSource：绑定数据源
  3. IsEditable：是否允许用户输入自定义值
  4. SelectedItem：获取或设置当前选中的项
ListBox

用于显示可选择的列表项

  1. ItemsSource：绑定数据源。
  2. SelectedItem：获取当前选中的项。
  3. SelectionMode：设置单选或多选模式。
ListView

这个控件和ListBox相比，可以分列实现表格的效果

DataGrid

这个控件也可以实现表格的效果，用于显示表格数据，支持排序、编辑和选择等

  1. AutoGenerateColumns：是否自动生成列
  2. ItemsSource：绑定数据源
  3. SelectionMode：设置单选或多选模式
  4. CanUserSortColumns：是否允许列排序
TabControl

这个控件可以实现多标签页的切换效果，用于创建选项卡式界面

  1. SelectedItem：获取当前选中的标签页
  2. ItemsSource：绑定 Tab 页数据

这个控件可以实现桌面软件中菜单栏的效果

ContextMenu

这个控件可以实现右键打开的上下文菜单效果

TreeView

树形控件，可以实现文件夹浏览，层次结构导航的效果

Calendar

日历控件

  1. SelectedDate：选中的日期。
  2. DisplayDate：当前显示的日期。
  3. BlackoutDates：设置禁止选择的日期范围
DatePicker

日期控件

  1. SelectedDate：选中的日期。
  2. DisplayDateStart / DisplayDateEnd：设置日期显示范围。
OpenFileDialog
SaveFileDialog
Border

用于为内容添加边框或背景，圆角等。常用属性如下：

  1. BorderBrush：设置边框的颜色
  2. BorderThickness：设置边框宽度
  3. CornerRadius：设置圆角大小
  4. Background：设置背景色
  5. Padding：设置内容的内边距
Expander

用于显示可折叠的内容块，如设置面板、帮助菜单

  1. Header：折叠部分的标题。
  2. IsExpanded：是否展开。
  3. 示例如下：
<Expander Header="More Details" IsExpanded="False">
    <StackPanel>
        <TextBlock Text="设置项1" />
        <TextBlock Text="设置项2" />
        <TextBlock Text="设置项3" />
    </StackPanel>
</Expander>

GroupBox

分组控件，可以对多个控件分组

ViewBox

用于缩放和布局其子元素，以适应给定的空间（自适应布局）。它通常被用来在保持内容的纵横比或比例的同时，将 UI元素调整到容器的大小

布局属性

  1. Margin
  2. Padding
  3. VerticalAlignment
  4. HorizontalAlignment

布局

布局相关的控件如下

Grid

用于定义行和列布局，可以实现几行几列的效果

  1. RowDefinitions / ColumnDefinitions：定义网格行和列
  2. Grid.Row / Grid.Column：设置控件所占的行和列
  3. 比如说两行两列
<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="8*" />
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
   </Grid.RowDefinitions>   
   <Border Grid.Column="0" Grid.Row="0" Background="Red" />
   <Border Grid.Column="1" Grid.Row="0" Background="Green"  />
   <Border Grid.Column="0" Grid.Row="1" Background="Blue" />
   <Border Grid.Column="1" Grid.Row="1" Background="Yellow"/>
</Grid>
  1. 效果如下：
StackPanel

垂直或水平堆叠子元素，默认将StackPanel内部的控件垂直排列，不会自动换行或者换列，排列不下就会被窗口遮挡

  1. Orientation：设置布局方向（水平或垂直）。
  2. Margin：设置子元素之间的间距
WrapPanel

默认将WrapPanel内部的控件水平排列，会自动换行或者换列

  1. Orientation：设置子元素的排列方向（水平或垂直）
  2. ItemHeight：每个子元素的固定高度（可选）。
  3. ItemWidth：每个子元素的固定宽度（可选）
DockPanel

用于页面布局，通常在导航栏、工具栏设计中使用，DockPanel内部的控件可以进行停靠

  1. DockPanel.Dock：设置子控件停靠位置（Left、Right、Top、Bottom）。
  2. LastChildFill：最后一个子控件是否填充剩余空间
Canvas
  1. Canvas.Left / Canvas.Top：设置子控件的绝对位置。
  2. Background：设置背景颜色
InkCanvas

这个控件可以实现Windows下mspaint的效果

UniformGrid

这个控件内部的控件可以均分空间

实战

  1. 实现如下所示的布局
  2. 代码如下：
<Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="7*"/>
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Background="#7671D8"/>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="5*"/>
        </Grid.ColumnDefinitions>
        <Border Background="Blue" Grid.Column="0" Grid.Row="1"></Border>
        <Grid Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border Background="#7671D8" Grid.Column="0" Margin="5"></Border>
            <Border Background="#4C9ECD" Grid.Column="1" Margin="5"></Border>
            <Border Background="#D970CE" Grid.Column="2" Margin="5"></Border>
            <Border Background="#50bab6" Grid.Column="3" Margin="5"></Border>
            <Border Background="#df7b7b" Grid.Column="4" Margin="5"></Border>
            <Border
                Background="Red"
                Grid.Row="1"
                Grid.ColumnSpan="3"
                Margin="5"
                />
            <Border
                Background="Yellow"
                Grid.Row="1"
                Grid.Column="3"
                Grid.ColumnSpan="2"
                Margin="5"
                />
            <Border
                 Background="Green"
                 Grid.Row="2"
                 Grid.ColumnSpan="3"
                 Margin="5"
                 />
            <Border
                 Background="Orangered"
                 Grid.Row="2"
                 Grid.Column="3"
                 Grid.ColumnSpan="2"
                 Margin="5" 
                />
        </Grid>
    </Grid>

</Grid>