WPF 简介

下载次数

• 下载 IntroToWPF.zip - 51.2 KB

本教程将学习的内容 

本教程将介绍 WPF 的一些基础知识，并为您后续学习其他 WPF 概念打下基础。

最终成果

完成本教程后，您将拥有一个简单的 WPF 版“Hello World”应用程序。

教程 

关于 WPF 的一些背景介绍 

WPF（Windows Presentation Foundation）是由微软设计，旨在替代老旧的 WinForms API。WPF 与其他三个组件 WCF（Windows Communication Foundation）、WF（Windows Workflow Foundation）和 CardSpace 一起构成了 .NET 3.0 中的大部分新功能。


现在，我们对 WPF 有了一些背景了解，让我们开始吧！首先，使用“文件”>“新建”>“项目”来创建一个新的 WPF 应用程序。选择 C# 中的 WPF 应用程序，并将其保存在您觉得合适的位置。
我们首先来检查 WPF 模板中的代码。

<Window x:Class=WpfApplication1.Window1
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Title=Window1 Height=300 Width=300>
    <Grid>
        
    </Grid>
</Window>  

上面的代码的作用是创建我们的窗口，并在其中放置一个 Grid（网格）。
这段代码是用 XAML 编写的，这是一种与 WPF 一起使用的类似 XML 的语言。每个标签都可以表示一个对象，例如 Grid 或 Button，也可以表示不在主标签内定义的属性。虽然关于属性的最后一点听起来可能令人困惑，但别担心，我稍后会详细解释。
现在，让我们继续创建我们的第一个功能性应用程序，它（您猜对了）是一个“Hello World”程序。
删除 Grid 标签，使代码如下所示

<Window x:Class=WpfApplication1.Window1
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Title=Window1 Height=300 Width=300>
</Window>

现在，我们将使用这段 XAML 代码添加一个 Button 类对象。将此代码添加到您的 Window 标签内

<Button></Button>

此标签等同于以下 C# 代码

new Button();

现在，这段 C# 代码实际上并没有在屏幕上创建一个按钮，它只是实例化了一个 Button 类。我们需要通过其他一些方法才能将其显示在窗口中。但是，底层概念是相同的。
请注意，我们的新按钮没有关联的变量名。在 XAML 中，我们必须为对象设置 Name 属性，该对象才能拥有名称。
有了这个，我们可以得到以下代码

<Button Name=myButton></Button>

这在根本上等同于以下 C# 代码

Button myButton = new Button(); 

请记住，编写此 XAML 将实际创建一个可在关联的 C# 代码中访问的对象

<Button Name=myButton></Button>

这意味着，当 myButton 在 XAML 中声明时，我们可以在 C# 代码中更改其属性，如下所示

myButton.Background = Brushes.Black;

我们也可以在 XAML 中设置属性，如下所示

<Button Background=Black></Button>

现在，让我们回到代码。我们将创建一个按钮并设置其 Name 属性和 Click 事件处理程序，然后在单击按钮时执行一些 C# 代码。
创建一个名为 HelloWorld 的新按钮，如下所示

<Button Name=HelloWorld></Button>

现在，将 Click 事件处理程序设置为一个新事件。在 Name 属性之后键入 Click，让 Intellisense 自动填充：Click="" 然后，通过单击<New Event Handler>来让它创建一个新的方法作为事件处理程序。
现在，您的 Button 标签应该如下所示

<Button Name=HelloWorld Click=HelloWorld_Click></Button>

现在，我们将填充按钮标签的开始和结束标签之间的内容，以显示按钮上的文本。编写此代码将生成一个带有文本 “Hello, World!” 的按钮

<Button Name=HelloWorld Click=HelloWorld_Click>Hello, World!</Button>

还有另一种设置标签之间内容的方法。我们可以将 Content 属性设置为我们想要放在标签内的内容，只要主标签内没有嵌套标签即可。这同样适用于普通属性。因此，这将产生与我们之前编写的代码相同的结果

<Button Name=HelloWorld Click=HelloWorld_Click Content=Hello, World!/>

无论如何，请将其改回，因为我们将对这个按钮做更多的事情。现在，让我们来尝试 Background 属性

<Button Name=HelloWorld Click=HelloWorld_Click Background=Gray>
    Hello, World!</Button>

这会将我们的按钮变成灰色。但是，我们可以通过将 Background 属性展开成自己的 Button.Background 标签来应用更复杂的背景。请看以下示例

    <Button Name=HelloWorld Click=HelloWorld_Click>
        Hello, World!
        
        <Button.Background>
            <LinearGradientBrush>
                <GradientStop Offset=0 Color=Black/>
                <GradientStop Offset=1 Color=Gray/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>

将此添加到您的 Window 标签中，然后按 F5 运行程序。您会注意到，现在您有一个按钮，从左上角的黑色渐变到右下角的灰色。
让我们进一步研究。Button.Background 标签允许添加更复杂和嵌套的画笔（颜色等）。下一个嵌套标签 LinearGradientBrush 定义了一个 LinearGradientBrush。我们可以设置它的更多属性，例如 StartPoint 和 Endpoint，但这些将不在此介绍。
LinearGradientBrush 标签内部有两个 GradientStops。这些是渐变中使用的颜色。尝试添加另一个 GradientStop。为什么它没有显示出来？这是因为我们需要调整偏移量。显示每种颜色相等部分的最高偏移量是 1，所以我们需要将 1（显示每种颜色相等部分的最高偏移量）除以 2（有三个渐变，但第一个无论其他偏移量如何都会显示）。因此，这为每个 GradientStop.Offset 提供了 .5 的增量。
您的三色渐变代码将如下所示

     <Button Name=HelloWorld Click=HelloWorld_Click>
        Hello, World!
        
        <Button.Background>
            <LinearGradientBrush>
                <GradientStop Offset=0 Color=Black/>
                <GradientStop Offset=.5 Color=Gray/>
                <GradientStop Offset=1 Color=Antique White/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>

现在，让我们保持原始代码，只有两个偏移量。现在，让我们开始 C# 部分。右键单击按钮标签的开头，然后单击“导航到事件处理程序”。因为我们为 Button 定义了 Name 属性，所以我们可以像访问其他对象一样按名称访问我们的 Button。因此，现在我们将添加一些代码来更改按钮的文本并禁用它。将此添加到您的 HelloWorld_Click 方法中

HelloWorld.IsEnabled = false;
HelloWorld.Content = Clicked;

这应该很容易理解。它将 IsEnabled 属性设置为 false，禁用按钮，然后将 Content 属性设置为 “Clicked”。请记住，Content 属性等同于对象主标签之间的任何内容，但不包括嵌套在主标签内的标签。您的最终 XAML 应如下所示

<Window x:Class=WpfApplication1.Window1
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Title=Window1 Height=300 Width=300>
    
    <Button Name=HelloWorld Click=HelloWorld_Click>
        Hello, World!
        
        <Button.Background>
            <LinearGradientBrush>
                <GradientStop Offset=0 Color=Black/>
                <GradientStop Offset=1 Color=Gray/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>
</Window>  

您的最终 C# 应如下所示

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            
        }

        private void HelloWorld_Click(object sender, RoutedEventArgs e)
        {
            HelloWorld.IsEnabled = false;
            HelloWorld.Content = Clicked;
        }
    }
}

感谢阅读，更多 WPF 教程即将推出！