建立可扩展的silverlight 应用框架 step-1

简介: “本文适合silverlight界面设计师参考,程序开发人员最好也了解一下” 首先来看一下需要实现的效果 这里我主要使用Grid来布局,把界面分为了三部分,头、左部、右部 好整体了解了一下布局,这里我来分布讲解。

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

首先来看一下需要实现的效果
File?id=df5kjk97_911nhkvvphj_b
File?id=df5kjk97_9132ntwz9cw_b

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

File?id=df5kjk97_915g26r7ttp_b
File?id=df5kjk97_916c3q8fddn_b
好整体了解了一下布局,这里我来分布讲解。
之所以使用Grid这个布局控件是因为他能根据当前的浏览器的大小做自适应布局。
如图:
File?id=df5kjk97_919c9x87z3b_b
File?id=df5kjk97_918d656dndh_b

下来一步 准备一些需要用到的图片素材,现在做界面不一定都是要矢量元素,在合适的地方使用合适的素材最好。这里是我准备的一些小图片。
File?id=df5kjk97_920gngw4cdz_b
建立项目,在项目中建立一个assets的文件夹,把项目中用到的素材分类放好。
File?id=df5kjk97_921f6pwzvfp_b
调整MainPage的大小为800*600
File?id=df5kjk97_922dsmfpfdq_b

在舞台上新建立一个Border容器,在其内部放置一个Grid控件,并把这个Grid划分为三个区域。在每个区域内部新建立一个Grid并为他们启好名字。
File?id=df5kjk97_923gmfbpdfq_b
File?id=df5kjk97_924ckvpmrgf_b
给border加上投影效果,DropShadowEffect。

在Grid左部区域加上一点渐变效果。 这里运用了我刚才准备的line01.png这个图片
File?id=df5kjk97_925fjgdc5gm_b
将图片在放入一个Grid中,设置图片的属性,使其按照高度自动延伸。
File?id=df5kjk97_926crwsh8g2_b
File?id=df5kjk97_927csw7wrsx_b
在设置图片的夫级Grid属性,使其居右按照高度自适应。
File?id=df5kjk97_928g2xdhkf4_b
最终的效果:
File?id=df5kjk97_929hqmtn9db_b

接下来制作Head
在Head的底部添加一个矩形Rectangle,居底,按照宽度自适应,删除边框,为其横向填充渐变色。
File?id=df5kjk97_930d2q53kf8_b

效果如下:

File?id=df5kjk97_931hn645dcx_b

布局已经确定了,这里再添加一些图片做做美化。
File?id=df5kjk97_932fwzw3sfm_b
File?id=df5kjk97_933drp57nkq_b

演示地址:

申请Dropbox来host你的Silverlight

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