C# WPF上位机开发（第一个应用）

万事开头难，很多事情都是难在第一步。走出了这第一步，回过头看以前走的每一步，发现其实也不难。用c# wpf编写界面就是这样。传统的c# form，和delphi、vb、java swing这些开发模式其实差不多，主要就是通过所见即所得方法，借助于编辑软件自动生成图形界面的代码。而c# wpf则是更进了一步，它学习了web开发的先进概念，将图形化和业务逻辑实现了分离。

通俗一点的说，一个windows app可以分成两部分。做也界面的同学可以专注于界面开发。而做业务的同学可以专注于业务开发。两个人的工作都做好之后，合并在一起，就可以实现整个的winapp的运行。当然这是一种理想的情况，但是体现的原理还是比较清楚的，即界面的开发可以通过脚本文件独立进行。

1、创建工程

打开VisualStudio 2017，选择文件-》新建-》项目，在Visual C#中单击"Windows桌面"，选择"WPF应用"即可。

2、生成的文件

项目中生成的文件有一些，但是最重要的还是两个cs文件，以及一个xaml文件。cs文件，也就是项目的源代码文件，主要负责业务的实现，而xaml文件则负责界面的设计。

3、编译和执行

哪怕是默认创建的工程，本省都是可以运行的，直接单击"启动"后，出来的效果是这样的，

4、App.xaml.cs文件

这是整个应用的入口文件。如果有一些需要全局设置的代码，比如配置的加载、日志的写入、数据库的初始化、网络的初始化等等，都可以放在这个位置进行。

复制代码

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace WpfApp
{
    /// <summary>
    /// App.xaml 的交互逻辑
    /// </summary>
    public partial class App : Application
    {
    }
}

5、MainWindow.xaml.cs文件

这是第一个窗口文件。一个winapp本身可能包含了很多的窗口，MainWinow只是第一个窗口。所以说，我们后面如果需要实现不同的窗口，那么每一个窗口除了界面设计文件之外，也会有一个对应的cs文件。此外，窗口里面不同控件的回调函数，也都是在这个cs文件实现的，使用起来十分方便。

复制代码

using System.Linq;
using System.Text;
using System.Threading.Tasks;
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 WpfApp
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

6、MainWindow.xaml文件

这就是界面设计的地方。界面设计有两种方法，一种方法就是和c# form一样，直接从控件库里面，用鼠标拖进来即可。每一次有新的控件被放到页面当中，那么xaml就会自动添加对应的代码。另外一种方法，我个人认为更加方便，那就是直接编写xaml脚本来进行界面设计。当然，对于控件关联的函数，也是在xaml文件通过Click="OkButton_Click"这样的方式进行函数关联的。

复制代码

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</Window>

7、尝试添加编写一个登录窗口

为了编写一个登录窗口，我们有必要插入两个label、两个textbox、两个button。选用哪种方式来做，大家可以根据自己的习惯灵活做决定。最终xaml的基本应该是这样的，

复制代码

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Label Content="ID" HorizontalAlignment="Left" Margin="275,105,0,0" VerticalAlignment="Top"/>
        <Label Content="Name" HorizontalAlignment="Left" Margin="277,189,0,0" VerticalAlignment="Top"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="402,105,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="402,191,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120"/>
        <Button Content="OK" HorizontalAlignment="Left" Margin="257,272,0,0" VerticalAlignment="Top" Width="75"/>
        <Button Content="Cancel" HorizontalAlignment="Left" Margin="437,272,0,0" VerticalAlignment="Top" Width="75"/>

    </Grid>
</Window>

简单编译一下，不费什么力气，就可以看到这样的界面出来。关于按钮的关联函数怎么添加，我们下次来继续学习。