将SL4 程序移植到WP7（附Teched2010真机图）

2017-12-14 1312

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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 强大的调试功能进行修改。后续我还会对一些稍微复杂些的程序进行移植，也希望大家分享自己的开发经验。