四、界面制作（1）_app

概述在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 >”，在下面的</body>之前添加上“</div>”标记，没有引号。见如下代码（红色为添加的代码）：

<body><div >    <form ID="form1" runat="server" >    ……    </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：

图4.2 添加图片

然后点到下面的LayoutRoot，在右面的属性里，将布局中的wIDth改为1024，height改为600。把[UserControl]中的属性也这样修改。最后选中LayoutRoot。

然后点资产，控件，面板，双击或者拖动Canvas，如图4.3

4.3 添加一个Canvas

简单说一下Canvas，这相当于一个容器，可以把任意的东西（包括控件，图像等）放置其中，然后对Canvas进行 *** 作就可以了。

然后选中这个Canvas，在属性中修改相应的属性，名称：MainCanvas，背景图像，大小。

如图4.4:

图4.4 修改MainCanvas的属性

这样就有了游戏区域的背景图了。