Silverlight 自定義控制項類別庫程式設計

文：吳俊毅
日期：2009/5/18

準備環境：
在開發Silverlight控制項之前，筆者還是要來確認一下讀者環境(只有Silverlight會如此)，因Silverlight Tool Kit到了2.0一樣歷經多次的改版，不同版本的Tool Kit恐會造成執行結果的差異，所以請讀者依照筆者環境如下：

1. Visual Studio 2008 Standard或更高的版本，筆者使用Team Syatem，不過基本上這沒有影響，下面第2項則一定要安裝。
2. Visual Studio 2008 SP1
3. Microsoft® Silverlight™ Tools，版本代碼為(9.0.30729.146.03)，可在下列網址下載
http://www.microsoft.com/downloads/details.aspx?displaylang=zh-tw&FamilyID=c22d6a7b-546f-4407-8ef6-d60c8ee221ed。

需要注意，Microsoft® Silverlight™ Tools必須下載SP1的版本，否則無法安裝成功，至於Microsoft Expression Blend 2工具讀者可以自行選擇要不要安裝，本文不會使用到此工具。
安裝完成Visual Studio 2008環境等相關版本應如下圖：

好！環境確認完畢之後筆者要開始進入今天的主題，我們要來開發一個身分證字號檢查的TextBox控制項，當然筆者會繼承Silverlight的TextBox控制項來實做，首先開一個Silverlight應用程式專案，並命名為SilverlightControlTestApp，並使用在ASP.NET專案中開起Silverlight專案，如下圖:

這兩種類型不是今天討論的重點，有興趣的讀者可參考其他相關文章，在專案開起完成後讀者在方案總管應會看見兩個專案，一個是SilverlightControlTestApp另一個是SilverlightControlTestApp.Web，最上面的SilverlightControlTestApp才是Silverlight專案，它的編譯結果會產生.xap的目的檔案。接著開啟Page.xaml畫面設計好Silverlight的UI畫面，如下，筆者使用Grid的ColumnDefinitions與RowDefinitions的功能將Grid分割成兩個Column與三個Row，第一個Column用120px的寬度，第二個Column則用剩下的所有寬度，在定義兩個高度50px的Row以便我們配置TextBlock與TextBox控制項，請對XAML編輯區輸入如下XAML Code程式碼，在輸入完成時VS.NET的視覺化環境即可以呈現XAML Code的UI效果，畫面如下：

OK，完成這個部分讀者發現上面少了身分證字號的TextBox，別急我們現在就要來設計這個自動檢查身分證字號的TextBox，首先從現有Solution再新增一個Silverlight類別庫的專案，利用這個類別庫繼承TextBox來實做，不過要做到身分證字號的一個檢查當然我們必須要有演算法，筆者腦袋也記不了這麼多演算法，這時候筆者也要請Google大師幫忙一下了。

筆者總算在Google搜尋找到相關的資料如下：

而筆者需要的也是這些A~Z字母所代表的對應數值，因記得身分證有幾個位數是表示檢查碼的，有了這個詳盡的說明就可以幫助筆者將它翻成C#程式碼。於是針對這個國民身分證統一編號檢查方法，筆者就把它當作一個需求，筆者對SilverlightTextBoxLib專案的class新增一個CheckIsAID(string AID)方法來實做這個檢查，它會傳回一個bool型態，如果驗證成功它會回傳true，失敗回傳false，以下為筆者撰寫的程式碼：
bool CheckIsAID(string AID)
{
var checkNum = new string[] { "A 10", "B 11", "C 12", "D 13", "E 14", "F 15", "G 16", "H 17", "I 34", "J 18", "K 19", "L 20", "M 21", "N 22", "O 35", "P 23", "Q 24", "R 25", "S 26", "T 27", "U 28", "V 29", "W 32", "X 30", "Y 31", "Z 33" };
var wordQuery = from word in checkNum
where word[0] == AID[0]
select word;

foreach (string aid in wordQuery)
{
string[] aid_key = aid.Split(new char[] { ' ' });
decimal A0 = (int.Parse(aid_key[1][0].ToString()) + (int.Parse(aid_key[1][1].ToString()) * 9)) % 10;
decimal sum = A0 * 1
+ int.Parse(AID[1].ToString()) * 8
+ int.Parse(AID[2].ToString()) * 7
+ int.Parse(AID[3].ToString()) * 6
+ int.Parse(AID[4].ToString()) * 5
+ int.Parse(AID[5].ToString()) * 4
+ int.Parse(AID[6].ToString()) * 3
+ int.Parse(AID[7].ToString()) * 2
+ int.Parse(AID[8].ToString()) * 1
+ int.Parse(AID[9].ToString()) * 1;

if (sum % 10 != 0)
return false;
}
return true;

}

這段程式碼其實並不難，讀者並不一定要按照筆者的做法，可以參照說明自行寫一個，那麼因為是開發控制項，所以筆者想撰寫一個事件，當驗證失敗時即觸發這個事件，透過事件的方式比較容易讓系統開發者使用並決定當驗證失敗時要做什麼事情等，於是筆者宣告NoneAIDExceptionEvent的delegate如下：
public delegate void NoneAIDExceptionEvent(object sender, EventArgs e);

再宣告一個NoneAIDExceptionEventHandler事件：
public event NoneAIDExceptionEvent NoneAIDExceptionEventHandler;

然後呢，筆者想用最簡單的方式就讓它在OnLostFocus時檢查好了，因此我們必須override TextBox控制項的OnLostFocus事件，在這個事件理呼叫CheckIsAID()方法檢查身分證字號，若不通過再判定如果NoneAIDExceptionEventHandler事件存在參考時就呼叫系統指定執行的處理程序，這個程式碼筆者撰寫如下：
protected override void OnLostFocus(RoutedEventArgs e)
{
base.OnLostFocus(e);

if (this.Text != "")
{
if (!CheckIsAID(this.Text))
{
if (NoneAIDExceptionEventHandler != null)
{
NoneAIDExceptionEventHandler(this, e);
}
}
}
}

到這裡都完成之後我們可以將專案SilverlightTextBoxLib編譯一下，編譯成功後我們回到剛才SilverlightControlTestApp專案的Page.xaml畫面，並將剛才編譯完成的專案SilverlightTextBoxLib的SilverlightTextBox控制項加入到工具箱中，如下圖所示：

完成如上動作後請直接將SilverlightTextBox控制項拖曳到Page.xmal畫面中，這時候IDE工具便會自動幫您宣告xmlns命名空間並預設使用”my”來識別，眼尖的讀者會發現IDE會在我們的XAML程式碼裡的<usercontrol>後加入一段宣告xmlns:my="clr-namespace:SilverlightTextBoxLib;assembly=SilverlightTextBoxLib"，指定來源的命名空間與組件名稱，因為那個SilverlightTextBox的類別庫專案的主命名空間與組件名稱相同，所以看起來都是SilverlightTextBoxLib，若不很了解也沒關係，把它想成是ASP.NET的指示詞就好，因為以下使用到該組件的控制項都會以<my:做為開頭。

控制項放置好之後，同樣的替控制項指定放置在Grid.Column=”1”與Grid.Row=”1”表示第二欄的第二列中，並一樣設定VerticalAlignment=”center”與HorizontalAlignment=”Left”表示垂直至中與靠左，並指定一下控制項的Width=”130”這樣看起來比較美觀一點，這時筆者的設計畫面看起來如下圖所示：


如圖，這時設計畫面可以看見這個自訂義的控制項，喔！對了，還忘了一件事，替控制項撰寫剛剛設計的NoneAIDExceptionEventHandler事件，我看我們就在這個事件理秀一個MessageBox訊息吧。要在Silverlight控制項加入事件得從XAML程式中下手，直接輸入對應事件名稱IDE便會自動幫您完成，並加入對應的事件處理程序，如下圖所示：


完成後可在事件上按右鍵選擇”巡覽至事件處理常式”便可以開始寫Code了，筆者的程式碼如下：
private void txtAID_NoneAIDExceptionEventHandler(object sender, EventArgs e)
{
MessageBox.Show("輸入的身分證字號不正確！", this.Content.ToString(), MessageBoxButton.OK);
}
這程式很容易就是秀個對話框，完成到這裡我們可以開始來編譯執行一下看看執行結果，執行結果如下：


各位會發現若身分證字號任意輸入如F111111111等不正確的值當Focus移開時便會跳出對話框，若輸入自己的身分證號碼則不會跳出該對話框表示驗證OK！

經過這個練習後相信對於Silverlight控制項的開發有一些初步的了解了，下次筆者再深入介紹Silverlight其它進階的功能。