练习 - 编写 Windows 窗体应用

已完成

Screenshot that shows the UWP, WPF, and Windows Forms logo.

Windows 窗体基于备受尊崇的 Win32 API,仍是一种常用 UI 技术,用于开发不需要任何花哨功能的工具和实用程序。 使用 Windows 窗体生成的应用可以在 Windows 台式机、笔记本电脑和平板电脑上运行,几乎所有使用过计算机的人都会看到类似的外观。

在本单元中,我们将:

  • 使用 Visual Studio 创建 Windows 窗体项目。
  • 将 UI 和代码元素添加到项目中,创建“hello world”程序的有趣变体。 每次选中“Say hello”按钮时,“Hello there!”文本会随机改变颜色。
  • 了解如何设置属性和创建事件。

备注

你的计算机应已安装 Windows 和 Visual Studio,如 Learn 模块“Windows 10 开发简介”中所述。

Windows 窗体“Say hello”教程

创建项目

  1. 打开“Visual Studio”,依次选择菜单中的“文件”>“新建”>“项目”。 选择“C#”作为项目语言,在项目选项中找到并选择“Windows 窗体应用”。 将“名称”更改为“Say hello”等易记名称,并在完成后选择“下一步”。

    Screenshot that shows the Configure your new project window for a Windows Forms App with the Next button selected.

  2. 选择所用 .NET 版本,然后选择“创建”。

  3. 默认情况下,“工具箱”、“解决方案资源管理器”和“属性”窗格都会打开。 如果未打开,请从“视图”菜单打开它们。 展开“工具箱”中的“常见控件”列表。

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

生成 UI

  1. 在 Form1 的“属性”窗格打开后,将“文本”条目从“Form1”更改为“Say hello”。 从屏幕的另一侧,将“按钮”从“工具箱”拖到窗体的下半部分,并将“文本框”拖到窗体的上半部分。 然后稍微加宽一点文本框,让设计如下所示:

    Screenshot that shows a button and text box dragged onto the design layout.

  2. 选择按钮,以显示它的属性。 将“名称”更改为“SayHelloButton”,再向下滚动属性,并将“文本”属性更改为“Say hello”。

    Screenshot that shows the Name property set in the Properties window.

    Screenshot that shows the Text property set in the Properties window.

  3. 需要向按钮附加事件。 若要附加事件,可以选择“设计”视图中的按钮,或选择“属性”中的事件图标,再按 Enter 或选择 Click 事件条目。 无论你选择哪种方法,Visual Studio 都会自动将事件“SayHelloButton_Click”的大纲代码添加到 Form1.cs 文件中,并打开此文件。 快速浏览一下,然后回到设计视图。

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

    注意

    如果意外关闭了“设计”视图,只需双击“解决方案资源管理器”中的“Form1.cs”即可再次打开它。 在“设计”视图中打开 Windows 窗体中的窗体是 Visual Studio 中的默认操作。

  4. 选择“设计”视图中的文本框,以打开它的属性。 如果使用事件列表方法添加按钮事件,请在“属性”中选择扳手和文档图标。 保留“名称”条目的值“textBox1”。 选择“字体”旁的加号,然后将字号更改为 24。 接下来,向下滚动一点属性,将“文本”属性更改为“Hello there!”,并将“文本对齐方式”更改为“居中”。

    Screenshot that shows the Textbox properties with the Name, BorderStyle, and font size set in the Properties window.Screenshot that shows the additional Textbox properties of Text and TextAlign set in the Properties window.

添加代码

  1. 现在,切换主视图,以便查看 Form1.cs。

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  2. 必须添加类别级变量 Random rand,才能显示随机文本颜色。 需要在 Form1 构造函数方法中初始化它,并输入方法来在短字节数组中填充随机数。 复制并粘贴或键入以下代码行:

    public partial class Form1 : Form
    {
        private Random rand;
    
        public Form1()
        {
            InitializeComponent();
            rand = new Random();
        }
    
        private byte[] GetRandomBytes(int n)
        {
            // Fill an array of bytes of length "n" with random numbers.
            var randomBytes = new byte[n];
            rand.NextBytes(randomBytes);
            return randomBytes;
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  3. 若要在用户每次选择“Say hello”按钮时更改文本颜色,请将 SayHelloButton_Click 方法的主体添加到程序中。

        private void SayHelloButton_Click(object sender, EventArgs e)
        {
            // Declare an array of bytes and fill it with random numbers
            byte[] rgb = GetRandomBytes(3);
            textBox1.ForeColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
        }
    
  4. 请花费片刻时间查看你的代码。 如果任何内容有红色下划线,表明有地方存在问题。 可能是单词拼写错误,也可能是一些代码放错了位置。

运行

接下来,将编译并运行程序!

  1. 在 Visual Studio 中的“调试”菜单上,选择“开始执行(不调试)”,或者仅选择 F5 键。 如果所有内容都已正确输入,你应会看到一个正在运行的应用,如下所示:

    Screenshot that shows the app running. Hello there displays in bright green text with the Say hello button below it.

  2. 在几秒钟的生成时间之后,反复选择“Say hello”,并观察“Hello there!”文本的颜色变化。

如果能看到,那就大功告成了! 你已完成本教程。 如果没有看到,请仔细重新检查代码和 UI 属性设置,看看哪里出错了。