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版或以上版本。

打开提供的项目文件
用Blend打开提供的项目文件：
a. 选择文件 > 打开项目…
b. 浏览到你的项目文件夹。
c. 双击 keyboard.csproj文件。
这个项目中，你会找到运行一个Silverlight程序所需的所有文件，需要注意以下两个文件：
Scene.xaml：这个文件是空文件。我们将使用JavaScript来创建按钮而不是Blend。
Key.xaml：这是我们的数字键盘所需要的图片。注意这个XAML文件有两条时间轴：mouseEnter和mouseLeftButtonDown。它们将在代码的驱动下创建按钮的状态。
创建一个新的JavaScript文件（Key.js）
a. 在项目面板文件区域中，右击项目名并选择在Visual Studio中编辑。
b. 在Visual Studio中，右击项目名，选择添加 > 新建项… 在添加新项对话框选择Jscript文件。并将其命名为Key.js。
c. 点击添加按钮。新的JavaScript文件将被打开并处于待编辑状态。
添加构造函数
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));
现在按钮的每种状态有了在鼠标发生相应事件时要被触发的函数。这些函数将在下一步中定义。
参考图片
添加事件句柄
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中创建的时间轴。使用这个模型能使开发人员与设计人员之间有更大的灵活性。
参加图片
在HTML中添加对Key.js的引用
不要忘记添加以下行到Default.html中：
<script type="text/javascript" src="Key.js"></script>
参见图片
现在你已经拥有了Key类，接下来将要修改Scene.xaml.js文件来实例化这些"keys"以创建我们的数字键盘。

creating multiple buttons part2: the main scene

打开提供的项目文件
在Blend中打开本部分所用的项目文件。
a. 选择文件 > 打开项目…
b. 浏览并找到存放项目的文件夹。
c. 双击keyboard.csproj打开它。
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文件。
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();
最后移行开始下载过程。
参考下图
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

标签

downloader

xaml