將SL4 程序移植到WP7（附Teched2010真機圖）

作者: Gnie 來源: 博客園發布時間: 2010-12-06 10:10 閱讀: 1069 次推薦: 0 原文鏈接 [收藏]

摘要：Silverlight 4（SL4）和Windows Phone 7（WP7）大家已經都很熟悉了，作為WP7 開發框架之一的Silverlight，使廣大開發者方便快捷的開發WP7 應用程序或游戲。如果您是一位SL 開發人員，那WP7 的應用程序開發也會使你得心應手。

　　前不久WP7 已經在國外上市，這意味著相應的WP7 應用程序和游戲將會蜂擁而至，由于之前研究過一陣SL，看到WP7 到來手便開始發癢。本篇將原來一個SL 模擬Nano5 的程序移植到WP7，為大家簡單演示一下移植過程。SL 程序請參考《Silverlight 模擬Nano5 界面效果》。

　　素材移植

　　注意，您的計算機上需要安裝Windows Phone Developer Tools。首先我們來新建一個WP7 應用程序。

New

　　由于SL 程序比較簡單只包含一些圖片，所以將所有素材資源復制到WP7 項目。如下圖SL4 與WP7 項目列表對比。

SL4

WP7

　　程序移植

　　接下來先對XAML 程序進行移植，原來SL4 程序里XAML 只有一個<Canvas>。

<Canvas x:Name="LayoutRoot" MouseLeftButtonDown="LayoutRoot_MouseLeftButtonDown" />

　　在WP7 中需要將<Canvas> 放入ContentPanel <Grid>。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"
      ManipulationDelta="ContentPanel_ManipulationDelta">
     <Canvas x:Name="imageList" Background="Transparent"/>
</Grid>

　　下面移植C# 程序，可以將SL4 的C# 程序全部復制到WP7 中再逐一對錯誤提示進行修改和調整。

　　MainPage() 方法

　　SL4：

public MainPage()
{
    InitializeComponent();
    addImages();
    HtmlPage.Window.AttachEvent("DOMMouseScroll", LayoutRoot_MouseWheel);
    HtmlPage.Window.AttachEvent("onmousewheel", LayoutRoot_MouseWheel);
    HtmlPage.Document.AttachEvent("onmousewheel", LayoutRoot_MouseWheel);
    startShow();
}

　　WP7：不再需要支持不同瀏覽器的鼠標滾輪事件。

public MainPage()
{
    InitializeComponent();
    addImages();
    startShow();
}

　　事件觸發

　　SL4：通過MouseWheel 鼠標滾輪事件來切換專輯封面。

private void LayoutRoot_MouseWheel(object sender, HtmlEventArgs args)
{

    double mouseDelta = 0;
    ScriptObject e = args.EventObject;
    // Mozilla and Safari    
    if (e.GetProperty("detail") != null)
    {
        mouseDelta = ((double)e.GetProperty("detail"));
    }

    // IE and Opera   
    else if (e.GetProperty("wheelDelta") != null)
        mouseDelta = ((double)e.GetProperty("wheelDelta"));

    mouseDelta = Math.Sign(mouseDelta);

    moveIndex((mouseDelta > 0) ? 1 : -1);
}

　　WP7：通過ManipulationDelta 觸屏事件來完成。

private void ContentPanel_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    if (e.DeltaManipulation.Translation.X > 0)
    {
        moveIndex(1);
    }
    else 
    { 
        moveIndex(-1); 
    }
}

　　測試運行

　　打開WP7 模擬器后，原來的SL4 程序仍然可以在WP7 中正常運行，唯一區別就是原來的鼠標操作變為了觸屏操作。

Test

　　總結

當然本篇的SL4 程序相對來說比較簡單，沒有復雜的動態效果或類庫調用。在本次Teched2010 大會也和泳濤兄（WP7 MVP）交流了一下。其實SL 程序移植到WP7 也并非易事。首先，要將原來SL 項目里所有使用的資源全部復制到WP7 項目。除圖、音、影以外，更重要的是項目中引用的類庫，有些類庫可能在WP7 中并不支持。其次，要將SL 的XAML 代碼移植到WP7，所謂WP7 中的SL 開發平臺只是SL 的一部分，也就是說有些SL 的控件、屬性在WP7 不能使用，所以要做進一步的調整。最后，要把C# 程序移植到WP7，這也是很復雜的過程，其中涉及的因素很多，可借助VS 強大的調試功能進行修改。后續我還會對一些稍微復雜些的程序進行移植，也希望大家分享自己的開發經驗。