别让用户干等---给你的WinForms程序加上启动动画

现在的程序，越来越讲究UX了（用户体验），能否赢得用户的青睐，很多时候是由UX的高低来决定的．

今天，我来为大家介绍一下，如何在WinForms下提高应用程序UX的一点研究：给你的程序加个启动动画．内容很初级，高手可以直接Next了．

好，我们直接切入主题．大家知道，当我们使用Office或VS时，首先会显示一张好看的启动图片（或动画），等所有内容在后台加载完了，才显示出Office或VS的操作主界面．这样的做法，大家可谓是司空见惯了，但它是如何现实的呢？

其实，现实起来也不难，主要的思路是这样的：

先制作一个窗口，将背景设计为你的启动图片
在Main方法中，开两个线程：第一个线程，显示带有图片的窗口．第二个线程，加载后台所需要的资源，如外部文件，数据库连接等等．
在第二个线程中，实时报告加载的进度，将进度显示在第一个窗口中．
Main线程等待第二线程，直到所有资源加载完毕．
所有资源加载完毕后，Main线程关闭带有图片的窗口，显示主窗口（真正的操作界面）给用户．
程序启动完毕．
 

下面用UML的时序图来说明这一过程：





 

下面，我们来仔细看一看，如何在.NET中现实这一功能：

第一步，还是制作启动窗口，并为其加上背景图片，标题和状态．





第二步，在Main方法中编写主要的代码．

/// <summary>

/// The main entry point for the application.

/// </summary>

[STAThread]

static void Main()

{

Application.EnableVisualStyles();

Application.SetCompatibleTextRenderingDefault(false);

//Thread to show splash window

Thread thUI = new Thread(new ThreadStart(ShowSplashWindow));

thUI.Name = "Splash UI";

thUI.Priority = ThreadPriority.Normal;

thUI.IsBackground = true;

thUI.Start();

//Thread to load time-consuming resources.

Thread th = new Thread(new ThreadStart(LoadResources));

th.Name = "Resource Loader";

th.Priority = ThreadPriority.Highest;

th.Start();

th.Join();

if (SplashForm!=null)

    {

    SplashForm.Invoke(new MethodInvoker(delegate { SplashForm.Close(); }));

}

thUI.Join();

Application.Run(new frm_Main());         

}

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

 

SplashForm是Program类中一个Static的属性，用来跨线程访问的．我这里没有处理线程安全问题，大家可以按实际情况，加个Lock

public static frm_Splash SplashForm

{

get;

set;

}

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

 

下面是显示启动窗口的代码，很简单．

private static void ShowSplashWindow()

{

SplashForm = new frm_Splash();

Application.Run(SplashForm);

}

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

 

加载资源的代码，关键是要实时更新加载的进度和状态．其实可以抽出一个方法专门更新Status，以免像下面的代码重复．

private static void LoadResources()

{

for (int i = 1; i <=15; i++)

    {

    if (SplashForm != null)

{

        SplashForm.Invoke(new MethodInvoker(delegate { SplashForm.lblStatus.Text = "Loading some things... " + DateTime.Now.ToString(); }));

    }

    Thread.Sleep(100);   

}

SplashForm.Invoke(new MethodInvoker(delegate { SplashForm.lblStatus.Text = "Done. " + DateTime.Now.ToString(); }));

}

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

 

注意，不要试图在这个方法中更新lblStatus.Text，那样会有Exception有现．

必须要调用SplashForm.Invoke．这是因为SplashForm和它的控件是在另一个线程中建立的，.NET默认不允许其他线程更新控件的状态．

而Invoke，是代表用建立控件的那个线程调用代理中的方法．

 

到此，所有工作完成．下图是运行时的效果．





 

Demo下载：

SplashDemo.rar