probie

WPF基础01--WPF基础知识

  • ~8.25K 字

为什么选择WPF

WPF全称Windows Presentation Foundation，翻译中文即“Windows呈现基础”,由微软2007年推出的Windows桌面应用框架,是基于XML、NET、矢量的呈现引擎，可以创建适用于 Windows 且具有非凡视觉效果的桌面客户端应用程序。

  • 前端界面由XAML支持：WPF使用XAML（Extensible Application Markup Language）作为界面描述语言，使开发人员能够以声明性的方式定义用户界面，并将其与后端逻辑分离，提高了开发效率和可维护性。
  • 强大的数据绑定：WPF提供了强大的数据绑定机制，使开发人员能够轻松地将数据与用户界面元素关联起来，实现数据驱动的应用程序开发。
  • 矢量图形：WPF 的核心是一个与分辨率无关且基于矢量的呈现引擎，旨在充分利用现代图形硬件。使得WPF编写的桌面应用十分美观，且WPF作为一个成熟的框架，具有庞大的开发人员社区和丰富的第三方资源。

标记语言XAML

  • 什么是XAML
    XAML 是一种声明性标记语言。是构建WPF应用UI的语言，你可以在声明性 XAML 标记中创建可见的 UI 元素，然后使用代码隐藏文件（这些文件通过分部类定义与标记相联接）将 UI 定义与运行时逻辑相分离。 XAML 直接以程序集中定义的一组特定后备类型表示对象的实例化。 这与大多数其他标记语言不同，后者通常是与后备类型系统没有此类直接关系的解释语言。 XAML 实现了一个工作流，通过此工作流，各方可以采用不同的工具来处理 UI 和应用的逻辑。

  • 语法概述

    • XAML对象元素

      1
      2
      3
      <StackPanel>
          <Button Content="Click Me"/>
      </StackPanel>

      上面例子指定了两个对象：<StackPanel>和<Button />。对象元素 StackPanel 和 Button 各映射到一个类名，该类由 WPF 定义并且属于 WPF 程序集。 指定对象元素标记时，会创建一条指令，指示 XAML 处理创建基础类型的新实例。 每个实例都是在分析和加载 XAML 时通过调用基础类型的无参数构造函数来创建。

    • 属性

      1
      <Button Background="Blue" Foreground="Red" Content="This is a button"/>

      类似Background="Blue" Foreground="Red" Content="This is a button"就是对象<Button/>的三个属性，分别表示<Button/>的背景颜色为蓝色、文本颜色为红色、显示文本是This is a button。

    • 属性元素语法

      属性元素语法是属性的另一种表示形式。例如上面例子可以写成如下形式。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <Button>
          <Button.Background>
              <SolidColorBrush Color="Blue"/>
          </Button.Background>
          <Button.Foreground>
              <SolidColorBrush Color="Red"/>
          </Button.Foreground>
          <Button.Content>
              This is a button
          </Button.Content>
      </Button>

    • 集合语法

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <Grid>
          <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="*" />
              <RowDefinition Height="100" />
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="100" />
          </Grid.ColumnDefinitions>
          ...
      </Grid>

      上面例子表示Grid三行三列，演示了用于设置RowDefinitions属性和ColumnDefinitions属性的值的集合语法。

    • 附加属性
      通过上面例子我们知道Grid需要ColumnDefinitions和RowDefinitions集合的属性元素来定义行和列。但是，程序员还必须通过某种方式来指示 的每个子项 Grid 所在的行和列。

      在 的每个子元素的 Grid 标记中，使用以下属性指定该子级的行和列：

      • Grid.Row
      • Grid.Column

      还可以使用这些属性指示子级是否跨多个行或多列

      • Grid.RowSpan
      • Grid.ColumnSpan
      示例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      <Grid>
          <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="*" />
              <RowDefinition Height="100" />
          </Grid.RowDefinitions>

          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="100" />
          </Grid.ColumnDefinitions>
          <TextBlock Text="Autosized cell"
                 Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" 
                 Foreground="White"
                 Background="Blue" />
          <TreeView Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Background="AliceBlue">
              <TreeViewItem Header="Level 1" IsExpanded="True">
                  <TreeViewItem Header="Level 2.1" />
                  <TreeViewItem Header="Level 2.2" IsExpanded="True">
                      <TreeViewItem Header="Level 3.1" />
                      <TreeViewItem Header="Level 3.2" />
                  </TreeViewItem>
                  <TreeViewItem Header="Level 2.3" />
              </TreeViewItem>
          </TreeView>
          <DockPanel Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Background="Wheat">
              
          </DockPanel>

      </Grid>

    • XAML 内容属性
      XAML 指定了一个语言功能，通过该功能，类可以指定它的一个且仅一个属性为 XAML 内容 属性。 该对象元素的子元素用于设置该内容属性的值。换言之，仅对内容属性而言，可以在 XAML 标记中设置该属性时省略属性元素，并在标记中生成更直观的父级/子级形式。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <Border>
          <TextBox Width="300"/>
      </Border>
      <!--explicit equivalent-->
      <Border>
          <Border.Child>
              <TextBox Width="300"/>
          </Border.Child>
      </Border>

    • 标记拓展
      标记扩展是一个 XAML 语言概念。 用于提供属性的值时，大括号{}表示标记扩展用法。
      WPF 应用编程中最常用的标记扩展是 Binding（用于数据绑定表达式）以及资源引用 StaticResource 和 DynamicResource。 通过使用标记扩展，即使属性通常不支持特性语法，也可以使用特性语法为属性提供值。 标记扩展经常使用中间表达式类型实现一些功能，例如，推迟值或引用仅在运行时才存在的其他对象。

      示例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      <Window x:Class="index.Window1"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="Window1" Height="100" Width="300">
          <Window.Resources>
              <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
              <Style TargetType="Border" x:Key="PageBackground">
                  <Setter Property="BorderBrush" Value="Blue"/>
                  <Setter Property="BorderThickness" Value="5" />
              </Style>
          </Window.Resources>
          <Border Style="{StaticResource PageBackground}">
              <StackPanel>
                  <TextBlock Text="Hello" />
              </StackPanel>
          </Border>
      </Window>

    • 根元素和命名空间
      上面截图里面根元素是Window,根元素还包含特性 xmlns 和 xmlns:x、xmlns:d、xmlns:mc、xmlns:local，这些特性指向各自的命名空间。

A Sample WPF

VisualStudio的重要部分
Visual Studio 的重要部分


Visual Studio 中对 WPF 的支持包含五个在创建应用时你将与之交互的重要组件：

  1. 工具箱
    工具箱包含可添加到窗体的所有控件。 若要将控件添加到当前窗体，请双击控件或拖放控件。
  2. XAML 设计器
    这是 XAML 文档的设计器。 它是交互式的，可以从“工具箱”拖放对象。 通过在设计器中选择和移动项，可以直观地为应用构建用户界面 (UI)。
    当设计器和编辑器都可见时，对设计器的更改会反映在编辑器中，反之亦然。 在设计器中选择项目时，“属性”窗格会显示有关该对象的属性和特性。
  3. XAML 代码编辑器
    这是 XAML 文档的 XAML 代码编辑器。 XAML 代码编辑器是一种无需设计器即可手动创建 UI 的方法。 将控件添加到设计器中时，设计器可以推断控件上的属性值。 XAML 代码编辑器则为你提供更多控制权。
    当设计器和编辑器都可见时，对设计器的更改会反映在编辑器中，反之亦然。 在代码编辑器中导航文本插入点时，“属性”窗格会显示有关该对象的属性和特性。
  4. 解决方案资源管理器
    所有项目文件、代码、窗口、资源都将显示在此窗格中。
  5. 属性
    此窗格显示可以基于所选项进行配置的属性设置。 例如，如果从“解决方案资源管理器”中选择一个项，你会看到与该文件相关的属性设置。 如果在“设计器”中选择一个对象，你会看到该项目的设置。
命名空间、布局、添加控件
命名空间、布局、添加控件

  1. 文档根 <Window> 表示 XAML 文件描述的对象的类型。 它声明八个特性，这些特性通常分为三类：

    1. 命名空间
      XML 命名空间为 XML 提供结构，确定可在文件中声明的 XML 内容。

      主要 xmlns 特性将导入整个文件的 XML 命名空间，在本例中，将映射到 WPF 声明的类型。 其他 XML 命名空间声明一个前缀，并导入 XAML 文件的其他类型和对象。 例如，xmlns:local 命名空间声明 local 前缀，并映射到项目声明的对象，即，在 Names 代码命名空间中声明的对象。

    2. x:Class 特性
      此特性将 <Window> 映射到代码定义的类型：MainWindow.xaml.cs 或 MainWindow.xaml.vb 文件，即 Names.MainWindow 类。

    3. Title 特性
      在 XAML 对象上声明的任何常规特性都会设置该对象的属性。 在本例中，Title 特性将设置 Window.Title 属性。

  2. 布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>

         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
     </Grid>

    上面代码使用了Grid布局定义两行两列，将网格划分为四个单元格。

  3. 添加控件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Label>Names</Label>
      <ListBox Grid.Row="1" x:Name="lstNames" />
      <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
          <TextBox x:Name="txtName" />
          <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
      </StackPanel>
    </Grid>

  4. 为 Click 事件添加代码
    我们创建的 <Button> 具有一个 Click 事件，该事件在用户按下按钮时引发。 你可以订阅此事件并添加代码，以便向列表框添加名称。 就像通过添加 XAML 特性在控件上设置属性一样，你可以使用 XAML 特性来订阅事件。 将 Click 特性设置为 ButtonAddName_Click

5.运行应用

,