Nibblestutotials.net教程 – Blend & Silverlight1系列之Button Advanced

文中源檔案：part1, part2

creating multiple buttons: creating the key class

這一小部分（nibble）中將教您怎樣使用複製同一XAML檔案的方法建立多個按鈕。我們將使用一個名為Key.xaml的檔案製作一個數字鍵台。

我們將使用提供的映像及動畫開始教程。如果您對在Blend的中繪圖及製作動畫還有疑問請查看Buttons Basics這部分。

完成此教程，你需要安裝Expression Blend 2的9月預覽版及Visual Studio 2005、Orcas Beta版或以上版本。

1. 開啟提供的專案檔
   用Blend開啟提供的專案檔：
   a. 選擇 檔案 > 開啟項目…
   b. 瀏覽到你的專案檔夾。
   c. 雙擊 keyboard.csproj檔案。
   這個項目中，你會找到運行一個Silverlight程式所需的所有檔案，需要注意以下兩個檔案：
   Scene.xaml：這個檔案是空檔案。我們將使用JavaScript來建立按鈕而不是Blend。
   Key.xaml：這是我們的數字鍵台所需要的圖片。注意這個XAML檔案有兩條時間軸：mouseEnter和mouseLeftButtonDown。它們將在代碼的驅動下建立按鈕的狀態。
   
2. 建立一個新的JavaScript檔案（Key.js）
   a. 在項目面板檔案地區中，右擊項目名並選擇在Visual Studio中編輯。
   b. 在Visual Studio中，右擊項目名，選擇 添加 > 建立項… 在添加新項對話方塊選擇Jscript檔案。並將其命名為Key.js。
   c. 點擊添加按鈕。新的JavaScript檔案將被開啟並處於待編輯狀態。
   
3. 添加建構函式
   a. 添加下面幾行代碼Keyboard.Key = function(control, target, key, x, y) 
   {
   this.target = target;
   this.key = target.findName("keyText");
   this.mouseEnter = target.findName("mouseEnter");
   this.mouseDown = target.findName("mouseLeftButtonDown");
   }

   這幾行代碼建立了到button對象(this.target)，表示字母或數位文字區塊(this.key)及定義了兩個按鈕狀態的動畫的引用(this.mouseEnter及this.mouseDown)。
   在到this.mouseDown的引用的代碼的後面，添加如下代碼：this.target.cursor = "Hand";

   這一行將滑鼠移到按鈕上是的指標樣式變為手形。this.target["Canvas.Top"] = y;
   this.target["Canvas.Left"] = x;

   這兩行根據值傳遞的參數改變按鈕的位置。this.key.Text = key;

   最後一行改變按鈕的文本。
   最後，我們為每種狀態添加事件監聽器。this.target.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter));
   this.target.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));
   this.target.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   this.target.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseUp));

   現在按鈕的每種狀態有了在滑鼠發生相應事件時要被觸發的函數。這些函數將在下一步中定義。
   參考圖片
   

4. 添加事件控制代碼
   a. 添加如下代碼：Keyboard.Key.prototype =
   {
           handleMouseEnter: function(sender, eventArgs) 
            {
       this.mouseEnter.begin();
           },
           handleMouseLeave: function(sender, eventArgs) 
           { 
   this.mouseEnter.stop();
               },
               handleMouseDown: function(sender, eventArgs) 
               {
           this.mouseDown.begin();
               },
               handleMouseUp: function(sender, eventArgs) 
               {
                this.mouseDown.stop();
               }
   }

   這些事件僅僅是開始並停止我們在Blend中建立的時間軸。使用這個模型能使開發人員與設計人員之間有更大的靈活性。
   參加圖片
   

5. 在HTML中添加對Key.js的引用
   不要忘記添加以下行到Default.html中：<script type="text/javascript" src="Key.js"></script>

   參見圖片
   

6. 現在你已經擁有了Key類，接下來將要修改Scene.xaml.js檔案來執行個體化這些"keys"以建立我們的數字鍵台。

 

creating multiple buttons part2: the main scene

1. 開啟提供的專案檔
   在Blend中開啟本部分所用的專案檔。
   a. 選擇 檔案 > 開啟項目…
   b. 瀏覽並找到存放項目的檔案夾。
   c. 雙擊keyboard.csproj開啟它。
   
2. handleLoad方法
   在Visual Studio中開啟此項目
   a. 在項目面板檔案地區中，右擊項目名並選擇在Visual Studio中編輯。
   b. 在Visual Studio中，開啟Scene.xaml.js檔案。
   c. 向handleLoad方法中添加下面的代碼：this.keys = new Array();
           this.keys[0] = new Array("7","8","9");
           this.keys[1] = new Array("4","5","6");
           this.keys[2] = new Array("1","2","3");
           this.keys[3] = new Array("0",".",">");
           this.downloadKeyXAML();

   這些代碼定義了一個用來構建數字鍵台的數組，最後一行代碼開始下載Key.xaml檔案。
   

3. downloadKeyXAML()方法
   為了下載一個外部的XAML檔案，你需要使用一個Downloader對象：downloadKeyXAML: function()
       {
   var downloader = this.control.createObject("downloader");
   downloader.addEventListener("completed", Silverlight.createDelegate(this, this.keyDownloadFinished));
   downloader.open("GET", "Key.xaml");
   downloader.send();
   },

   在這個方法中：var downloader = this.control.createObject("downloader");

   第一行建立了一個下載對象。downloader.addEventListener("completed", Silverlight.createDelegate(this, this.keyDownloadFinished));

   第二行建立了一個下載完成後要觸發的事件。downloader.open("GET", "Key.xaml");

   第三行定義了將要被下載的XAML檔案。downloader.send();

   最後移行開始下載過程。
   參考
   

4. keyDownloadFinished()方法
   當下載完成時，keyDownloadFinished()將被調用，該方法建立了最後的對象。keyDownloadFinished: function(sender, eventArgs)
   {
   var xamlItem = sender.getResponseText("");
   for (var i=0; i < this.keys.length; i++)
   {
   for (var j=0; j < this.keys[i].length; j++)
   {
   var key = this.control.content.createFromXaml(xamlItem, true);
   this.rootCanvas.children.add(key);
   new Keyboard.Key(this.control, key, this.keys[i][j], j*70+30, i*70+30);
   }
   }
   }

   var xamlItem = sender.getResponseText("");

   第一行擷取下載的結果，一個用字串表示的XAML檔案。
   當XAML字串就緒後，代碼中開始了兩個for()迴圈來建立keys組成的行與列。這裡我們將看到3行代碼。var key = this.control.content.createFromXaml(xamlItem, true);

   在迴圈內部的第一行，我們有下載的XAML字串建立一個對象。注意，這個方法需要兩個參數。第一個是XAML字串。第二個是nameScope。
   當nameScope為TRUE時，每一個XAML對象的執行個體將擁有他自己的範圍（scope），那意味著對象與時間軸的名稱可以重複而不會產生衝突。this.rootCanvas.children.add(key);

   第二行將新建立的對象添加到主畫布內部的元素樹。沒有這一步元素將始終不可見。new Keyboard.Key(this.control, key, this.keys[i][j], j*70+30, i*70+30);

   迴圈內部的最後一行代碼建立了一個我們早期建立的Key類的執行個體。注意我們向Key的構造器傳了5個參數：
   this.control：Silverlight對象引用
   key：我們剛剛使用CreateFromXAML()方法建立的新對象執行個體
   this.keys[i][j]：我們在第二步建立的key的數目。
   j*70+30：X position
   i*70+30：Y position
   參考教程第一部分Key類的詳細描述
   

下一步…
這些是您建立大部分Silverlight程式所需的基本理論。想象一下現在你可以使用一些技巧建立其他諸如下拉式清單，複選框，滑塊等等的互動對象。
你甚至可以建立你自己的控制項陳列庫，以在你的項目中重用它們。