CLR & Silverlight上海研发团队的Blog : Silverlight小贴士

让Silverlight开发更便捷——Silverlight工具集

SilverlightShanghai — Wed, 24 Dec 2008 05:55:00 GMT

CodePlex.com作为微软的开源社区，已经有越来越多的开发人员从中找到自己想要的东西（亦或代码示例，亦或实用工具）来帮助开发。同时，在微软内部，也有越来越多的开发团队选择了这种更轻量便捷的方式来发布一些有趣、实用却暂时无法放入品中的代码和工具。在前几篇博文中，我也介绍了上海开发团队负责维护的codeplex主页（http://www.codeplex.com/clrinterop），以及已经发布的一些有关interop的小工具。今天来介绍一个辅助Silverlight程序开发的codeplex主页——Silverlight工具集（Silverlight Toolkit）。它不是由上海团队负责维护的，但对Silverlight开发人员来说却非常实用。其名字也非常好记：http://www.codeplex.com/silverlight。

Silverlight工具集在正常的Silverlight发布周期之外，为Silverlight的开发设计人员提供了一系列控件、组件、一些功能的改进和其它实用内容。目前最新的版本所包含的内容包括树形控件（TreeView），自动完成输入框控件（AutoCompleteBox），输入框中的数字加减控件（NumericUpDown），展开控件（Expander），隐式样式管理器（ImplicitStyleManager），新的主题（Theme），图表等等。

来看下效果图：

最后祝大家圣诞快乐~ ：）

DLR in Silverlight

SilverlightShanghai — Thu, 18 Sep 2008 04:48:00 GMT

DLR(Dynamic Language Runtime)是Silverlight中提供的一套非常强大的动态语言运行时。目前2.0 beta2中支持Python，Ruby和JSX。
利用DLR，你可以很方便的使用熟悉的动态语言编写Silverlight程序。
本文主要介绍如何在托管语言中调用动态语言。

首先，我们需要初始化动态语言的环境配置，从中获取所有可以使用的动态语言列表，然后得到相应动态语言的运行引擎。

ScriptRuntimeSetup setup = new ScriptRuntimeSetup(true); //true表示载入所有支持的动态语言的环境配置
ScriptRuntime runtime = ScriptRuntime.Create(setup); //创建动态语言运行环境

foreach (LanguageProviderSetup langSetup in setup.LanguageProviders) //遍历所有动态语言的环境配置
{
    try
    {
        ScriptEngine engine = null;
        if (runtime.TryGetEngine(langSetup.Names[0], out engine)) //尝试获取动态语言的运行引擎
        {
            //engine就是我们需要的运行引擎
        }
    }
    catch (MissingTypeException) //处理创建不支持的动态语言时可能抛出异常
    {
    }
}

获取了运行引擎后，我们就可以执行动态语言的代码了

public class MyErrorSink : ErrorSink //编译错误处理
{
    IList<string> m_ErrorMsg = new List<string>();
    public IList<string> ErrorMsg
    {
        get { return m_ErrorMsg; }
    }

    public MyErrorSink()
    {
    }
    public virtual void Add(SourceUnit source, string message, SourceSpan span, int errorCode, Severity severity)
    {
        if (severity == Severity.Error || severity == Severity.FatalError)
        {
            m_ErrorMsg.Add(message);
        }
    }
}

LanguageContext langContext = HostingHelpers.GetLanguageContext(engine);
SourceUnit sourceUnit = langContext.CreateSourceUnit(new SourceStringContentProvider("1/4+3"), null, SourceCodeKind.Expression); //创建代码序列：1/4+3

MyErrorSink errorSink = new MyErrorSink();
try
{
    Scope scope = new Scope();
    object ret = sourceUnit.Execute(scope, errorSink); //执行动态语言代码，ret就是执行结果的返回值了

    if (errorSink.ErrorMsg.Count > 0) //检查编译错误
    {
        //
    }
}
catch (Exception)
{
}

是不是很方便呢 :-) 完整的DLR文档请参考http://compilerlab.members.winisp.net/dlr-spec-hosting.pdf（英文版）

PS：你也可以使用配置文件或者直接初始化动态语言运行引擎。

Software Development Engineer
范翔

获取并使用通过Downloader对象下载的内容

SilverlightShanghai — Sun, 02 Mar 2008 15:19:00 GMT

在《Silverlight中的Downloader对象》一文中，我们已经了解了一些关于Downloader的基本概念，以及如何使用Downloader来下载文件并根据需要触发一些事件。而本文我们将看一看在下载结束后，该怎样根据需要处理下载下来的文件。

处理下载下来的文件一般都在Completed事件的事件处理函数中。大多数情况下，我们需要用Downloader下载的文件可以分为如下几类：包含Silverlight中界面元素的XAML文件或处理逻辑的js文件，各种媒体文件（如图片、视频等等），字体文件，以及包含各种类型文件的压缩包文件（.zip文件）。接下来我们就这几种类型分别说明一下。并假设我们的Completed事件处理方法名为onCompleted。

1. 获取并使用下载的XAML元素

如果下载的是单个文件，而不是压缩包（.zip）的话，使用ResponseText 属性即可得到下载的文件。ResponseText表现为一个字符串，表示下载的文件名。要将下载的XAML中的对象加载到正在运行的Silverlight控件中，我们需要从下载的XAML中生成一个XAML元素对象。CreateFromXAML方法可以帮助我们实现这一点。其返回值为XAML对象的引用。

下面的这个例子即将下载的XAML加载到Silverlight控件中（假设下载的文件为描述背景画面的XAML片断）。这个例子首先查看uri属性来判断下载下来的文件是否是我们所需要的那个。调用Downloader.send()方法会将文件的URI赋予该属性。

// Completed事件的处理函数
function onCompleted(sender, eventArgs)
...{
    //使用uri属性保证要处理的下载的文件正确
    if (sender.uri == "background2.xaml")
    ...{
        // 获得下载的文件内容
        var xamlFragment = sender.ResponseText;

        // 从XAML中创建对象
        var plugin = sender.getHost();
        var background= plugin.content.CreateFromXaml(xamlFragment);

        // 将创建的对象加入到根Canvas中
        var rootCanvas = sender.findName("rootCanvas");
        rootCanvas.children.add(background);
    }
}

上面的例子为xamlFragment开辟了一个存储空间，通过使用xamlFragment变量来保存ResponseText的值，然后再通过该变量创建XAML对象的引用。我们也可以使用CreateFromXAMLDownloader方法直接从下载的XAML片断中创建对象。基本用法如下：

function onCompleted(sender, eventArgs)
......{
    //使用uri属性保证要处理的下载的文件正确
    if (sender.uri == "background2.xaml")
    ......{
         var slPlugin = sender.getHost();

         //获得XAML片断并创建XAML对象引用
         var background= slPlugin.content.CreateFromXamlDownloader(sender, "");

        // 将创建的对象加入到根Canvas中
        var rootCanvas = sender.findName("rootCanvas");
        rootCanvas.children.add(background);
    }
}

CreateFromXamlDownloader方法包含两个参数，第一个参数表示的是Downloader对象，第二个参数表示压缩包中的文件名，如果下载的不是压缩包，则这个参数为空字符串。

获取压缩包中的某个文件

CreateFromXamlDownloader方法中可以指明压缩包中的某个文件。比如，我们使用downloader.open("GET", "background.zip")下载了一个包含了多个描述背景的XAML文件，其中一个文件为background2.xaml，通过如下方法可以直接从background2.xaml中创建对象引用：

var background= slPlugin.content.createFromXamlDownloader(sender, "background2.xaml");

同样的，如果只是要从压缩包中获得下载的文件内容，可以使用GetResponseText方法，该方法中包含了一个指明文件名的参数。使用方法如下：

var background= sender.getResponseText("bakcground2.xaml");

2. 使用下载的媒体文件

如果要使用下载的媒体文件，如图片、视频等等，可以使用SetSource方法，将媒体元素的路径源设置为下载的文件。与CreateFromXAMLDownloader方法类似，SetSource方法接受两个参数，第一个参数表示的是Downloader对象，第二个参数表示压缩包中的某个文件名，如果下载的不是压缩包，则这个参数为空字符串。如，当我们想要让当前Silverlight控件中的图片元素myBackground显示为下载下来的图片文件background.png，可以使用如下代码：

function onCompleted(sender, eventArgs)
...{
    // 从当前Silerlight控件中获得myBackground元素对象
    var myBackground= sender.findName("myBackground");

       // 若下载的文件为压缩包，则将setSource的第二个参数赋值为压缩包中的某个图片文件的名字
       // 否则，若下载的是一个单个的图片文件，则第二个参数为空字符串
   myBackground.setSource(sender, "background.png");
}

3. 使用下载的字体文件

Silverlight可以接受.tff字体。使用下载的字体文件则要使用SetFontSource方法。SetFontSource方法接受一个参数，其值为包含下载内容的Downloader对象。要使字体生效，除了对字体元素对象使用SetFontSource方法外，还要为其FontFamily属性赋予相应的值。

function onCompleted(sender, eventArgs)
...{
    // 获得TextBlock对象
    var myTextBlock = sender.findName("myTextBlock");

    // 将下载的对象中的字体文件加入到TextBlock的类型集合中
    myTextBlock.setFontSource(sender);

    // 将字体的类型名赋予TextBlock的FontFamily属性
    myTextBlock.fontFamily = "Contoso Font";
}

如果要恢复使用默认的字体属性，则可以将SetFontSource的参数设为null。

var myTextBlock = sender.findName("myTextBlock");

// 移除自定义的字体属性
myTextBlock.setFontSource(null);

Silverlight中的Downloader对象（javascript）

SilverlightShanghai — Mon, 18 Feb 2008 03:57:00 GMT

Silverlight中有一个Downloader对象，可以用来下载Silverlight应用程序中相应的文件，比如脚本、媒体文件等等。有了它就可以根据应用程序的具体需要来下载相应的文件，而不必在Silverlight插件初始化的时候就将整个应用程序所需要的文件全部下载下来。这样不仅可以节省用户下载应用程序所花费的等待时间，还可以直接在应用程序中动态使用下载下来的内容而无需刷新整个页面。Downloader对象能够初始化数据传输，监视数据传输的进程，并能很方便的得到所下载的文件。加载应用程序时的进度条的实现就需要用到Downloader这个对象的强大功能。此外，Downloader对象还可以用来下载ZIP压缩包，并可以从所下载的ZIP包中获取单个文件。

要使用Downloader对象，首先要使用Silverlight的CreateObject方法在Silverlight插件中创建一个Downloader的对象实例。Downloader中有以下几个常用的方法：

1. Open方法用来实例化Downloader对象，并用来指定要下载的内容。这个方法包含两个类型为字符串的参数：第一个参数指定了下载的行为，目前只支持"GET"；第二个参数是一个URI，指明了下载的文件。

2. Send方法用来执行下载的请求。该方法不包含任何参数，并用异步方法下载文件。

由于Downloader对象用异步方法下载文件，因此对下载后的文件操作一般都是通过事件触发的方法来执行的。可以使用addEventListener方法为Downloader的对象实例添加事件监听。addEventListener方法包含两个参数：第一个参数指明了所要侦听的Downloader事件；第二个参数指明了事件处理的方法名。Downloader对象一共有三个事件：

1. Completed事件在下载请求完成，并返回下载内容的时候触发。

2. DownloadFailed事件在下载失败时返回。

3.DownloadProgressChanged事件在下载过程中触发。

一个使用Downloader对象的例子如下：

function onDemandLoaded(sender, eventArgs)
{
    //首先得到当前Silverlight插件的引用
    var SilverlightPlugin = sender.getHost();

    //创建一个Downloader对象
    var downloader = SilverlightPlugin.createObject("downloader");

    //初始化Downloader对象
    downloader.open("GET", "myPage.xaml");

    //执行下载请求
    downloader.send();

    //添加事件侦听
   downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
    downloader.addEventListener("completed", onCompleted);
}

function onDownloadProgressChanged(sender, eventArgs)
{

//sender返回的即是已下载的文件对象
}

function onCompleted(sender, eventArgs)
{
}

在SL中使用全屏模式

SilverlightShanghai — Sun, 27 Jan 2008 11:54:00 GMT

Silverlight对全屏模式的支持是内建的，实现方法很简单，在托管代码中，主要通过改变BrowserHost.IsFullScreen这个值来改变全屏模式。当IsFullScreen为True时，应用程序为全屏模式；该值为False时则返回普通浏览器内嵌模式。使用BrowserHost时需要引用System.Windows.Interop这个名字空间。

using System.Windows.Interop;
//其他名字空间

namespace SilverlightProject1
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();
            //设置画布背景色为黄色
            SolidColorBrush scb = new SolidColorBrush();
            scb.Color = Colors.Yellow;
            this.Background = scb;
            //添加鼠标事件，通过左键单击画布切换全屏模式
            this.MouseLeftButtonDown += new MouseEventHandler(onClick);
        }

        void onClick(object sender, MouseEventArgs e)
        {
            //判断当前模式，实现全屏与嵌入模式之间的切换
            BrowserHost.IsFullScreen = BrowserHost.IsFullScreen ? false : true;
        }
}

这样就实现了最简单的全屏模式。但仅仅是这样或许还不足够，因为画布中的元素可能需要根据模式的转换而变换大小。这时候需要根据浏览器的大小来做一些变换。浏览器的大小可以通过BrowserHost.ActualHeight和BrowserHost.ActualWeith得到。比如让画布摊开到整个屏幕，则只需要在在onClick(...)方法中加入以下代码就可以了：

        void onClick(object sender, MouseEventArgs e)
        {
            BrowserHost.IsFullScreen = BrowserHost.IsFullScreen ? false : true;
            //加入以下代码
            this.Width = BrowserHost.ActualWidth;
            this.Height = BrowserHost.ActualHeight;
        }

利用BrowserHost的这两个属性，以及this.RenderTransform这个属性可以实现将画布中的元素根据浏览器的大小变换进行缩放：

        void onClick(object sender, MouseEventArgs e)
        {
            BrowserHost.IsFullScreen = BrowserHost.IsFullScreen ? false : true;
            //加入如下代码
            double x = BrowserHost.ActualWidth / this.Width;
            double y = BrowserHost.ActualHeight / this.Height;
            ScaleTransform st = new ScaleTransform();
            st.ScaleX = x;
            st.ScaleY = y;
            this.RenderTransform = st;
        }

关于在JavaScript中使用全屏模式和内嵌模式的切换，可以参考Silverlight SDK.

[翻译]Silverlight 1.1安装/开发常见问题解疑

SilverlightShanghai — Fri, 26 Oct 2007 06:17:00 GMT

翻译原文：Troubleshooting Silverlight 1.1 Development

微软公司最近同时更新了Silverlight 1.1 Alpha Refresh和Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)。我们建议你更新到这些最新的版本，因为最新的版本解决了论坛中的一些人所提到的关于1.1安装与开发的一些问题。

验证你正在运行的是最新的版本的方法：

运行时：在浏览器中用鼠标右键点击Silverlight控件。选择Silverlight Configuration。所显示的版本号应该是：1.1.20816.0。816是其中的关键数字。

工具：从以下路径中找到文件：<Drive>:\Program Files\Microsoft Visual Studio 9.0\Common\IDE\Microsoft.VisualStuido.Silverlight.dll。然后，用鼠标右键点击该文件，打开属性对话框。在详细信息的面板中找一下文件版本号“9.0.20706.18”。要找的关键数是最后的“18”。如果显示的是“12”的话，则你就需要升级一下了。

接下来是其他一些问题和解决方法：

问题：安装了Silverlight 1.1 Alpha Refresh以后，运行1.1的应用程序仍然会得到“Get Silverlight”（“获得Silverlight”，或“拥有Silverlight”）图标。

解决方案：有几种方法可以解决这个问题：

确保你安装的是Silverlight 1.1的版本而不是1.0的版本。你可以查看Silverlight版本号的前两位数字来判断安装的版本是否正确。
确保你安装的是最新的1.1版本（下载链接已经在上面给出）
如果你最近才装的1.1，并且安装的时候操作系统中还保留着以前安装的版本，则你可能需要重新启动你的浏览器。
如果上面的方法都行不通，那就从控制面板的“添加/删除应用程序”（在Vista中就叫做“应用程序”）卸载Silverlight并重新安装一遍。

问题：安装Silverlight tools for VS的时候显示“You must install Microsoft Visual Studio codename "Orcas" Beta 2 before installing this product.”

解决方案：Silverlight tools要求安装在VS Standard, Pro或者VSTS上。在安装VS的过程中需要选中C#和/或VB选项，以及Visual Web developer选项。默认安装中都已将这些内容选中。由于express版本的VS没有Silverlight tools所需的组件，因此Silvelright tools不能在其中运行。

问题：在Visual Studio中新建一个项目的时候显示拒绝访问路径“C:\...\SilverlightProject.zip\TestPage.html.js”。

解决方案：这个错误是由AVG virus scanner造成的。如果你用的是完整的版本，你可以配置这个工具来，在你要创建的项目文件夹中忽略用于扩展名为.js的文件的扫描规则。如果你用的是免费的版本，则无法将这个选项关闭。

问题：在生成C#项目的时候，如果引用的组件为agclr，system等，则会显示："The referenced component 'xxxx' not found"。

解决方案：可能造成这种情况的原因有两种：

没有安装Silverlight 1.1 alpha运行时。可以从这里进行安装。
1.1 alpha 运行时的GUID被更新了，因此Visual Studio找不到程序集的路径。
Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)已修复了这个问题，从这里可以获得该最新版本。要验证这个工具的版本可以查看安装文件，或者从\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\Microsoft.VisualStudio.Silverlight.dll中查看（查看属性窗口中的details标签）。版本号应该是9.0.20706.18，检查一下最后的数字是不是18。敬请卸载老版本的Silverlight tools并安装更新了的版本。

问题：在创建VB项目的时候显示：Error HRESULT E_FAIL has been returned from a call to the COM component。

解决方案：造成这种情况的两种原因和前一个问题相同。

问题：当项目涉及到downloader对象或调用web service的时候，调试项目会遇到问题。

解决方案：如果Silverlight应用程序是从file://url加载的，则Silverlight会限制其不能进行网络调用。Silverlight项目中有一个testpage.html，这个文件是从文件系统中调用的，用来测试项目。如果要在web服务器上对Silverlight项目进行测试则需要将项目连接到一个网站项目中，这样就可以对该项目进行调试了。你可以按照以下步骤进行：

在解决方案中添加一个website。
在这个网站中，用鼠标随便右击某个文件夹，选择“Add Silverlight link”将Silverlight项目的输出和网站连接起来。点击Yes来启动网站中Silverlight调试功能。
将testpage.html.js，silverlight.js拷贝到网站中，或者在aspx页面中使用asp:xaml控件。
你现在应该能将网站设置为startup project。
现在按F5键应该能在调试器中将该网站中的主页加载到浏览器，并且使用的是web项目所有的web服务器加载。

Terri Morton
Program Manager, Telligent

在Silverlight中使用定时器（Timer）

SilverlightShanghai — Fri, 26 Oct 2007 06:02:00 GMT

定时器（Timer）是一个挺常见的功能。通过使用定时器，可以每隔一段制定的时间后触发某一指定的事件，如刷新、定时提醒等等。那在Silverlight中怎么使用定时器呢？其实也很简单，且听我细细道来。：）

HtmlTimer类和Storyboard

 这是最简单的实现定时器的方式。你可以在你的程序中直接使用HtmlTimer类，它位于System.Windows.Browser命名空间下，使用之前你需要在工程中先加入对System.Silverlight.dll的引用。它的使用方法很简单：

    HtmlTimer timer = new HtmlTimer();

timer.Interval = 200; //200毫秒

timer.Tick += new EventHandler(timer_Tick);

timer.Start();

void timer_Tick(object sender, EventArgs e)

{

//在这里处理定时器事件

}

但是很不幸，这个类被标记为obsolete，编译的时候会报一个warning，就是说今后的正式版本可能会移除对这个类的支持，因为这个定时器的精度不高，并不适合于间隔很短的动画。那么为了保证我们现在写的代码能够平稳的过渡到Silverlight1.1的正式版本，我们可以使用Storyboard来实现定时器的功能

大家可能利用Blend创建过动画，实际上你创建的动画在XAML文件中对应了Storyboard这个对象，因此我们可以利用它提供的Completed事件（动画结束之后触发）来模拟定时器。

首先在Page.xaml文件中添加一个Storyboard的资源：

<Canvas.Resources>

  </Canvas.Resources>

然后在代码中设置定时器的间隔，并开启动画，然后在Completed中重新开始Storyboard就可以模拟定时器的行为了：

        timer.Duration = new TimeSpan(0, 0, 0, 0, 200); //200毫秒

timer.Begin();

void timer_Tick(object sender, EventArgs e)

{

//在这里处理定时器事件

timer.Begin();

定时器控件

现在大家可能已经知道如何用Storyboard来实现定时器的功能了，我们可以把它包装成一个控件，这样以后我们就可以很方便的在程序中使用定时器了。

为了方便从Xaml文件创建控件，我们先定义一个基类

public class XamlControl : Control

{

private readonly FrameworkElement m_Container;

protected FrameworkElement Container

{

get { return m_Container; }

}

protected XamlControl(string xamlName)

{

Stream stream = GetType().Assembly.GetManifestResourceStream(xamlName);

if (stream == null)

{

throw new ArgumentException("Xaml resource " + xamlName + " not present", "xamlName");

}

using (StreamReader sr = new StreamReader(stream))

{

string xamlData = sr.ReadToEnd();

m_Container = base.InitializeFromXaml(xamlData);

}

然后我们在工程中添加一个xaml文件，在Properties面板-Advanced-Build Action中选择”Embedded Resource”，这样我们就可以在代码里动态的加载这个xaml文件了。文件的内容如下

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

<Canvas.Triggers>

<EventTrigger.Actions>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Canvas.Triggers>

</Canvas>

下面是定时器控件的代码（需要将下面的SilverlightControl改成你自己建立的工程的名称）：

public class Timer : XamlControl

{

private Storyboard m_Timer;

public Timer()

: base("SilverlightControl.Timer.xaml")

{

if (Container == null) return;

m_Timer = Container.FindName("timer") as Storyboard;

m_Timer.Completed += OnComplete;

}

public TimeSpan Interval

{

get

{

return m_Timer.Duration.TimeSpan;

}

set

{

m_Timer.Duration = new Duration(value);

}

public event EventHandler<EventArgs> Tick;

private void FireTick()

{

Tick(this, new EventArgs());

}

private void OnComplete(object sender, EventArgs e)

{

FireTick();

m_Timer.Begin();

}

这样我们就可以用类似于HtmlTimer的语法，很方便的操作定时器控件了

Timer timer = new Timer();

timer.Interval = new TimeSpan(0, 0, 0, 0, 200);

timer.Tick += timer_tick;

            Children.Add(timer); //开始计时

如果要停止计时，只需要用Children.Remove(timer)即可

一点需要注意的地方，当你调用Storyboard.Begin的时候，如果这个Storyboard还没有被加入Xaml的DOM树中，如下图中右下角的红色节点所示，那么这时Silverlight会抛出异常。这在你将Storyboard内嵌在自定义控件里的时候要特别小心，如果你的控件不在当前Xaml的DOM树中，而你调用了这个控件内包含的Storyboard的Begin方法或者Stop方法，都会产生异常。

关于Timer的信息，还可以参考下文：http://advertboy.wordpress.com/2007/08/11/silverlight-timers-what-to-use/