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

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

 

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

 

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

 

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

 

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

 

 

用XAML做网页!!—广告展示区
<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>
用XAML做网页!!—广告展示区

 

 

可以看到,它在最底部是微微泛红的:

 

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

 

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

 

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

 

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

 

代码如下:

 

 

用XAML做网页!!—广告展示区
<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>
用XAML做网页!!—广告展示区

 

 

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

 

 

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

 

 

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

 

 

用XAML做网页!!—广告展示区Code

 

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

 

现在就是这样了:

 

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

 

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

 

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

 

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

 

将其划出切片,导出为go.xaml,其代码如下:

 

 

用XAML做网页!!—广告展示区Code

 

 

将其引入Page的资源:

 

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

 

 

<ResourceDictionary Source="go.xaml"/>

 

 

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

 

 

用XAML做网页!!—广告展示区
<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>

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

 

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

 

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

 

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

 

完整的设计视图效果:

 

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

 

至此,主页面的代码:

 

用XAML做网页!!—广告展示区Code

 

 

源文件下载

用XAML做网页!!—广告展示区,布布扣,bubuko.com

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

上一篇:ASP.NET 中JSON 的序列化和反序列化


下一篇:用XAML做网页!!—框架