四、界面制作（1）

来源：互联网发布：网络黑彩公司怎么举报编辑：程序博客网时间：2024/04/29 19:00

在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：

添加图片