Silverlight Embedded 初识

   本文基于 Valter Minute 的 Sliverlight Embedded 教程,原文链接 http://geekswithblogs.net/WindowsEmbeddedCookbook/archive/2009/10/01/silverlight-for-embedded-tutorial.aspx

    Windows ce 6.0 R3 增加了一个重要的更新, Silverlight for Windows Embedded(简称SE).使用这种技术,为 wince 上UI程序编写带来了一种新的方法.所有的 UI 的元素都由 XAML 语言描述,包括控件和动画效果.我们可以使用 Expression Blend 2 来生成 XAML 语句,从而实现程序界面和应用逻辑的分离. 当然要实现这一美好的愿景还需要良好的程序架构支持,不管怎样,第一步先从了解 Silverlight 开始.

    由于 Silverlight  Embedded 对嵌入式的设备性能有所要求,目前还并不十分流行.完整的 wince6 r3 & silverlight 开发环境如下

1. VS2005
2. VS2005 SP1                          VS80sp1-KB926604-X86-CHS.exe
3. VS2005 SP1 for vista            VS80sp1-KB932230-X86-CHS.exe           // 非win7,vista用户就不需要了
4. WINCE600                            CE6.iso   
5. WINCE600 SP1                     Windows Embedded CE 6.0 Platform Builder Service Pack 1.msi
7. WINCE600 R2                       CE6R2.iso
8. WINCE600 R3                       CE6R3.iso
9. WINCE600 R3 QFE                WinCEPB60-091231-Product-Update-Rollup-Armv4I.msi
10.Expression Blend 2 Trial       Blend_Trial_en.exe
11.Office and PDF Viewers        WesttekFileViewers6.exe
12.QQ Messenger Client           qq.zip
13.BlendV2 SP1                         BlendV2SP1_en.exe   
14.Silverlight SDK for wince       SESDK.msi

以上所有文件均可在MS的网站下载,安装顺序如上,win7 和 vista 用户需要在管理员权限下安装,我之前不知道这点,所以杯具的使用了 XPMODE ,其中 office viewer 和 qq 也是 r3 版新增的特征,对于SE开发来说是不必要的.(如果各位大哥懒得自己去下载,或者因为环保低碳节约能源考虑不愿下载的话,本人提供刻录光盘出售,请移步淘宝店....... ^_^)

SESDK.msi 是自己定制的一个包含了SE和模拟器的 SDK 包,如果仅仅开发SE应用程序,只需要 VS2005 和这个 SDK 包就可以了.

下载地址如下:

SESDK part1

SESDK part2

pwinuser.h

    Silverlight  Embedded 仅支持C++开发,而 Blend 支持为C#和 VB.NET 生成自动化代码.所以...这两个是不怎么搭界, Blend 对于我们的作用仅只是生成 XAML 描述语言而已.如果有一天达到了眼中有码,心中无码的境界,也许要不要 Blend 都无所谓了.在这之前,还是先打开Blend.

    Blend 不是免费软件,没有注册码只能试用30天.所以我们要追求眼中有码,心中无码的境界,当然如果你有注册码的话,哪个更爽,哈哈,就不明说了.

    创建一个新的应用,需要安装Blend SP1才会出现第4个图标,支持Silverlight Embedded

我们不需要自动生成事件处理代码,所以修改选项如下

完成后 Blend 会生成一个叫做 page.xaml 的空白 XAML 文档

其内容如下

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication1.Page" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White"/> </UserControl>

其中 Width 和 Height 是生成的 Silverlight 应用窗口的大小,其他的内容大家先望文生义吧

我们点击上图左下角的 Button 按钮,在编辑窗口中画一个按钮.右击可以打开一个包含常用控件的列表.

右侧的属性面板可以设置按钮控件的位置,大小,背景,前景,角度,缩放,倾斜等等属性,我们要为 button 取一个名字,代码中需要根据这个名字来找到这个 button 节点

随意修改几个属性后,按钮效果如下

XAML 文档的内容改变为

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication1.Page" Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutRoot" Background="White"> <Button Height="52" Margin="228,162,232,0" VerticalAlignment="Top" Content="Button" RenderTransformOrigin="0.5,0.5" Background="#FF0C8BF7" Foreground="#FFD85C5C" BorderThickness="1,1,1,1" Grid.RowSpan="1" Opacity="0.98" HorizontalAlignment="Stretch" x:Name="MyButton"> <Button.BorderBrush> <RadialGradientBrush> <GradientStop Color="#FFA3AEB9"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.196"/> <GradientStop Color="#FF617584" Offset="1"/> <GradientStop Color="#FF6B7F90" Offset="0.593999981880188"/> <GradientStop Color="#FF6A7E8F" Offset="0.737"/> </RadialGradientBrush> </Button.BorderBrush> <Button.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1"/> <SkewTransform AngleX="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0"/> </TransformGroup> </Button.RenderTransform> </Button> </Grid> </UserControl>

Button 节点下内容描述了按钮的属性

对于这个 Silverlight Embedded 测试程序, Blend 能够帮到我们的只到这部为止了,生成了一个 XAML 文档,下面我们利用这个文档生成一个 Silverlight Embedded 程序.

打开 VS2005 使用 SESDK 新建一个 win32 项目

为了少写点代码,不要创建空项目,然后把生成的项目中的 SESample.cpp 中删除到只剩下 WinMain 空函数, SE 应用程序不需要创建常规窗口,也不需要常规的消息循环.然后添加如下头文件

#include "pwinuser.h" #include "xamlruntime.h" #include "xrdelegate.h" #include "xrptr.h"

其中 pwinuser.h 包含了 wince6 r3 新增的手势 API 的定义,导出 SDK 时候忘记加它了,在 SESDK 下载中包含了这个头文件,需要你手动把它复制到 SDK 的 INC 文件夹或者工程目录下,在X:/WINCE600/PUBLIC/COMMON/OAK/INC目录下也可以找到它

在 WinMain 中,我们首先要初始化 Silverlight Embedded 运行环境

if (!XamlRuntimeInitialize()) { return -1; }

如果 XamlRuntimeInitialize 调用成功, Silverlight for Windows Embedded runtime 会被载入你的程序的内存来处理UI.

每个SE程序都有一个唯一的 "Application" 对象,可以通过它来访问程序全局的属性和元素

调用 GetXRApplicationInstance API 来访问这个全局对象

HRESULT retcode; IXRApplicationPtr app; if (FAILED(retcode=GetXRApplicationInstance(&app))) { return -1; }

注意到 HRESULT "I" 前缀, "Ptr" 后缀,可以猜想到SE是基于 COM 技术的.所以SE仅支持C++开发,而非 C/C++ ,用纯C来开发与 COM 接口的程序是非常痛苦的事情.

紧接下来,是通过 XAML 文档创建SE窗口, SE 支持从资源,流,文件,字符串读取 XAML 创建窗口,原文是把 XAML 文档加入到资源中,从资源创建的,这样比较麻烦,我们改由文件中创建,把 Blend 生成的 page.xaml 文档复制到模拟器的存储卡共享目录中,添加代码如下

XRWindowCreateParams wp; ZeroMemory(&wp, sizeof(XRWindowCreateParams)); wp.Style = WS_OVERLAPPED; wp.pTitle = L"S4E Test"; wp.Left = 0; wp.Top = 0; XRXamlSource xamlsrc; xamlsrc.SetFile(L"//storage card//page.xaml"); IXRVisualHostPtr vhost; if (FAILED(retcode=app->CreateHostFromXaml(&xamlsrc, &wp, &vhost))) { return -1; }

我们可以通过 IXRVisualHostPtr 对象来加载 XAML 资源并且访问其内容,此时 XAML 文档已经被加载到内存生成对象树.我们像处理普通的 XML 文档那样先找到其根节点,然后根据节点名字 "MyButton" 找到 button 节点

IXRFrameworkElementPtr root; if (FAILED(retcode=vhost->GetRootElement(&root))) { return -1; } IXRButtonBasePtr btn; if (FAILED(retcode=root->FindName(TEXT("MyButton"), &btn))) { return -1; }

为了接收用户按下按钮事件的通知,我们需要提供一个代理 delegate, delegate 是一个指向拥有特殊原型的C++对象的指针

在cpp文件的开头,声明一个简单的C++类来作为 button click 事件的代理

class BtnEventHandler { public: HRESULT OnClick(IXRDependencyObject* source,XRMouseButtonEventArgs* args) { MessageBox(NULL,TEXT("Click!"),TEXT("Silverlight for Windows Embedded test"),MB_OK); return S_OK; } };

这个按钮事件处理函数简单的弹出一个 message box, 它拥有2个参数,一个指向产生事件的对象(按钮)的指针,另一个指针指向包含事件参数的结构(比如坐标等).

接下来创建一个 delegate 对象来连接事件处理程序和控件

BtnEventHandler handler; IXRDelegate<XRMouseButtonEventArgs>* clickdelegate; if (FAILED(retcode=CreateDelegate(&handler,&BtnEventHandler::OnClick,&clickdelegate))) { return -1; } if (FAILED(retcode=btn->AddClickEventHandler(clickdelegate))) { return -1; }

准备工作完成后,创建窗口

UINT exitcode; if (FAILED(retcode=vhost->StartDialog(&exitcode))) { return -1; }

最后 clickdelegate 对象不是一个智能指针,不要忘记释放它

clickdelegate->Release(); return 0;

点击F7,不好意思,会产生几个链接错误,我们还需要链接2个库文件

#pragma comment(lib, "xamlruntime.lib") #pragma comment(lib, "uuid.lib")

接下来,激动人心的时刻到来,按下F5,一个简单而又漂亮的SE程序会出现在你的面前

程序运行的效果如下