此次我们来设计边栏和页脚，首先从页脚开始，其代码很简单：

 

 

效果如下：

这里没什么可讲的，接下来转向内容区域。

可能很多人在上一讲中已经发现我们设计的标签的底端和页面内容区域没有很好的接合，存在色差：

我们将内容区的背景改为一个渐变笔刷：

 

 

通过这个渐变，给内容区顶端增加了微微泛红的色彩，即消除了色差：

然后再插入两个矩形以实现内容区两侧的阴影效果：

 

 

然后开始进入边栏的制作，首先实现边栏边线和背景样式，其效果如下：

在左面有一条由中心向上下两方渐变到透明的细线作为边线。

背景使用一个径向渐变，中心点设在左边线中心处。

这样设计有一种微微隆起的效果。

它们是由一个矩形和一个StatckPanel组成的：

 

 

StackPanel里面我们需要装填一些内容进去：

 

 

可以看到其中的TextBlock使用了 TextTrimming="CharacterEllipsis" 属性，此属性的功能就是将超出容器宽度的字符以省略号显示，如下图所示：

至此，在设计视图中的完整效果如下：

主文档中的完整代码：

 

 

源文件下载