用XAML做网页！！—导航栏

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

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

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

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

完成后的代码如下：

<?xml version="1.0" encoding="utf-8"?>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<DrawingBrush x:Key="barback" Stretch="Uniform" ViewportUnits="Absolute" Viewport="0,0,15,13.86" TileMode="Tile">

       <DrawingBrush.Drawing>

           <DrawingGroup ClipGeometry="F1 M 0,0L 15,0L 15,13.8571L 0,13.8571L 0,0">

               <DrawingGroup.Children>

                   <GeometryDrawing Brush="#FF8E45" Geometry="F1 M 0,-3.05176e-005L 15,-3.05176e-005L 15,13.8571L 0,13.8571L 0,-3.05176e-005 Z "/>

                   <GeometryDrawing Brush="#0D882900" Geometry="F1 M 3.02855,-3.05176e-005L 4.28571,-3.05176e-005L 4.28571,13.8571L 3.02855,13.8571L 3.02855,-3.05176e-005 Z "/>

                   <GeometryDrawing Brush="#0D882900" Geometry="F1 M 1.52588e-005,7.65891L 15,7.65891L 15,9.07321L 1.52588e-005,9.07321L 1.52588e-005,7.65891 Z "/>

               </DrawingGroup.Children>

           </DrawingGroup>

       </DrawingBrush.Drawing>

   </DrawingBrush>

</ResourceDictionary>

在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" ffset="0.95"/>

<GradientStop Color="#00000000" ffset="0.8"/>

<GradientStop Color="#00000000" ffset="0.2"/>

<GradientStop Color="#26000000" ffset="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 pacity="0.7" Grid.Column="0" Width="28" Fill="{StaticResource ShadowLeft}"/>

<Rectangle pacity="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占据一列，横向排开，现在的效果嘛...是这样：

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

<Grid.Resources>

<Style. TargetType="RadioButton">

<Setter Property="VerticalAlignment" Value="Bottom"/>

<Setter Property="Cursor" Value="Hand"/>

<Setter Property="Foreground" Value="#CFFF"/>

<Setter Property="FontSize" Value="16"/>

<Setter Property="Margin" Value="0,0,8,0"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="RadioButton">

<Border x:Name="tag" Margin="0,0,0,1" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" Padding="18,4,18,3">

<Border.BorderBrush>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="#FFEF7300" ffset="0"/>

<GradientStop Color="#FFC55300" ffset="0.2" />

</LinearGradientBrush>

</Border.BorderBrush>

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFD04B00" ffset="1"/>

<GradientStop Color="#FFFF7816" ffset="0.5"/>

<GradientStop Color="#FFF26802" ffset="0.5"/>

<GradientStop Color="#FFFF9D56" ffset="0"/>

</LinearGradientBrush>

</Border.Background>

<TextBlock Text="{TemplateBinding Content}"/>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsChecked" Value="True">

<Setter Property="Foreground" Value="#B84901"/>

<Setter TargetName="tag" Property="Margin" Value="0"/>

<Setter TargetName="tag" Property="Padding" Value="18,4"/>

<Setter TargetName="tag" Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFF1D1" ffset="1"/>

<GradientStop Color="#FFF7E5" ffset="0.5"/>

<GradientStop Color="#FFF1D0" ffset="0.5"/>

<GradientStop Color="#FFF9EA" ffset="0"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter TargetName="tag" Property="BorderBrush" Value="#FFFBF0"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

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

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

源文件下载