用XAML做网页！！—导航栏

 

这次要完成的是导航栏，这是页面中比较复杂的区域。

 

先在 Microsoft Expression Design 中绘制导航栏的背景图案：

 

 

 

导出为barback.xaml，增加其填充规则：

 

 

 

 

 

完成后的代码如下：

 

 

 

 

在Page资源中引用：

 

 

 

 

 

将Channel区块的背景改为“{StaticResource barback}”：

 

 

接下来要在Channel中添加一个Grid并实现如下布局：

 

 

代码如下：

 

 

 

它的背景是不透明度很低的黑色渐变，用于实现上下边缘处的阴影效果。

 

现在我们要在Grid中加入的是一条横向填满整个Grid的1像素白线，它紧贴Grid底部：

 

 

 

 

这是干什么用的呢？我们把画面放大到700%，看看我们将要实现的效果：

 

 

请看我鼠标所指的位置，这就是那条线，我们实现这个标签效果的原理就是：未选中的标签向下产生1像素外边距，从而使这条白线显示出来；而被选中的标签向下为0像素外边距，就盖住了这条白线，产生与页面中部内容区接合的效果。

 

OK，了解了原理先不着急实现，现在再加入两个矩形来产生左右边缘的阴影效果：

 

 

 

 

然后我们就来做这个标签了，对于这种有状态的单选标签，我个人认为最合理的应该就是使用 RadioButton 来实现吧，虽然他们的长相大相径庭，但是WPF绝妙的样式定义功能就是可以这样化腐朽为神奇滴。

 

先来添加一堆 RadioButton ：

 

 

 

 

 

每个RadioButton 占据一列，横向排开，现在的效果嘛...是这样：

 

 

嗯！简直太恶心了！火速进行样式定义：

 

 

 

简单说，上面这些就是一个上面圆角下面直角的Border，里面嵌入文字，并在被选中后改变一下颜色和向下的外边距（Margin），且为了保持高度不变，内边距（Padding）也随之进行了调整。

 

 

现在的设计视图完整效果：

 

 

至此，主页面完整代码：

 

 

 

源文件下载

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