建立类似Office 2010界面的silverlight 应用 step-1

阅读: 855 评论: 5 作者: 王喆(nasa) 发表于 2010-01-28 01:31 原文链接

建立类似Office 2010界面的silverlight 应用 step-1

“本文适合silverlight界面设计师参考，程序开发人员最好也了解一下”

首先来看一下需要实现的效果

这里我主要使用Grid来布局，把界面分为了三部分，头、左部、右部

好整体了解了一下布局，这里我来分布讲解。

之所以使用Grid这个布局控件是因为他能根据当前的浏览器的大小做自适应布局。

如图：

---

下来一步 准备一些需要用到的图片素材，现在做界面不一定都是要矢量元素，在合适的地方使用合适的素材最好。这里是我准备的一些小图片。

建立项目，在项目中建立一个assets的文件夹，把项目中用到的素材分类放好。

调整MainPage的大小为800*600

---

在舞台上新建立一个Border容器，在其内部放置一个Grid控件，并把这个Grid划分为三个区域。在每个区域内部新建立一个Grid并为他们启好名字。

给border加上投影效果，DropShadowEffect。

---

在Grid左部区域加上一点渐变效果。 这里运用了我刚才准备的line01.png这个图片

将图片在放入一个Grid中，设置图片的属性，使其按照高度自动延伸。

在设置图片的夫级Grid属性，使其居右按照高度自适应。

最终的效果：

---

接下来制作Head

在Head的底部添加一个矩形Rectangle，居底，按照宽度自适应，删除边框，为其横向填充渐变色。

效果如下：

---

布局已经确定了，这里再添加一些图片做做美化。

---

演示地址：

http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-1/OperatingTableTestPage.html

申请Dropbox来host你的Silverlight

作者：Nasa 
文章出处：我和未来有约会 (http://nasa.cnblogs.com/) 
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。

评论: 5　查看评论　发表评论

---

最新新闻：
· 腾讯买下qqun.com域名 或为相关产品备用(2010-01-28 10:52)
· 南方人物周刊：马云的生存智慧(2010-01-28 10:45)
· 微软Office 2010进入RTM测试阶段(2010-01-28 10:35)
· 乔布斯对平板计算机销售持保守态度(2010-01-28 10:29)
· 丁磊亲自布局邮箱战略 手机号码邮箱或成新亮点(2010-01-28 10:26)

编辑推荐：苹果平板电脑相关新闻

网站导航：博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库