用XAML做网页!!—页头

简介:

 

接续上次进度,我们此次来制作页头。

 

首先要实现两侧边缘的美化,如下图所示:

 

 

在边缘处有一层朦胧的亮度反光效果,这也是通过简单的渐变实现的,而且我们在后面的每个区块中都要实现类似的效果,所以现在就将所需的资源一起创建了。

 

Grid中创建一个资源标记,并设置4个笔刷资源:

 

 

ContractedBlock.gif Code

 

 

LightLeft和LightRight是我们一会用到的,剩下两个会在其它区块中使用。

 

Head区块中插入两个矩形,并引用上述两个资源做填充:

 

 

 

< Rectangle  DockPanel.Dock ="Left"  Width ="16"  Fill =" {StaticResource LightLeft} " />

< Rectangle  DockPanel.Dock ="Right"  Width ="16"  Fill =" {StaticResource LightRight} " />

 

 

两个矩形一左一右贴靠,边缘美化工作就完成了。

 

然后请你把以下代码保存为logo.xaml,这也是由 Microsoft Expression Design 设计并导出的资源,是我们的页面Logo图形:

 

 

ContractedBlock.gif Code

 

接着在Page的资源中引入这个资源:

 

 

 

< ResourceDictionary  Source ="logo.xaml" />

 

 

Head中加入矩形填充该资源:

 

 

 

< Rectangle  Fill =" {StaticResource logo} "  Margin ="0"  Width ="300"  Height ="125"  DockPanel.Dock ="Left"   />

 

 

然后再来加一条纵向分隔线:

 

 

 

< Rectangle  Height ="75"  Width ="1"  DockPanel.Dock ="Left" >

< Rectangle.Fill >

< LinearGradientBrush  StartPoint ="0,0"  EndPoint ="0,1" >

< GradientStop  Color ="#03FFFFFF"  Offset ="0"   />

< GradientStop  Color ="#5DFFFFFF"  Offset ="0.5"   />

< GradientStop  Color ="#00FFFFFF"  Offset ="1"   />

</ LinearGradientBrush >

</ Rectangle.Fill >

</ Rectangle >

 

 

这是使用了一个1像素宽的矩形来实现的,其效果如下:

 

 

后面要实现的内容是这些:

 

 

这实际上就是在一个Canvas容器中放置了几个文本标签来实现的:

 

 

ContractedBlock.gif Code

 

Canvas的ClipToBounds属性设为True可以使超出容器范围的内容被剪裁,比如我们这里的那个巨大的@符号。

 

这个@符号被我设置了动画,它会在那里不停的旋转。

 

现在,把上面那段代码也插入Head区块,就完成了页面头部的制作:

 

 

嗯,对,还有下面这条水平线也要给一块弄出来:

 

 

这很简单,我们只使用一个渐变边框和一个渐变背景就可以实现了:

 

 

ContractedBlock.gif Code

 

边框为什么也要渐变呢?因为我们这个只有上下有边框线,而且它们是不同颜色的,所以一个渐变就搞定了。

 

至此全部代码如下:

 

 

ContractedBlock.gif Code

 

 

 

源代码下载

本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/08/21/1273479.html,如需转载请自行联系原作者

相关文章
|
15天前
比较美观的跳转加载页html源码
比较美观的跳转加载页html源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果
21 0
比较美观的跳转加载页html源码
|
2月前
publiccms中将推荐页的内容显示在页面片段中
publiccms中将推荐页的内容显示在页面片段中
8 0
|
6月前
如何实现一个网页头部图标
如何实现一个网页头部图标
21 0
|
Web App开发 编解码 前端开发
CSS实战 | 磁性页头和页脚的表格制作
表格,是用来展示记录集常用的标签,现如今各种终端设备,大分辨率、小分辨率等等,让表格展现数据变得不那么直观,如表头被滚动条操作移除可视范围导致查看数据不够友好。说到表格数据查看的方便性,大家首先想到的应该是Excel。没错,这里跟大家分享一个操作便捷且直观的响应式表格制作方式,以后在项目中或许能够用上,当然现在很多框架都实现了这样的效果。
159 0
CSS实战 | 磁性页头和页脚的表格制作
HTML设置网页图标标志
本文目录 1. 网页图标标志 2. 实现
254 0
速成网站怎么修改模板页头页尾
1、登录速成网站后台,进入PC设计。2、如下图,点击:页头页尾: 3、点击:“内页页头页尾”,再点击齿轮图案,如下图,就可以设置页头了。 4、您可以在这儿设置网页宽度,一般默认是1000,也可以设置背景颜色或背景图片。
4030 0