使用Silverlight for Embedded开发绚丽的界面(2)
5.Step by Step
為了偷懶，我只是簡(jiǎn)單翻譯一下一個(gè)國(guó)外朋友的博客文章，文章不錯(cuò)，我只是在此基礎(chǔ)上做一點(diǎn)補(bǔ)充，并提供帶Embedded XAML Runtime引擎的SDK(下一篇文章)，讓你可以在這個(gè)SDK提供的模擬器上測(cè)試你編寫(xiě)的SE Application，這樣你不需要每次都編譯一下CE OS的subproject。但是有一點(diǎn)需要申明，在模擬器跑起來(lái)的效果會(huì)很差，一方面因?yàn)闆](méi)有硬件加速(沒(méi)有硬件加速的情況下不可能使用任何技術(shù)實(shí)現(xiàn)即非常絢麗又快速的效果)，另一方面PC上的顯示器清晰度比一些CE高DPI的設(shè)備低很多。
原文地址：http://geekswithblogs.net/WindowsEmbeddedCookbook/archive/2009/10/01/silverlight-for-embedded-tutorial.aspx
1.使用Expression Blend 2生成XAML等資源
創(chuàng)建一個(gè)Silverlight application：
你需要使用Expression Blend 2 SP1，該版本支持Silverlight 2。從向?qū)е心銜?huì)看到你需要選擇開(kāi)發(fā)語(yǔ)言是C#還是Visual Basic，SE只能用C++編寫(xiě)，很可惜Expression Blend目前并不支持C++，所以我們不需要Expression Blend生成的任何代碼。
那么怎樣不讓Expression Blend幫我們生成的C#或者VB.NET代碼呢？請(qǐng)看下圖：
創(chuàng)建一個(gè)新的項(xiàng)目之后，Expression Blend已經(jīng)幫你生成好一個(gè)空XAML文件(默認(rèn)叫page.xaml)。
我們從Silverlight提供的控件集中拖一個(gè)簡(jiǎn)單的按鈕：
使用屬性窗口我們給新按鈕分配一個(gè)名稱(chēng)：
屬性窗口允許你自定義按鈕的各種屬性：顏色、旋轉(zhuǎn)角度(你可以讓一個(gè)垂直的按鈕旋轉(zhuǎn)45度!)、透明度等等。
我們?cè)谙乱黄恼轮畜w驗(yàn)這些特性，現(xiàn)在我們僅僅保持按鈕原樣，并保存XAML文件。
如果你用一個(gè)記事本打開(kāi)一個(gè)XAML文件你會(huì)發(fā)現(xiàn)它們非常簡(jiǎn)單：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <UserControl?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"??? xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"?x:Class="SimpleApp.Page" Width="640"?Height="480"> ????<Grid?x:Name="LayoutRoot"?Background="White"> ????????<Button?Height="87"?Margin="189,106,209,0"?VerticalAlignment="Top"?Content="Button"?x:Name="MyButton"/> ????</Grid> </UserControl> |
UserControl作為頂部容器包含我們的按鈕，Grid用于布局(對(duì)象被組織成以列和行的形式)。
按鈕具有各種屬性，比如在grid cell中的定位、對(duì)齊方式、content(字符串值“Button”)和name(字符串值”MyButton”)。
?
2.編碼
到這一步我們做好了Design，下一步我們可以啟動(dòng)Platform Builder，在我們自己的OS Design項(xiàng)目上創(chuàng)建一個(gè)新的subproject。(在后面我會(huì)提供一個(gè)Alchemy SDK，在這個(gè)SDK上編寫(xiě)SE based Application你甚至不需要安裝任何CE系統(tǒng)的開(kāi)發(fā)環(huán)境。)
在solution窗口，右擊新建一個(gè)subproject，創(chuàng)建一個(gè)WCE Application：
選擇A simple Windows Embedded CE application：
這會(huì)創(chuàng)建一個(gè)應(yīng)用程序僅僅包含WinMain函數(shù)，對(duì)與我們第一個(gè)SE應(yīng)用程序來(lái)說(shuō)已經(jīng)夠了。
第一件要做的事是包含一些頭文件：
?| 1 2 3 4 | #include "pwinuser.h" #include "xamlruntime.h" #include "xrdelegate.h" #include "xrptr.h" |
下一步我們添加Expression Blend為我們生成好的XAML到程序資源中。
包含資源文件到exe文件中，我們需要添加一個(gè)資源腳本文件(rc文件)到subproject中：
在subproject上右擊，選擇”add\new item”并從對(duì)話(huà)框中選擇資源文件并起一個(gè)名字：
創(chuàng)建一個(gè)新資源：
現(xiàn)在可以導(dǎo)入XAML文件，XAML中的數(shù)據(jù)將被以二進(jìn)制的形式包含到exe文件中：
為新資源起個(gè)類(lèi)型名字叫”XAML”：
這里為了方便我們保留資源默認(rèn)的ID (IDR_XAML1)不變，在一個(gè)真正的項(xiàng)目中，起個(gè)meaningful names是更好的主意：
為了使用資源ID，我們?cè)谖覀兊腸pp文件中需要包含"resource.h"：
?| 1 | #include "resource.h" |
然后在WinMain中我們開(kāi)始使用XAML運(yùn)行時(shí)，首先需要初始化它：
?| 1 2 | if?(!XamlRuntimeInitialize())??????? return?-1; |
如果XamlRuntimeInitialize執(zhí)行成功，SE的運(yùn)行時(shí)會(huì)被你的應(yīng)用程序加載并準(zhǔn)備好處理UI。
每個(gè)SE應(yīng)用程序只有一個(gè)”Application”對(duì)象讓我們用來(lái)訪問(wèn)全局應(yīng)用程序的屬性和特性。
為了訪問(wèn)它們，我們需要使用GetXRApplicationInstance?API。
?| 1 2 3 4 5 | HRESULT?retcode; ?IXRApplicationPtr app; ?? ?if?(FAILED(retcode=GetXRApplicationInstance(&app))) ?????return?-1; |
資源問(wèn)題我們都已經(jīng)包含到exe中了，所以我們傳遞我們的HINSTANCE句柄給它就可以了：
?| 1 2 | if?(FAILED(retcode=app->AddResourceModule(hInstance))) ????return?-1; |
現(xiàn)在我們已經(jīng)初始化了Application對(duì)象，我們可以創(chuàng)建主窗口并讓SE管理它的內(nèi)容：
?| 1 2 3 4 5 6 7 8 9 10 11 | XRWindowCreateParams wp; ZeroMemory(&wp, sizeof(XRWindowCreateParams)); wp.Style?????? = WS_OVERLAPPED; wp.pTitle????? = L"S4E Test"; wp.Left??????? = 0; wp.Top???????? = 0; XRXamlSource xamlsrc; xamlsrc.SetResource(hInstance,TEXT("XAML"),MAKEINTRESOURCE(IDR_XAML1)); IXRVisualHostPtr vhost; if?(FAILED(retcode=app->CreateHostFromXaml(&xamlsrc, &wp, &vhost))) ????return?-1; |
VisualHost對(duì)象"hosts"運(yùn)行時(shí)并讓我們可以訪問(wèn)它的內(nèi)容，以及從資源中加載我們的XAML(使用XRXamlSource對(duì)象)。
SE應(yīng)用程序中的對(duì)象以對(duì)象樹(shù)的方式組織起來(lái)。訪問(wèn)對(duì)象樹(shù)中的對(duì)象，我們需要得到指向這棵樹(shù)根部(root)的指針：
?| 1 2 3 | IXRFrameworkElementPtr root; if?(FAILED(retcode=vhost->GetRootElement(&root))) ????return?-1; |
從樹(shù)的根部我們可以通過(guò)在Expression Blend中指定的name來(lái)訪問(wèn)我們的按鈕：
?| 1 2 3 4 | IXRButtonBasePtr btn; if?(FAILED(retcode=root->FindName(TEXT("MyButton"), &btn))) ????return?-1; |
為了能夠收到用戶(hù)點(diǎn)擊按鈕時(shí)的通知，我們需要提供一個(gè)委托(delegate)。使用C#開(kāi)發(fā)的朋友對(duì)委托的概念應(yīng)該比較清楚，在這里一個(gè)委托即是一個(gè)指向具有指定原型(prototype)的C++實(shí)例的成員的指針。?
我們可以在我們的cpp文件中聲明一個(gè)簡(jiǎn)單的C++類(lèi)，并在其中實(shí)現(xiàn)按鈕點(diǎn)擊事件的委托：
| 1 2 3 4 5 6 7 8 9 | class?BtnEventHandler { public: ????HRESULT?OnClick(IXRDependencyObject* source,XRMouseButtonEventArgs* args) ????{ ????????MessageBox(NULL,TEXT("Click!"),TEXT("Silverlight for Windows Embedded test"),MB_OK); ????????return?S_OK; ????} }; |
當(dāng)按鈕被點(diǎn)擊時(shí)我們的事件處理器(event handler)僅僅是簡(jiǎn)單的顯示一個(gè)消息框。
正如你看到的事件處理器(event handler)有2個(gè)參數(shù)：一個(gè)指向產(chǎn)生事件(我們的按鈕)的對(duì)象的指針和一個(gè)包含事件參數(shù)的結(jié)構(gòu)體的指針。?
為了連接事件處理器(event handler)和按鈕，我們需要?jiǎng)?chuàng)建一個(gè)委托對(duì)象：
| 1 2 3 4 5 6 | BtnEventHandler handler; IXRDelegate<XRMouseButtonEventArgs>* clickdelegate; if?(FAILED(retcode=CreateDelegate(&handler,&BtnEventHandler::OnClick,&clickdelegate))) ????return?-1; if?(FAILED(retcode=btn->AddClickEventHandler(clickdelegate))) ????return?-1; |
事件處理器已經(jīng)連上我們的按鈕了，現(xiàn)在只需要等待用戶(hù)去點(diǎn)擊我們漂亮的按鈕并顯示我們的UI：
?| 1 2 3 | UINT?exitcode; if?(FAILED(retcode=vhost->StartDialog(&exitcode))) ????return?-1; |
指向委托對(duì)象的指針并不是一個(gè)智能指針(smart pointer),我們需要顯式釋放它：
?| 1 | clickdelegate->Release(); |
在我們build我們的subproject前我們需要添加頭文件所在的目錄和一些SE需要的庫(kù)文件。
右擊subproject打開(kāi)source script添加如下代碼：
?| 1 2 3 4 5 6 | INCLUDES=$(_OEMINCPATH) and libraries: TARGETLIBS= \ ????$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\coredll.lib \ ????$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\xamlruntime.lib \ ????$(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\uuid.lib \ |
(你需要在sources script 中已經(jīng)包含了TARGETLIBS directive)
現(xiàn)在你可以在設(shè)備上跑起來(lái)應(yīng)用程序并點(diǎn)擊按鈕了!
你可以從這里下載到Demo代碼：?
http://cid-9b7b0aefe3514dc5.skydrive.live.com/self.aspx/.Public/SilverlightSample.zip
下一篇文章：使用Silverlight for Embedded開(kāi)發(fā)絢麗的界面(3)
作者: 王克偉出處:?http://wangkewei.cnblogs.com/?
版權(quán)聲明: 本文的版權(quán)歸作者與博客園共有。轉(zhuǎn)載時(shí)須注明本文的詳細(xì)鏈接，否則作者將保留追究其法律責(zé)任的權(quán)利。
您可以從這里更方便的找到我的文章。 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀
總結(jié)
以上是生活随笔為你收集整理的使用Silverlight for Embedded开发绚丽的界面(2)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 使用Silverlight for Em
- 下一篇： 使用Silverlight for Em