这次要完成的是导航栏，这是页面中比较复杂的区域。
先在 Microsoft Expression Design 中绘制导航栏的背景图案：
导出为barback.xaml，增加其填充规则：
ViewportUnits="Absolute" Viewport="0,0,15,13.86" TileMode="Tile"
完成后的代码如下：
<?xml version="1.0" encoding="utf-8"?>
http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
在Page资源中引用：
将Channel区块的背景改为“{StaticResource barback}”：
接下来要在Channel中添加一个Grid并实现如下布局：
代码如下：
它的背景是不透明度很低的黑色渐变，用于实现上下边缘处的阴影效果。
现在我们要在Grid中加入的是一条横向填满整个Grid的1像素白线，它紧贴Grid底部：
这是干什么用的呢？我们把画面放大到700%，看看我们将要实现的效果：
请看我鼠标所指的位置，这就是那条线，我们实现这个标签效果的原理就是：未选中的标签向下产生1像素外边距，从而使这条白线显示出来；而被选中的标签向下为0像素外边距，就盖住了这条白线，产生与页面中部内容区接合的效果。
OK，了解了原理先不着急实现，现在再加入两个矩形来产生左右边缘的阴影效果：
Fill="{StaticResource ShadowLeft}"/>
Fill="{StaticResource ShadowRight}"/>
然后我们就来做这个标签了，对于这种有状态的单选标签，我个人认为最合理的应该就是使用 RadioButton 来实现吧，虽然他们的长相大相径庭，但是WPF绝妙的样式定义功能就是可以这样化腐朽为神奇滴。
先来添加一堆 RadioButton ：
简介
使用指南
更新及下载
注册
广告投放
海外推广合作
关于
每个RadioButton 占据一列，横向排开，现在的效果嘛...是这样：
嗯！简直太恶心了！火速进行样式定义：
简单说，上面这些就是一个上面圆角下面直角的Border，里面嵌入文字，并在被选中后改变一下颜色和向下的外边距（Margin），且为了保持高度不变，内边距（Padding）也随之进行了调整。
现在的设计视图完整效果：
10474909_200808250359301.jpg来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/10474909/viewspace-433264/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/10474909/viewspace-433264/
扫一扫
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
