这次要完成的是导航栏,这是页面中比较复杂的区域。
先在 Microsoft Expression Design 中绘制导航栏的背景图案:
导出为barback.xaml,增加其填充规则:
完成后的代码如下:
在Page资源中引用:
将Channel区块的背景改为“{StaticResource barback}”:
接下来要在Channel中添加一个Grid并实现如下布局:
代码如下:
< Grid.ColumnDefinitions >
< ColumnDefinition Width ="28" />
< ColumnDefinition Width ="Auto" />
< ColumnDefinition Width ="Auto" />
< ColumnDefinition Width ="Auto" />
< ColumnDefinition Width ="Auto" />
< ColumnDefinition Width ="Auto" />
< ColumnDefinition Width ="Auto" />
< ColumnDefinition Width ="Auto" />
< ColumnDefinition Width ="*" />
< ColumnDefinition Width ="28" />
</ Grid.ColumnDefinitions >
< Grid.Background >
< LinearGradientBrush EndPoint ="0.5,1" StartPoint ="0.5,0" >
< GradientStop Color ="#26000000" Offset ="0.95" />
< GradientStop Color ="#00000000" Offset ="0.8" />
< GradientStop Color ="#00000000" Offset ="0.2" />
< GradientStop Color ="#26000000" Offset ="0" />
</ LinearGradientBrush >
</ Grid.Background >
</ Grid >
它的背景是不透明度很低的黑色渐变,用于实现上下边缘处的阴影效果。
现在我们要在Grid中加入的是一条横向填满整个Grid的1像素白线,它紧贴Grid底部:
这是干什么用的呢?我们把画面放大到700%,看看我们将要实现的效果:
请看我鼠标所指的位置,这就是那条线,我们实现这个标签效果的原理就是:未选中的标签向下产生1像素外边距,从而使这条白线显示出来;而被选中的标签向下为0像素外边距,就盖住了这条白线,产生与页面中部内容区接合的效果。
OK,了解了原理先不着急实现,现在再加入两个矩形来产生左右边缘的阴影效果:
< Rectangle Opacity ="0.7" Grid.Column ="9" Width ="28" Fill =" {StaticResource ShadowRight} " />
然后我们就来做这个标签了,对于这种有状态的单选标签,我个人认为最合理的应该就是使用 RadioButton 来实现吧,虽然他们的长相大相径庭,但是WPF绝妙的样式定义功能就是可以这样化腐朽为神奇滴。
先来添加一堆 RadioButton :
< RadioButton VerticalAlignment ="Bottom" Grid.Column ="2" > 使用指南 </ RadioButton >
< RadioButton VerticalAlignment ="Bottom" Grid.Column ="3" > 更新及下载 </ RadioButton >
< RadioButton VerticalAlignment ="Bottom" Grid.Column ="4" > 注册 </ RadioButton >
< RadioButton VerticalAlignment ="Bottom" Grid.Column ="5" > 广告投放 </ RadioButton >
< RadioButton VerticalAlignment ="Bottom" Grid.Column ="6" > 海外推广合作 </ RadioButton >
< RadioButton VerticalAlignment ="Bottom" Grid.Column ="7" > 关于 </ RadioButton >
每个RadioButton 占据一列,横向排开,现在的效果嘛...是这样:
嗯!简直太恶心了!火速进行样式定义:
简单说,上面这些就是一个上面圆角下面直角的Border,里面嵌入文字,并在被选中后改变一下颜色和向下的外边距(Margin),且为了保持高度不变,内边距(Padding)也随之进行了调整。
现在的设计视图完整效果:
至此,主页面完整代码:
本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/08/25/1275413.html,如需转载请自行联系原作者