用XAML做网页！！—导航栏-阿里云开发者社区

用XAML做网页！！—导航栏

2014-03-04 848

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 原文:用XAML做网页！！—导航栏这次要完成的是导航栏，这是页面中比较复杂的区域。先在 Microsoft Expression Design 中绘制导航栏的背景图案：导出为barback.

原文: 用XAML做网页！！—导航栏

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

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

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

ViewportUnits="Absolute" Viewport="0,0,15,13.86" TileMode="Tile"

完成后的代码如下：

Code

在Page资源中引用：

< ResourceDictionary Source ="barback.xaml" />

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

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

代码如下：

< 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底部：

< Path VerticalAlignment ="Bottom" Grid.ColumnSpan ="10" Height ="1" Stretch ="Fill" StrokeLineJoin ="Round" Stroke ="#FFFFFFFF" Data ="F1 M 52,307L 252.003,307" />

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

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

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

< Rectangle Opacity ="0.7" Grid.Column ="0" Width ="28" Fill =" {StaticResource ShadowLeft} " />

< Rectangle Opacity ="0.7" Grid.Column ="9" Width ="28" Fill =" {StaticResource ShadowRight} " />

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

先来添加一堆 RadioButton ：

< RadioButton IsChecked ="True" VerticalAlignment ="Bottom" Grid.Column ="1" > 简介 </ 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 占据一列，横向排开，现在的效果嘛...是这样：

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

Code

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

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

至此，主页面完整代码：

Code

源文件下载

用XAML做网页！！—导航栏

热门文章

最新文章

相关电子书