原文:用XAML做网页！！—广告展示区

 

 

此次我们来进行广告展示区块的制作。

 

首先在Show区块中去掉原来设置的背景色，加入新的渐变背景设定：

 

 

 

 

 

可以看到，它在最底部是微微泛红的：

 

 

这样是模拟了橙色导航栏映射到这里的漫反射效果，增加了材质的金属质感。

 

而后我们将建立如下图所示的Grid格子，他能帮我们更好地安排内容：

 

 

代码如下：

 

 

 

 

在两侧填入两个矩形实现边缘阴影：

 

 

 

 

接下来是布置背景中闪动的圆形：

 

 

 

看上去有些冗长，其实就是4个不同尺寸、位置及不同动画发动时间的圆形而已。

 

现在就是这样了：

 

 

剩下来就是一些文字，在此之前我们先用 Microsoft Expression Design 设计个跳转链接的指示图标：

 

 

这是从一个圆形路径中减去一个三角形得到的，用过 Adobe Illustrator 的话应该很熟悉这方法。

 

将其划出切片，导出为go.xaml，其代码如下：

 

 

 

 

将其引入Page的资源：

 

 

 

 

 

然后再将这两个文本块加入Show区块之中：

 

 

 

Hyperlink 标记在这里的功能和 HTML 里的 <a> 是等同的，其中的样式设定的功能是去除文本修饰，即下划线。

 

这样就完成了广告展示区的制作，效果：

 

 

完整的设计视图效果：

 

 

至此，主页面的代码：

 

 

 

源文件下载