03 - WPF 控件与布局

WPF 控件与布局

一、WPF 控件概览

WPF（Windows Presentation Foundation）是一个功能强大的桌面应用程序框架，提供了丰富的控件用于构建用户界面。这些控件是构建交互式应用的核心，涵盖了从基础的输入控件到复杂的布局容器。以下是 WPF 中一些常用的基本控件：

1. Button（按钮）

Button 控件是用于触发事件的控件。它通常用于执行操作，如提交表单、触发命令等。

<Button Content="Click Me" Width="100" Height="50" Click="Button_Click"/>

• Content：按钮上的文本或图像。
• Click：按钮点击时触发的事件。

2. TextBox（文本框）

TextBox 控件用于接收用户的文本输入。它支持单行或多行文本。

<TextBox Width="200" Height="30" Text="Hello World"/>

• Text：文本框中的文本内容。
• MaxLength：限制文本框允许的最大字符数。

3. Label（标签）

Label 控件用于显示文本，用作其他控件的描述或说明。

<Label Content="Enter your name:" />

• Content：显示的文本内容。

4. CheckBox（复选框）

CheckBox 控件允许用户选择或取消选择某个选项，表示布尔值（选中或未选中）。

<CheckBox Content="Accept terms and conditions"/>

• IsChecked：获取或设置复选框是否选中。

5. RadioButton（单选按钮）

RadioButton 控件通常用于单选项组，允许用户从一组互斥的选项中选择一个。

<RadioButton Content="Option 1" GroupName="Options"/>
<RadioButton Content="Option 2" GroupName="Options"/>

• GroupName：确保在同一组内只能选择一个单选按钮。

6. ComboBox（组合框）

ComboBox 控件结合了下拉列表和文本框，用户可以选择列表中的项，或者自己输入。

<ComboBox Width="200" Height="30">
    <ComboBoxItem Content="Option 1"/>
    <ComboBoxItem Content="Option 2"/>
ComboBox>

• SelectedItem：获取或设置选择的项。
• IsEditable：控制是否允许用户编辑输入的文本。

7. ListBox（列表框）

ListBox 控件显示一个项目列表，用户可以选择一个或多个项目。

<ListBox Width="200" Height="150">
    <ListBoxItem Content="Item 1"/>
    <ListBoxItem Content="Item 2"/>
ListBox>

• SelectionMode：指定是否允许多选（Single、Multiple）。
• SelectedItem：获取或设置当前选中的项。

8. Image（图像）

Image 控件用于显示图像，可以加载来自文件、资源或网址的图像。

<Image Source="image.jpg" Width="200" Height="150"/>

• Source：设置图像的来源路径。
• Stretch：控制图像如何拉伸以适应控件区域。

二、布局控件

WPF 提供了多种布局控件（Layout Controls），这些控件用于组织和管理应用程序中控件的位置和尺寸。不同的布局控件适用于不同的布局需求，能够帮助开发者轻松创建灵活且响应式的用户界面。以下是 WPF 中常用的几种布局控件：

1. Grid（网格布局控件）

Grid 是 WPF 中最常用的布局控件之一，允许开发者通过定义行和列来精确控制控件的位置。每个子控件可以在指定的行和列中放置。

• 特点：
  • 支持行和列的定义，可以使用不同的大小模式（例如 Auto、*、px）。
  • 非常适合需要精确排列子控件的复杂布局。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    Grid.ColumnDefinitions>

    <Button Content="Button 1" Grid.Row="0" Grid.Column="0"/>
    <Button Content="Button 2" Grid.Row="1" Grid.Column="1"/>
Grid>

• RowDefinitions 和 ColumnDefinitions：定义行和列。
• Grid.Row 和 Grid.Column：指定控件的位置。

2. StackPanel（堆叠面板）

StackPanel 控件将其子控件在垂直或水平方向上进行堆叠，适用于简单的布局场景。

• 特点：
  • Orientation 属性决定控件排列的方向（Vertical 或 Horizontal）。
  • 子控件会依次排列，适用于菜单、工具栏、表单等简单布局。

<StackPanel Orientation="Vertical">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
StackPanel>

3. WrapPanel（自动换行面板）

WrapPanel 控件自动根据可用空间来安排其子控件。当一行空间不足时，控件会自动换行到下一行。

• 特点：
  • 控件会在容器中依次排列，并在空间不足时换行。
  • 适用于动态内容的布局，如图片库、按钮集合等。

<WrapPanel>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
WrapPanel>

4. DockPanel（停靠面板）

DockPanel 控件允许子元素停靠在容器的边缘（上、下、左、右），或者填充剩余空间。它通常用于创建具有固定区域和可变区域的布局。

• 特点：
  • 子元素可以停靠在四个边（Top、Bottom、Left、Right）。
  • 最后一个控件可以设置为 Fill，占用剩余的空间。

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

5. Canvas（画布布局）

Canvas 控件是一个绝对布局容器，允许控件通过指定坐标来定位。适用于需要精确位置控制的场景。

• 特点：
  • 控件的位置通过 Canvas.Left 和 Canvas.Top（或 Canvas.Right 和 Canvas.Bottom）来设置。
  • 非常适合绘图应用、图形编辑器等场景。

<Canvas>
    <Button Content="Button 1" Canvas.Left="50" Canvas.Top="100"/>
    <Button Content="Button 2" Canvas.Left="150" Canvas.Top="200"/>
Canvas>

总结

WPF 提供了多种布局控件，可以根据应用需求选择合适的布局方式：

• Grid：适用于复杂、精确的布局，基于行列的排列。
• StackPanel：适用于简单的垂直或水平排列。
• WrapPanel：自动换行的布局，适用于动态内容显示。
• DockPanel：控件可停靠在容器的边缘，适用于固定和可变区域布局。
• Canvas：自由的绝对定位布局，适用于需要精确控制位置的场景。

三、控件的属性与事件

在 WPF 中，控件的属性和事件是实现交互和自定义界面的关键。每个控件都拥有多个属性，控制它们的外观、行为、布局等。同时，控件也有事件，可以响应用户的操作（如点击、鼠标悬停等）。以下是常见控件的属性和事件以及如何处理它们。

1. 常见控件属性

属性是控件的特征，通常用于设置控件的外观、大小、位置等。

• Width 和 Height：设置控件的宽度和高度。

  <Button Width="100" Height="50" Content="Click Me"/>
  

• Margin：设置控件与其他控件或容器边缘的距离。

  <Button Content="Click Me" Margin="10,20,10,10"/>
  

• Padding：设置控件内部内容与边框之间的距离，通常用于文本框、按钮等容器控件。

  <Button Content="Click Me" Padding="10"/>
  

• Background：设置控件的背景颜色。

  <Button Content="Click Me" Background="LightBlue"/>
  

• Foreground：设置控件文本的颜色。

  <Button Content="Click Me" Foreground="Red"/>
  

• Visibility：控制控件的可见性。可以设置为 Visible、Hidden 或 Collapsed。

  <Button Content="Click Me" Visibility="Collapsed"/>
  

• IsEnabled：控制控件是否可用。设置为 False 时，控件将变为灰色并且不能交互。

  <Button Content="Click Me" IsEnabled="False"/>
  

2. 常见控件事件

事件允许我们响应用户的输入或其他系统操作。WPF 中的控件事件通常由用户交互引发，如点击按钮、悬停鼠标等。

• Click：按钮等控件的点击事件。当用户点击按钮时触发。

  <Button Content="Click Me" Click="Button_Click"/>
  

  事件处理程序：

  private void Button_Click(object sender, RoutedEventArgs e)
  {
      MessageBox.Show("Button clicked!");
  }
  

• MouseEnter：当鼠标指针进入控件时触发。

  <Button Content="Hover Me" MouseEnter="Button_MouseEnter"/>
  

  事件处理程序：

  private void Button_MouseEnter(object sender, MouseEventArgs e)
  {
      (sender as Button).Background = Brushes.Yellow;
  }
  

• MouseLeave：当鼠标指针离开控件时触发。

  <Button Content="Hover Me" MouseLeave="Button_MouseLeave"/>
  

  事件处理程序：

  private void Button_MouseLeave(object sender, MouseEventArgs e)
  {
      (sender as Button).Background = Brushes.LightBlue;
  }
  

• TextChanged：当控件的文本发生变化时触发，常用于 TextBox 等文本输入控件。

  <TextBox Name="TextBox1" TextChanged="TextBox_TextChanged"/>
  

  事件处理程序：

  private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
  {
      MessageBox.Show("Text changed");
  }
  

• Checked 和 Unchecked：分别用于 CheckBox 的选中和取消选中事件。

  <CheckBox Content="Accept terms" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>
  

  事件处理程序：

  private void CheckBox_Checked(object sender, RoutedEventArgs e)
  {
      MessageBox.Show("Checkbox checked");
  }
  
  private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
  {
      MessageBox.Show("Checkbox unchecked");
  }
  

• KeyDown 和 KeyUp：当用户按下或释放键盘上的键时触发，常用于 TextBox 等控件。

  <TextBox KeyDown="TextBox_KeyDown" />
  

  事件处理程序：

  private void TextBox_KeyDown(object sender, KeyEventArgs e)
  {
      MessageBox.Show("Key pressed: " + e.Key.ToString());
  }
  

3. 事件与命令

在 WPF 中，除了直接通过事件响应用户的操作，还可以使用命令（Commands）来响应控件事件。命令为按钮点击等交互提供了更清晰的分离，通常用于 MVVM 模式下的事件处理。

例如：

<Button Command="ApplicationCommands.Copy" Content="Copy"/>

这种方式使得控件的行为可以与视图模型（ViewModel）分离，符合 MVVM 模式的设计理念。

4. 附加属性

WPF 中还支持附加属性（Attached Properties），这些属性不是控件的直接成员，但可以添加到任何元素上。例如，Grid.Row 和 Grid.Column 就是 Grid 的附加属性，用来指定子控件在网格中的位置。

<Button Content="Button 1" Grid.Row="0" Grid.Column="0"/>

四、控件模板

在 WPF 中，ControlTemplate 是一种强大的机制，允许开发者自定义控件的外观，而不改变控件的行为。通过 ControlTemplate，可以完全替换控件的视觉结构，使得控件的外观更加灵活和可定制。ControlTemplate 使得 WPF 的控件具有高度的可定制性，能够创建全新的样式和交互效果，而不需要更改控件的基础功能。

1. ControlTemplate 概述

ControlTemplate 是 WPF 中每个控件都有的模板，用于定义控件的视觉外观。通过该模板，可以在不改变控件逻辑的情况下，改变控件的呈现样式。ControlTemplate 可以包括控件的各个部分，如背景、边框、文本和子控件等。

ControlTemplate 允许开发者对控件的结构进行深度定制，因此可以完全改变控件的外观，甚至为一个现有控件设计出全新的视觉样式。

2. ControlTemplate 的结构

ControlTemplate 通常包含控件的所有视觉元素，使用 XAML 来定义。例如，Button 控件的默认模板中会有按钮的背景、边框以及显示的文本等内容。通过 ControlTemplate，我们可以重新设计这些元素。

以下是一个自定义 Button 控件的模板例子：

<Button Width="200" Height="100">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="LightGreen" BorderBrush="DarkGreen" BorderThickness="2" CornerRadius="10">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            Border>
        ControlTemplate>
    Button.Template>
Button>

在这个例子中：

• 使用 ControlTemplate 替代了按钮的默认外观。
• 用 Border 元素包装了按钮内容，并自定义了背景、边框和圆角。
• ContentPresenter 用于展示按钮中的内容（如按钮文本）。

3. ControlTemplate 的组成部分

ControlTemplate 可以包含多个子元素，通常包括以下几部分：

• Root 元素：通常是一个容器元素（如 Border 或 Grid），负责控件的整体外观。
• 控件内容：用 ContentPresenter 来显示控件的内容（例如按钮中的文本）。它的 Content 属性由控件本身的内容（如按钮的 Content）提供。
• 状态视觉效果：可以通过 Triggers 来根据控件的不同状态（如鼠标悬停、点击等）改变控件的外观。

4. 使用 VisualStateManager 来管理控件的状态

VisualStateManager 用于管理控件在不同状态下的外观。例如，按钮的不同状态（如鼠标悬停、按下）可以通过 VisualState 来定义。

<Button Width="200" Height="100" Content="Click Me">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="LightBlue" BorderBrush="Blue" BorderThickness="2" CornerRadius="10">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Button" Property="Background" Value="LightGreen"/>
                Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Button" Property="Background" Value="DarkGreen"/>
                Trigger>
            ControlTemplate.Triggers>
        ControlTemplate>
    Button.Template>
Button>

在这个例子中：

• Trigger 用来检测控件的不同状态（如 IsMouseOver 或 IsPressed）。
• 当鼠标悬停在按钮上时，按钮的背景颜色会变为绿色；当按钮被点击时，背景颜色变为深绿色。

5. ControlTemplate 与 Style 的关系

在 WPF 中，ControlTemplate 主要是用于控制控件的外观，而 Style 控件则是用来统一设置控件的外观和行为。ControlTemplate 可以嵌套在 Style 中，从而提供更加一致的样式。

例如：

<Style TargetType="Button">
    "Width" Value="200"/>
    "Height" Value="100"/>
    "Content" Value="Click Me"/>
    "Template">
        
            "Button">
                "LightBlue" BorderBrush="Blue" BorderThickness="2" CornerRadius="10">
                    "Center" VerticalAlignment="Center"/>
                
            
        
    
Style>

<Button Style="{StaticResource {x:Type Button}}" />

这里，按钮的样式和模板通过 Style 一起定义，可以方便地复用和修改。

6. 模板的复用与资源管理

ControlTemplate 还可以作为资源复用，特别是在需要多次使用相同控件样式时。例如，可以将模板放入 ResourceDictionary 中，然后在不同的控件上应用相同的模板。

<Window.Resources>
    <ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
        <Border Background="LightCoral" BorderBrush="Red" BorderThickness="2">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        Border>
    ControlTemplate>
Window.Resources>

<Button Content="Click Me" Template="{StaticResource CustomButtonTemplate}" />