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程序所需的基本理论。想象一下现在你可以使用一些技巧创建其他诸如下拉列表，复选框，滑块等等的交互对象。
你甚至可以建立你自己的控件库，以在你的项目中重用它们。

转载于:https://www.cnblogs.com/lsxqw2004/archive/2008/12/13/1354319.html