初學Windows Phone：彈出式(popup)頁面加截狀態提示

這個樣本主要是把popup封裝成一個能用的自訂類庫，當然在功能上還有很多不足，拋磚引玉吧。

1.建立一個Windows Phone項目（PhoneApp1）。
2.在解決方案中再建立一個Windows Phone的類庫項目(CusPopup)。
3.PhoneApp1引用CusPopup。
4.在CusPopup中建立一個使用者自訂控制項(PopupPannel.xaml)。
5. 在CusPopup中建立一個類檔案(PopupMain.cs)。
註：PhoneApp1用來做樣本示範，CusPopup是我們要做功能的主要部分，其中PopupPannel.xaml的作用是彈出層的內容，賦給Popup.Child，這裡的內容很簡單我只放了一個TextBlock用於顯示進度；PopupMain.cs是主要功能類，它的作用是顯示/隱藏PopupPannel的內容，開啟一個後台進程，並做一些其它事情。
6.在PopupPannel.xaml頁中放入一個TextBlock控制項，位置和樣式根據需要調整。
7.PopupMain.cs的代碼如下：

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Windows;
 4 using System.Windows.Controls;
 5 using System.ComponentModel;
 6 using System.Windows.Controls.Primitives;
 7 namespace CusPopup
 8 {
 9     public  class PopupMain
10     {
11         private  Popup popup;
12         private  BackgroundWorker backgroundWorker;
13         private  Action<object, DoWorkEventArgs> dowork;
14         private  Action<object, RunWorkerCompletedEventArgs> runWorkerCompleted;
15         private  Action<object, ProgressChangedEventArgs> progressChanged;
16         /// <summary>
17 /// 開啟進度狀態顯示
18 /// </summary>
19         public  void OpenPopup()
20         {
21             if (popup == null)
22                 popup = new Popup();
23             popup.Child = new CusPopup.PopupPannel();
24             popup.IsOpen = true;
25             
26         }
27         /// <summary>
28 /// 關閉進度狀態顯示
29 /// </summary>
30         public void ClosePopup()
31         {
32             popup.IsOpen = false;
33         }
34         /// <summary>
35 /// 進度改變後把資訊顯示到頁面上
36 /// </summary>
37 /// <param name="ProgressPercentage"></param>
38         public void BackgroundWorkerProgressChanged(int ProgressPercentage)
39         {
40             CusPopup.PopupPannel cuspopup = popup.Child as CusPopup.PopupPannel;
41             cuspopup.textBlock2.Text = string.Format("{0}%", ProgressPercentage);
42  
43         }
44         /// <summary>
45 /// 開啟一個BackgroundWorker
46 /// </summary>
47 /// <param name="Dowork"></param>
48 /// <param name="RunWorkerCompleted"></param>
49 /// <param name="ProgressChanged"></param>
50 /// <param name="obj"></param>
51         public  void RunBackgroundWorker(Action<object,DoWorkEventArgs> Dowork, Action<object, RunWorkerCompletedEventArgs> RunWorkerCompleted, Action<object, ProgressChangedEventArgs> ProgressChanged,object obj=null)
52         {
53             dowork = Dowork;
54             runWorkerCompleted = RunWorkerCompleted;
55             progressChanged = ProgressChanged;
56             backgroundWorker = new BackgroundWorker();
57             backgroundWorker.WorkerReportsProgress = true;
58             backgroundWorker.DoWork += new DoWorkEventHandler(backgroundWorker_DoWork);
59             backgroundWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(backgroundWorker_RunWorkerCompleted );
60             backgroundWorker.ProgressChanged += new ProgressChangedEventHandler(backgroundWorker_ProgressChanged);
61             backgroundWorker.RunWorkerAsync(obj);
62         }
63  
64          void backgroundWorker_ProgressChanged(object sender, ProgressChangedEventArgs e)
65         {
66             progressChanged(sender, e);
67         }
68  
69          void backgroundWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
70         {
71             if (runWorkerCompleted != null)
72                 runWorkerCompleted(sender,e);
73         }
74  
75          void backgroundWorker_DoWork(object sender, DoWorkEventArgs e)
76         {
77             if (dowork != null)
78                 dowork(sender, e);
79  
80         }
81     }
82 }

 8.在PhoneApp1中的MainPage.xaml.cs中寫如下代碼：

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Net;
 5 using System.Windows;
 6 using System.Windows.Controls;
 7 using System.Windows.Documents;
 8 using System.Windows.Input;
 9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12 using Microsoft.Phone.Controls;
13 using System.Threading;
14 using System.ComponentModel;
15 using System.Windows.Controls.Primitives;
16 namespace PhoneApp1
17 {
18     public partial class MainPage : PhoneApplicationPage
19     {
20         CusPopup.PopupMain popupMain;//定義一個對象
21         public MainPage()
22         {
23             InitializeComponent();
24             popupMain = new CusPopup.PopupMain();//初始化
25             showPopup();
26         }
27         /// <summary>
28 /// 執行
29 /// </summary>
30         private void showPopup()
31         {
32             popupMain.OpenPopup();//開啟層
33 //開啟一個後台進程，並做一些其它的
34             popupMain.RunBackgroundWorker(                
35                 (obj, doWorkEventArgs) =>
36                 {
37                     DoWork(obj, doWorkEventArgs);
38                 },                
39                 (obj, runWorkerCompletedEventArgs) =>
40                 {
41                     RunWorkerCompleted(obj, runWorkerCompletedEventArgs);
42                 },                
43                 (obj, progressChangedEventArgs) =>
44                 {
45                     ProgressChanged(obj, progressChangedEventArgs);
46                 },
47                 null);
48             
49         }
50         
51  
52         void ProgressChanged(object sender, ProgressChangedEventArgs e)
53         {
54             popupMain.BackgroundWorkerProgressChanged(e.ProgressPercentage);
55         }
56  
57         void RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
58         {
59             //Do Something
60             popupMain.ClosePopup();
61         }
62  
63         void DoWork(object sender, DoWorkEventArgs e)
64         {
65             BackgroundWorker worker = sender as BackgroundWorker;
66             for (int i = 0; i < 100; i++)
67             {
68                 worker.ReportProgress(i + 1);
69                 Thread.Sleep(100);
70             }
71         }
72     }
73 }

 在這裡，DoWork我只是做了一個迴圈延時，然後把進度報告給BackgroundWorker,並執行BackgroundWorkerProgressChanged使介面上的文字發生變化顯示。RunWorkerCompleted完成後關閉狀態進度。方法的最後一個參數為null，如果DoWork需要參數可以從這裡傳入。源碼下載