用XAML做网页！！—页头

接续上次进度，我们此次来制作页头。

首先要实现两侧边缘的美化，如下图所示：

用XAML做网页！！—页头

在边缘处有一层朦胧的亮度反光效果，这也是通过简单的渐变实现的，而且我们在后面的每个区块中都要实现类似的效果，所以现在就将所需的资源一起创建了。

在Grid中创建一个资源标记，并设置4个笔刷资源：

LightLeft和LightRight是我们一会用到的，剩下两个会在其它区块中使用。

在Head区块中插入两个矩形，并引用上述两个资源做填充：

用XAML做网页！！—页头

两个矩形一左一右贴靠，边缘美化工作就完成了。

然后请你把以下代码保存为logo.xaml，这也是由 Microsoft Expression Design 设计并导出的资源，是我们的页面Logo图形：

接着在Page的资源中引入这个资源：

用XAML做网页！！—页头

在Head中加入矩形填充该资源：

用XAML做网页！！—页头

然后再来加一条纵向分隔线：

用XAML做网页！！—页头

这是使用了一个1像素宽的矩形来实现的，其效果如下：

用XAML做网页！！—页头

后面要实现的内容是这些：

用XAML做网页！！—页头

这实际上就是在一个Canvas容器中放置了几个文本标签来实现的：

@

</Label>

<Label Margin="312,35,0,0" Foreground="#61000000" FontFamily="Nina" FontWeight="Bold" FontSize="44">You@^^</Label>

<Label Margin="32,57,0,0" Foreground="#AFC3C3C3" FontWeight="Bold" FontSize="16">

妙趣轻松，让好心情随邮件散播世界！

</Label>

</Canvas>

Canvas的ClipToBounds属性设为True可以使超出容器范围的内容被剪裁，比如我们这里的那个巨大的@符号。

这个@符号被我设置了动画，它会在那里不停的旋转。

现在，把上面那段代码也插入Head区块，就完成了页面头部的制作：

用XAML做网页！！—页头

嗯，对，还有下面这条水平线也要给一块弄出来：

用XAML做网页！！—页头

这很简单，我们只使用一个渐变边框和一个渐变背景就可以实现了：

边框为什么也要渐变呢？因为我们这个只有上下有边框线，而且它们是不同颜色的，所以一个渐变就搞定了。

至此全部代码如下：

Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

WindowTitle="MailMail"

FontFamily="微软雅黑"

Background="#FF424242"

SnapsToDevicePixels="True">

    <Page.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="back.xaml"/>

                <ResourceDictionary Source="logo.xaml"/>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Page.Resources>

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

        <Grid MinHeight="900" MinWidth="1000" Background="{StaticResource back}">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="8*"/>

                <ColumnDefinition Width="84*"/>

                <ColumnDefinition Width="8*"/>

            </Grid.ColumnDefinitions>

            <Grid.Resources>

                <LinearGradientBrush x:Key="LightLeft" StartPoint="0,0" EndPoint="1,0">

                    <GradientStop Color="#00FFFFFF" Offset="0.1" />

                    <GradientStop Color="#08FFFFFF" Offset="0.4" />

                    <GradientStop Color="#08FFFFFF" Offset="0.6" />

                    <GradientStop Color="#00FFFFFF" Offset="1" />

                </LinearGradientBrush>

                <LinearGradientBrush x:Key="LightRight" StartPoint="1,0" EndPoint="0,0">

                    <GradientStop Color="#00FFFFFF" Offset="0.1" />

                    <GradientStop Color="#08FFFFFF" Offset="0.4" />

                    <GradientStop Color="#08FFFFFF" Offset="0.6" />

                    <GradientStop Color="#00FFFFFF" Offset="1" />

                </LinearGradientBrush>

                <LinearGradientBrush x:Key="ShadowLeft" StartPoint="0,0" EndPoint="1,0">

                    <GradientStop Color="#00000000" Offset="0.1" />

                    <GradientStop Color="#18000000" Offset="0.4" />

                    <GradientStop Color="#18000000" Offset="0.6" />

                    <GradientStop Color="#00000000" Offset="1" />

                </LinearGradientBrush>

                <LinearGradientBrush x:Key="ShadowRight" StartPoint="1,0" EndPoint="0,0">

                    <GradientStop Color="#00000000" Offset="0.1" />

                    <GradientStop Color="#18000000" Offset="0.4" />

                    <GradientStop Color="#18000000" Offset="0.6" />

                    <GradientStop Color="#00000000" Offset="1" />

                </LinearGradientBrush>

            </Grid.Resources>

            <Rectangle Width="20" Grid.Column="0" HorizontalAlignment="Right" Margin="0,0,0,0">

                <Rectangle.Fill>

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

                        <GradientStop Color="#00000000" Offset="1" />

                        <GradientStop Color="#20000000" Offset="0" />

                    </LinearGradientBrush>

                </Rectangle.Fill>

            </Rectangle>

            <Rectangle Width="20" Grid.Column="3" HorizontalAlignment="Left" Margin="0,0,0,0">

                <Rectangle.Fill>

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

                        <GradientStop Color="#00000000" Offset="0" />

                        <GradientStop Color="#20000000" Offset="1" />

                    </LinearGradientBrush>

                </Rectangle.Fill>

            </Rectangle>

            <DockPanel Background="#FFF" Grid.Column="1">

                <DockPanel x:Name="Head" DockPanel.Dock="Top" Background="#FF4A4A4A" Height="115">

                    <Rectangle DockPanel.Dock="Left" Width="16" Fill="{StaticResource LightLeft}"/>

                    <Rectangle DockPanel.Dock="Right" Width="16" Fill="{StaticResource LightRight}"/>

                    <Rectangle Fill="{StaticResource logo}" Margin="0" Width="300" Height="125" DockPanel.Dock="Left" />

                    <Rectangle Height="75" Width="1" DockPanel.Dock="Left">

                        <Rectangle.Fill>

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

                                <GradientStop Color="#03FFFFFF" Offset="0" />

                                <GradientStop Color="#5DFFFFFF" Offset="0.5" />

                                <GradientStop Color="#00FFFFFF" Offset="1" />

                            </LinearGradientBrush>

                        </Rectangle.Fill>

                    </Rectangle>

                    <Canvas ClipToBounds="True">

                        <Canvas.Background>

                            <RadialGradientBrush RadiusX="0.395548" RadiusY="0.952428" Center="0.343334,0.578031" GradientOrigin="0.543334,0.578031">

                                <RadialGradientBrush.GradientStops>

                                    <GradientStop Color="#23FFFCE5" Offset="0" />

                                    <GradientStop Color="#00FFFFFF" Offset="1" />

                                </RadialGradientBrush.GradientStops>

                                <RadialGradientBrush.RelativeTransform>

                                    <TransformGroup>

                                        <SkewTransform CenterX="0.343334" CenterY="0.578031" AngleX="-6.15299" AngleY="0" />

                                        <RotateTransform CenterX="0.343334" CenterY="0.578031" Angle="-6.59875" />

                                    </TransformGroup>

                                </RadialGradientBrush.RelativeTransform>

                            </RadialGradientBrush>

                        </Canvas.Background>

                        <Label Margin="52,-177,0,0" Foreground="#09FFFFFF" FontFamily="Nina" FontWeight="Bold" FontSize="354">

                            <Label.RenderTransform>

                                <RotateTransform Angle="0" CenterX="172" CenterY="240" />

                            </Label.RenderTransform>

                            <Label.Triggers>

                                <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                                    <EventTrigger.Actions>

                                        <BeginStoryboard>

                                            <Storyboard>

                                                <DoubleAnimation To="360" Duration="0:0:10" RepeatBehavior="Forever" Storyboard.TargetProperty="(Label.RenderTransform).(RotateTransform.Angle)" />

                                            </Storyboard>

                                        </BeginStoryboard>

                                    </EventTrigger.Actions>

                                </EventTrigger>

                            </Label.Triggers>

                            @

                        </Label>

                        <Label Margin="312,35,0,0" Foreground="#61000000" FontFamily="Nina" FontWeight="Bold" FontSize="44">You@^^</Label>

                        <Label Margin="32,57,0,0" Foreground="#AFC3C3C3" FontWeight="Bold" FontSize="16">

                            妙趣轻松，让好心情随邮件散播世界！

                        </Label>

                    </Canvas>

                </DockPanel>

                <Border x:Name="HeadLine" BorderThickness="0,1" DockPanel.Dock="Top" Height="15">

                    <Border.BorderBrush>

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

                            <GradientStop Color="#D81B1B1B" Offset="0" />

                            <GradientStop Color="#FFF" Offset="1" />

                        </LinearGradientBrush>

                    </Border.BorderBrush>

                    <Border.Background>

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

                            <GradientStop Color="#FF9D9D9D" Offset="0" />

                            <GradientStop Color="#FF808080" Offset="0.005" />

                            <GradientStop Color="#FF9D9D9D" Offset="0.05" />

                            <GradientStop Color="#FF9D9D9D" Offset="0.95" />

                            <GradientStop Color="#FF808080" Offset="0.995" />

                            <GradientStop Color="#FF9D9D9D" Offset="1" />

                        </LinearGradientBrush>

                    </Border.Background>

                </Border>

                <Grid x:Name="Show" Background="#EEE" DockPanel.Dock="Top" Height="135" ClipToBounds="True"></Grid>

                <Border x:Name="Channel" DockPanel.Dock="Top" Height="50" Background="#FF8E45" BorderThickness="0,1,0,0" BorderBrush="#FFF"></Border>

                <Border x:Name="Footer" Background="#666" BorderBrush="#888" BorderThickness="0,4,0,0" DockPanel.Dock="Bottom" Height="55"></Border>

                <DockPanel x:Name="Body" Background="#FFFFFCD1">

                    <DockPanel x:Name="Side" Background="#1E874900" DockPanel.Dock="Right" Width="245"></DockPanel>

                    <StackPanel x:Name="Content"></StackPanel>

                </DockPanel>

            </DockPanel>

        </Grid>

    </ScrollViewer>

</Page>

用XAML做网页！！—页头

源代码下载