Visual Basic WPF图形界面编程入门

一、WPF简介

WPF（Windows Presentation Foundation）是微软推出的基于.NET Framework 的用户界面框架。它旨在提供一种统一的编程模型，用于创建丰富、交互式的 Windows 应用程序界面。与传统的 Windows 窗体（WinForms）相比，WPF 采用了一种全新的声明式编程模型，使用 XAML（可扩展应用程序标记语言）来描述用户界面的外观和布局，而代码则用于处理逻辑。

（一）WPF 的优势

1. 分离关注点：XAML 使得界面设计与业务逻辑可以更好地分离。设计师可以专注于使用 XAML 设计出美观的界面，而开发人员则专注于编写后台代码来实现功能。例如，一个简单的登录界面，设计师可以通过 XAML 轻松定义出文本框、按钮等控件的位置和样式，开发人员则在后台代码中处理登录验证逻辑。
2. 丰富的图形渲染：WPF 基于 DirectX 技术，提供了高质量的图形渲染能力。这使得可以创建出具有动画效果、3D 效果等绚丽的用户界面。比如，制作一个带有动画旋转效果的图片展示界面，在 WPF 中可以相对轻松地实现。
3. 数据绑定：WPF 强大的数据绑定机制可以将 UI 元素与数据源进行绑定。当数据源发生变化时，UI 会自动更新；反之，当 UI 元素的值改变时，数据源也会相应更新。例如，在一个显示员工信息的表格中，将表格与员工数据集合进行绑定，当员工数据发生变化时，表格会实时显示更新后的数据。

（二）XAML 基础

1. 元素和属性：XAML 文档由元素构成，每个元素对应一个.NET 类型。元素可以包含属性来设置其特性。例如，创建一个按钮：

<Button Content="点击我" Width="100" Height="30"/>

这里 Button 是元素，Content、Width 和 Height 是属性。 2. 嵌套元素：元素可以嵌套在其他元素中，形成层次结构。比如一个包含文本块的网格：

<Grid>
    <TextBlock Text="这是一个文本块"/>
</Grid>

3. 命名空间：XAML 文档需要定义命名空间，以便引用不同的.NET 类型。常见的命名空间有 http://schemas.microsoft.com/winfx/2006/xaml/presentation，用于引用 WPF 相关的类型。例如：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="MyNamespace.MainWindow">
    <!-- 窗口内容 -->
</Window>

二、Visual Basic 与 WPF 集成

（一）创建 WPF 项目

1. 打开 Visual Studio：启动 Visual Studio，选择“创建新项目”。
2. 选择项目类型：在项目模板中，找到“Visual Basic”下的“WPF 应用程序”模板，输入项目名称和位置后点击“创建”。
3. 项目结构：创建完成后，项目中会包含 App.xaml 文件，它是应用程序的入口，负责初始化应用程序、设置资源等；MainWindow.xaml 及其代码隐藏文件 MainWindow.xaml.vb，MainWindow.xaml 用于定义主窗口的界面，MainWindow.xaml.vb 用于编写窗口的逻辑代码。

（二）在 Visual Basic 中访问 XAML 元素

1. 命名元素：在 XAML 中给元素命名，以便在代码隐藏文件中访问。例如，给一个按钮命名：

<Button x:Name="myButton" Content="点击我"/>

2. 在 Visual Basic 中操作元素：在 MainWindow.xaml.vb 文件中，可以通过名称访问按钮并添加点击事件处理程序。

Public Class MainWindow
    Private Sub myButton_Click(sender As Object, e As RoutedEventArgs) Handles myButton.Click
        MessageBox.Show("按钮被点击了！")
    End Sub
End Class

三、WPF 布局

（一）布局容器概述

WPF 提供了多种布局容器，用于控制子元素的排列方式。不同的布局容器适用于不同的场景，合理选择布局容器可以使界面在不同的窗口大小和设备上都能保持良好的显示效果。

（二）常见布局容器

1. Grid（网格布局）
   • 特点：Grid 是一种基于行和列的布局容器，可以精确控制子元素的位置。它将区域划分为行和列的网格，子元素可以放置在指定的单元格中。
   • 使用示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button Content="按钮1" Grid.Row="0" Grid.Column="0"/>
    <TextBox Grid.Row="0" Grid.Column="1"/>
    <TextBlock Text="文本块" Grid.Row="1" Grid.Column="0"/>
    <ListBox Grid.Row="1" Grid.Column="1"/>
</Grid>

这里定义了一个 2 行 2 列的网格，Height="Auto" 和 Width="Auto" 表示行高和列宽根据内容自动调整，Height="*" 和 Width="*" 表示行高和列宽会根据剩余空间按比例分配。 2. StackPanel（堆栈面板） - 特点：StackPanel 会按照水平或垂直方向依次排列子元素。如果是水平方向，子元素会从左到右排列；如果是垂直方向，子元素会从上到下排列。 - 使用示例：

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

这里通过 Orientation="Vertical" 设置为垂直方向排列。若改为 Orientation="Horizontal"，则按钮会水平排列。 3. WrapPanel（环绕面板） - 特点：WrapPanel 会按照水平或垂直方向排列子元素，当空间不足时，子元素会自动换行或换列。 - 使用示例：

<WrapPanel Orientation="Horizontal">
    <Button Content="长按钮1" Width="150"/>
    <Button Content="按钮2"/>
    <Button Content="按钮3"/>
    <Button Content="长按钮4" Width="150"/>
</WrapPanel>

在水平方向上，如果窗口宽度不足以容纳所有按钮，后面的按钮会自动换行显示。 4. DockPanel（停靠面板） - 特点：DockPanel 可以将子元素停靠在面板的边缘，如顶部、底部、左侧、右侧或填充整个面板。 - 使用示例：

<DockPanel>
    <Button Content="顶部按钮" DockPanel.Dock="Top"/>
    <Button Content="左侧按钮" DockPanel.Dock="Left"/>
    <Button Content="右侧按钮" DockPanel.Dock="Right"/>
    <Button Content="底部按钮" DockPanel.Dock="Bottom"/>
    <TextBlock Text="中间文本"/>
</DockPanel>

这里各个按钮分别停靠在不同的边缘，TextBlock 则填充剩余空间。

四、WPF 控件

（一）基本控件

1. Button（按钮）
   • 功能：按钮是用户交互中常用的控件，用于触发操作。可以设置按钮的内容、样式、点击事件等。
   • 示例：

<Button Content="提交" Click="SubmitButton_Click">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </Button.Style>
</Button>

在代码隐藏文件中添加点击事件处理程序：

Private Sub SubmitButton_Click(sender As Object, e As RoutedEventArgs)
    MessageBox.Show("提交成功！")
End Sub

2. TextBox（文本框）
   • 功能：用于用户输入文本。可以设置文本框的最大长度、是否只读等属性。
   • 示例：

<TextBox x:Name="inputTextBox" MaxLength="100" TextWrapping="Wrap"/>

可以在代码中获取文本框的值：

Dim inputText As String = inputTextBox.Text

3. Label（标签）
   • 功能：用于显示文本信息，通常用于标识其他控件。
   • 示例：

<Label Content="用户名："/>

（二）复杂控件

1. ListView（列表视图）
   • 功能：用于以列表形式显示数据集合。可以自定义列头和每行的数据显示方式。
   • 示例：

<ListView x:Name="employeeListView">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}"/>
        </GridView>
    </ListView.View>
</ListView>

在代码中绑定数据：

Public Class Employee
    Public Property Name As String
    Public Property Age As Integer
End Class

Public Class MainWindow
    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        Dim employees As New List(Of Employee)
        employees.Add(New Employee With {.Name = "张三",.Age = 25})
        employees.Add(New Employee With {.Name = "李四",.Age = 30})
        employeeListView.ItemsSource = employees
    End Sub
End Class

2. ComboBox（组合框）
   • 功能：提供一个下拉列表，用户可以从中选择一个选项。可以绑定数据源来动态显示选项。
   • 示例：

<ComboBox x:Name="fruitComboBox">
    <ComboBoxItem Content="苹果"/>
    <ComboBoxItem Content="香蕉"/>
    <ComboBoxItem Content="橙子"/>
</ComboBox>

获取选中项：

Dim selectedFruit As String = CType(fruitComboBox.SelectedItem, ComboBoxItem).Content.ToString()

五、数据绑定

（一）数据绑定基础

1. 绑定源和目标：数据绑定涉及绑定源（提供数据的对象）和绑定目标（显示或接收数据的 UI 元素）。例如，将一个 TextBox 作为绑定目标，一个类的属性作为绑定源。
2. 绑定模式：
   • OneWay：数据从绑定源流向绑定目标。例如，将一个标签的 Content 属性绑定到一个只读的数据源，标签会显示数据源的值，但不会因标签的操作影响数据源。
   • TwoWay：数据可以在绑定源和绑定目标之间双向流动。常用于用户输入的场景，如文本框与数据源的绑定，用户在文本框输入内容会更新数据源，数据源变化也会更新文本框。
   • OneTime：数据在初始化时从绑定源流向绑定目标，之后绑定源的变化不会再影响绑定目标。

（二）实现数据绑定

1. 简单数据绑定：假设我们有一个包含 Name 属性的 Person 类，在 XAML 中绑定到一个 TextBlock：

<TextBlock Text="{Binding Name}"/>

在代码中设置数据上下文：

Public Class Person
    Public Property Name As String
End Class

Public Class MainWindow
    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        Dim person As New Person With {.Name = "小明"}
        Me.DataContext = person
    End Sub
End Class

2. 绑定到集合：以之前的 ListView 为例，将 ListView 绑定到 Employee 集合：

<ListView ItemsSource="{Binding Employees}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}"/>
        </GridView>
    </ListView.View>
</ListView>

在代码中：

Public Class Employee
    Public Property Name As String
    Public Property Age As Integer
End Class

Public Class MainViewModel
    Public Property Employees As List(Of Employee)
    Public Sub New()
        Employees = New List(Of Employee)
        Employees.Add(New Employee With {.Name = "张三",.Age = 25})
        Employees.Add(New Employee With {.Name = "李四",.Age = 30})
    End Sub
End Class

Public Class MainWindow
    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        Me.DataContext = New MainViewModel
    End Sub
End Class

六、样式和模板

（一）样式

1. 定义样式：样式可以设置控件的外观和行为。例如，定义一个按钮的样式：

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="LightGreen"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Padding" Value="10"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
    </Style.Triggers>
</Style>

这里定义了一个名为 MyButtonStyle 的样式，设置了按钮的背景、前景色和内边距，并添加了一个触发条件，当鼠标悬停在按钮上时改变背景色。 2. 应用样式：在按钮上应用样式：

<Button Content="应用样式的按钮" Style="{StaticResource MyButtonStyle}"/>

（二）模板

1. ControlTemplate（控件模板）：用于定义控件的外观结构。例如，自定义一个按钮的模板：

<ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
    <Grid>
        <Rectangle Fill="{TemplateBinding Background}" Stroke="Black"/>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

这里使用 Grid、Rectangle 和 ContentPresenter 重新定义了按钮的外观，并且添加了一个触发条件，当按钮被按下时进行缩放。 2. 应用控件模板：

<Button Content="自定义模板按钮" Template="{StaticResource MyButtonTemplate}"/>

七、动画

（一）动画类型

1. Property Animation（属性动画）：通过改变控件的属性值来创建动画，如改变按钮的 Width 属性实现按钮的伸缩动画。
2. Path Animation（路径动画）：使对象沿着指定的路径移动。例如，让一个图片沿着一个圆形路径移动。

（二）创建动画

1. 属性动画示例：为按钮的 Opacity 属性创建淡入动画：

<Button Content="淡入按钮">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

这里当按钮被点击时，会触发一个持续 2 秒的淡入动画，从完全透明（Opacity = 0）到完全不透明（Opacity = 1）。 2. 路径动画示例：让一个椭圆沿着一个简单路径移动：

<Canvas>
    <Ellipse x:Name="myEllipse" Fill="Red" Width="50" Height="50">
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <PathAnimation Storyboard.TargetProperty="(Canvas.Left), (Canvas.Top)" Duration="0:0:5">
                            <PathAnimation.PathGeometry>
                                <PathGeometry>
                                    <PathFigure StartPoint="0,0">
                                        <LineSegment Point="100,100"/>
                                        <LineSegment Point="200,0"/>
                                    </PathFigure>
                                </PathGeometry>
                            </PathAnimation.PathGeometry>
                        </PathAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>

这里椭圆在加载时会沿着指定的折线路径移动，持续时间为 5 秒。

通过以上内容，你已经对 Visual Basic 的 WPF 图形界面编程有了一个较为全面的入门了解。在实际开发中，还需要不断实践和探索，以创建出更加丰富和实用的应用程序界面。