概述

在VS2010里新建一个SilverLight应用程序，注意不要在Blend里新建，因为在Blend里新建的只有一个SilverLight部分，而VS中则还有一个对应的网页。我新建的名字是Client。这时，一个解决方案里会有两个项目，一个叫Client，这个是SilverLight的主程序项目，另一个叫Client.Web，这个是SilverLight的测试网页。我们先要调整一下网页的页面。

在VS2010里新建一个SilverLight应用程序，注意不要在Blend里新建，因为在Blend里新建的只有一个SilverLight部分，而VS中则还有一个对应的网页。我新建的名字是Client。

这时，一个解决方案里会有两个项目，一个叫Client，这个是SilverLight的主程序项目，另一个叫Client.Web，这个是SilverLight的测试网页。我们先要调整一下网页的页面。

首先，我们要给网页加个背景，否则纯白的很刺眼，选择一张图片，先复制到相应的Client.Web文件夹里，然后在VS里添加上图片，方法（如图4.1）是Client.Web点右键，选择“添加”，“现有项”，找到图片就可以了。我添加的图片名称是bg5.jpg。

图4.1 添加图片的方法

然后，双击ClientTestPage.aspx文件（因为默认的就是显示这个文件，而不是html的），在下面找到<body>标记，在下面添加上“<div style="BACkground-image: url('bg5.jpg'); ">”，在下面的</body>之前添加上“</div>”标记，没有引号。见如下代码（红色为添加的代码）：

<body>
<div style="BACkground-image: url('bg5.jpg'); ">
    <form id="form1" runat="server" style="height:100%">
    ……
    </form>
    </div>
</body>

运行一下，可以看到有了背景图。

但是，此时SilverLight的主界面却是在左上角，嗯，现在还没有调整SilverLight的界面大小，不要着急，慢慢来。我们要把它居中放置。方法如下：

在ClientTestPage.aspx文件上部找到#silverLightcontrolHost，修改里面的内容如下：

#silverLightcontrolHost{
            height: 600px;
        width: 1024px;
            text-align:center;
        position:absolute;
        left:50%;
        top:50%;
        margin:-300px 0 0 -512px;
    }
说明一下这些代码：
#silverLightcontrolHost{
            height: 600px;    //高
        width: 1024px;   //宽
            text-align:center; //文字居中
        position:absolute;//位置:绝对
        left:50%;       //左间距50%
        top:50%;       //顶间距50%
        margin:-300px 0 0 -512px;// 设置所有外边距属性,分别是top、right、bottom、left方向,这里是相当于往上和左分别移动了相应的距离
    }

我在这里将游戏区域定义为1024*600了，如果大家有别的定义方法，一定要自己修改相应的数值。

页面设置结束了，下面就该SilverLight的界面制作了。

用Blend4打开我们用VS建立的Client.sln文件，他们是通用的。点开左上角“项目”，在项目上点右键，“添加新文件夹”，改名为Image，再在Image文件夹上点右键，建立新文件夹（BACkdrop）作为背景的图像文件夹，把相应的图片复制进去，并添加现有项，添加到Blend里。如图4.2：