用XAML做网页！！—广告展示区

原文:用XAML做网页！！—广告展示区

此次我们来进行广告展示区块的制作。

首先在Show区块中去掉原来设置的背景色，加入新的渐变背景设定：

<Grid.Background>

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

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

<GradientStop Color="#FFD0D0D0" Offset="0.7" />

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

</LinearGradientBrush>

</Grid.Background>

可以看到，它在最底部是微微泛红的：

这样是模拟了橙色导航栏映射到这里的漫反射效果，增加了材质的金属质感。

而后我们将建立如下图所示的Grid格子，他能帮我们更好地安排内容：

代码如下：

在两侧填入两个矩形实现边缘阴影：

<Rectangle Opacity="0.5" Fill="{StaticResource ShadowLeft}" Grid.Column="0" Grid.RowSpan="3"/>

<Rectangle Opacity="0.5" Fill="{StaticResource ShadowRight}" Grid.Column="3" Grid.RowSpan="3"/>

接下来是布置背景中闪动的圆形：

Code
<Ellipse Margin="80,1,0,0" Height="164" Width="164" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Left" VerticalAlignment="Top">

<Ellipse.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<ColorAnimationUsingKeyFrames Duration="0:0:1.8" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

<DiscreteColorKeyFrame KeyTime="0:0:1.7" Value="#5FFF"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Ellipse.Triggers>

</Ellipse>

<Ellipse Margin="310,-111,0,0" Height="224" Width="224" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Left" VerticalAlignment="Top">

<Ellipse.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<ColorAnimationUsingKeyFrames Duration="0:0:1.5" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

<DiscreteColorKeyFrame KeyTime="0:0:1.1" Value="#5FFF"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Ellipse.Triggers>

</Ellipse>

<Ellipse Margin="0,41,560,0" Height="77" Width="77" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Right" VerticalAlignment="Top">

<Ellipse.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<ColorAnimationUsingKeyFrames Duration="0:0:1" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

<DiscreteColorKeyFrame KeyTime="0:0:0.7" Value="#5FFF"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Ellipse.Triggers>

</Ellipse>

<Ellipse Margin="0,-41,10,0" Height="264" Width="264" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Right" VerticalAlignment="Top">

<Ellipse.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<EventTrigger.Actions>

<BeginStoryboard>

<Storyboard>

<ColorAnimationUsingKeyFrames Duration="0:0:2" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

<DiscreteColorKeyFrame KeyTime="0:0:1.8" Value="#5FFF"/>

</ColorAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Ellipse.Triggers>

</Ellipse>

看上去有些冗长，其实就是4个不同尺寸、位置及不同动画发动时间的圆形而已。

现在就是这样了：

剩下来就是一些文字，在此之前我们先用 Microsoft Expression Design 设计个跳转链接的指示图标：

这是从一个圆形路径中减去一个三角形得到的，用过 Adobe Illustrator 的话应该很熟悉这方法。

将其划出切片，导出为go.xaml，其代码如下：

Code
<?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="go" Stretch="Uniform">

<DrawingBrush.Drawing>

<DrawingGroup ClipGeometry="F1 M 0,0L 40,0L 40,40L 0,40L 0,0">

<DrawingGroup.Children>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="M 20,0C 31.0457,0 40,8.95428 40,20C 40,31.0457 31.0457,40 20,40C 8.95428,40 0,31.0457 0,20C 0,8.95428 8.95428,0 20,0 Z M 32.0941,20L 13.9059,9.49902L 13.9059,30.501L 32.0941,20 Z "/>

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</ResourceDictionary>

将其引入Page的资源：

<ResourceDictionary Source="go.xaml"/>

然后再将这两个文本块加入Show区块之中：

<TextBlock Margin="45,0,0,0" FontWeight="Bold" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2">

<Run Foreground="#FFBCBCBC" FontSize="16">摆脱臃肿的邮件客户端和繁复的网页登陆</Run>

<LineBreak/>

<Run Foreground="#FF9A9A9A" FontSize="32">发邮件是可以如此轻松畅快！</Run>

</TextBlock>

<TextBlock Margin="15,0,0,0" Grid.Column="2" Grid.Row="2" Grid.RowSpan="2">

<Hyperlink ToolTip="打开下载页面" TargetName="_blank" NavigateUri="http://www.cnblogs.com/SkyD/articles/1264080.html" FontSize="25" FontWeight="Bold" Foreground="#D0FFFFFF">

<Hyperlink.Style>

<Style TargetType="Hyperlink">

<Setter Property="TextBlock.TextDecorations" Value="{x:Null}"/>

</Style>

</Hyperlink.Style>

<Run>立即尝试</Run>

<Rectangle VerticalAlignment="Center" Margin="5,0,0,0" Fill="{StaticResource go}" Height="20" Width="25"/>

</Hyperlink>

</TextBlock>

Hyperlink 标记在这里的功能和 HTML 里的 <a> 是等同的，其中的样式设定的功能是去除文本修饰，即下划线。

这样就完成了广告展示区的制作，效果：

完整的设计视图效果：

至此，主页面的代码：

Code
<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 Source="go.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" DockPanel.Dock="Top" Height="135" ClipToBounds="True">

                    <Grid.Background>

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

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

                            <GradientStop Color="#FFD0D0D0" Offset="0.7" />

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

                        </LinearGradientBrush>

                    </Grid.Background>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="28" />

                        <ColumnDefinition Width="5*" />

                        <ColumnDefinition Width="4*" />

                        <ColumnDefinition Width="28" />

                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="2*" />

                        <RowDefinition Height="3*" />

                        <RowDefinition Height="4*" />

                    </Grid.RowDefinitions>

                    <Rectangle Opacity="0.5" Fill="{StaticResource ShadowLeft}" Grid.Column="0" Grid.RowSpan="3" />

                    <Rectangle Opacity="0.5" Fill="{StaticResource ShadowRight}" Grid.Column="3" Grid.RowSpan="3" />

                    <Ellipse Margin="80,1,0,0" Height="164" Width="164" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Left" VerticalAlignment="Top">

                        <Ellipse.Triggers>

                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                                <EventTrigger.Actions>

                                    <BeginStoryboard>

                                        <Storyboard>

                                            <ColorAnimationUsingKeyFrames Duration="0:0:1.8" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

                                                <DiscreteColorKeyFrame KeyTime="0:0:1.7" Value="#5FFF" />

                                            </ColorAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </BeginStoryboard>

                                </EventTrigger.Actions>

                            </EventTrigger>

                        </Ellipse.Triggers>

                    </Ellipse>

                    <Ellipse Margin="310,-111,0,0" Height="224" Width="224" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Left" VerticalAlignment="Top">

                        <Ellipse.Triggers>

                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                                <EventTrigger.Actions>

                                    <BeginStoryboard>

                                        <Storyboard>

                                            <ColorAnimationUsingKeyFrames Duration="0:0:1.5" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

                                                <DiscreteColorKeyFrame KeyTime="0:0:1.1" Value="#5FFF" />

                                            </ColorAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </BeginStoryboard>

                                </EventTrigger.Actions>

                            </EventTrigger>

                        </Ellipse.Triggers>

                    </Ellipse>

                    <Ellipse Margin="0,41,560,0" Height="77" Width="77" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Right" VerticalAlignment="Top">

                        <Ellipse.Triggers>

                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                                <EventTrigger.Actions>

                                    <BeginStoryboard>

                                        <Storyboard>

                                            <ColorAnimationUsingKeyFrames Duration="0:0:1" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

                                                <DiscreteColorKeyFrame KeyTime="0:0:0.7" Value="#5FFF" />

                                            </ColorAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </BeginStoryboard>

                                </EventTrigger.Actions>

                            </EventTrigger>

                        </Ellipse.Triggers>

                    </Ellipse>

                    <Ellipse Margin="0,-41,10,0" Height="264" Width="264" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Fill="#49EEEEEE" HorizontalAlignment="Right" VerticalAlignment="Top">

                        <Ellipse.Triggers>

                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                                <EventTrigger.Actions>

                                    <BeginStoryboard>

                                        <Storyboard>

                                            <ColorAnimationUsingKeyFrames Duration="0:0:2" RepeatBehavior="Forever" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">

                                                <DiscreteColorKeyFrame KeyTime="0:0:1.8" Value="#5FFF" />

                                            </ColorAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </BeginStoryboard>

                                </EventTrigger.Actions>

                            </EventTrigger>

                        </Ellipse.Triggers>

                    </Ellipse>

                    <TextBlock Margin="45,0,0,0" FontWeight="Bold" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2">

                      <Run Foreground="#FFBCBCBC" FontSize="16">摆脱臃肿的邮件客户端和繁复的网页登陆</Run>

                      <LineBreak />

                      <Run Foreground="#FF9A9A9A" FontSize="32">发邮件是可以如此轻松畅快！</Run>

                    </TextBlock>

                    <TextBlock Margin="15,0,0,0" Grid.Column="2" Grid.Row="2" Grid.RowSpan="2">

                        <Hyperlink ToolTip="打开下载页面" TargetName="_blank" NavigateUri="http://www.cnblogs.com/SkyD/articles/1264080.html" FontSize="25" FontWeight="Bold" Foreground="#D0FFFFFF">

                            <Hyperlink.Style>

                                <Style TargetType="Hyperlink">

                                    <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />

                                </Style>

                            </Hyperlink.Style>

                            <Run>立即尝试</Run><Rectangle VerticalAlignment="Center" Margin="5,0,0,0" Fill="{StaticResource go}" Height="20" Width="25" />

                        </Hyperlink>

                    </TextBlock>

                </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>

源文件下载