用XAML做网页!!—边栏与页脚

简介:

logo

此次我们来设计边栏和页脚,首先从页脚开始,其代码很简单:

 

< Border  x:Name ="Footer"  BorderBrush ="#888"  BorderThickness ="0,4,0,0"  DockPanel.Dock ="Bottom"  Height ="55" >
    
< Border.Background >
        
< LinearGradientBrush  StartPoint ="0,0"  EndPoint ="1,0" >
            
< GradientStop  Color ="#FF686868"  Offset ="0"   />
            
< GradientStop  Color ="#FFC8C8C8"  Offset ="0.7"   />
            
< GradientStop  Color ="#FF686868"  Offset ="1"   />
        
</ LinearGradientBrush >
    
</ Border.Background >
    
< DockPanel  LastChildFill ="False" >
        
< Rectangle  DockPanel.Dock ="Left"  Width ="28"  Fill =" {StaticResource LightLeft} "   />
        
< Rectangle  DockPanel.Dock ="Right"  Width ="28"  Fill =" {StaticResource LightRight} "   />
        
< TextBlock  VerticalAlignment ="Center"  FontSize ="14"  Foreground ="#DDD" > Copyright © 2008 SkyD's Blog All Rights Reserved. </ TextBlock >
    
</ DockPanel >
</ Border >

 

效果如下:

页脚

这里没什么可讲的,接下来转向内容区域。

可能很多人在上一讲中已经发现我们设计的标签的底端和页面内容区域没有很好的接合,存在色差:

修改背景前

我们将内容区的背景改为一个渐变笔刷:

背景渐变代码

 

< DockPanel.Background >
    
< LinearGradientBrush  StartPoint ="0,0"  EndPoint ="0,1" >
        
< GradientStop  Color ="#FFF1D1"  Offset ="0"   />
        
< GradientStop  Color ="#FFFFFCD1"  Offset ="0.1"   />
    
</ LinearGradientBrush >
</ DockPanel.Background >

 

通过这个渐变,给内容区顶端增加了微微泛红的色彩,即消除了色差:

修改背景后

然后再插入两个矩形以实现内容区两侧的阴影效果:

边缘阴影代码

 

< Rectangle  Opacity ="0.2"  Width ="28"  DockPanel.Dock ="Left"  Fill =" {StaticResource ShadowLeft} " />
< Rectangle  Opacity ="0.2"  Width ="28"  DockPanel.Dock ="Right"  Fill =" {StaticResource ShadowRight} " />

 

然后开始进入边栏的制作,首先实现边栏边线和背景样式,其效果如下:

边栏样式

在左面有一条由中心向上下两方渐变到透明的细线作为边线。

背景使用一个径向渐变,中心点设在左边线中心处。

这样设计有一种微微隆起的效果。

它们是由一个矩形和一个StatckPanel组成的:

边栏效果代码

 

< Rectangle  Width ="1"  DockPanel.Dock ="Left" >
    
< Rectangle.Fill >
        
< LinearGradientBrush  StartPoint ="0,0"  EndPoint ="0,1" >
            
< GradientStop  Color ="#00000000"  Offset ="0"   />
            
< GradientStop  Color ="#1E874900"  Offset ="0.4"   />
            
< GradientStop  Color ="#1E874900"  Offset ="0.6"   />
            
< GradientStop  Color ="#00000000"  Offset ="1"   />
        
</ LinearGradientBrush >
    
</ Rectangle.Fill >
</ Rectangle >
< StackPanel >
    
< StackPanel.Background >
        
< RadialGradientBrush  Center ="0.0,0.5"  GradientOrigin ="0.0,0.5" >
            
< RadialGradientBrush.GradientStops >
                
< GradientStop  Color ="#10AA6600"  Offset ="0"   />
                
< GradientStop  Color ="#00AA6600"  Offset ="1"   />
            
</ RadialGradientBrush.GradientStops >
            
< RadialGradientBrush.RelativeTransform >
                
< TransformGroup  />
            
</ RadialGradientBrush.RelativeTransform >
        
</ RadialGradientBrush >
    
</ StackPanel.Background >
</ StackPanel >

 

StackPanel里面我们需要装填一些内容进去:

 

< Border  Margin ="28,20,4,0"  BorderBrush ="#AC690C"  BorderThickness ="1"  CornerRadius ="3"  Padding ="12" >
    
< Border.Background >
        
< LinearGradientBrush  StartPoint ="0,0"  EndPoint ="0,1" >
            
< GradientStop  Color ="#FFF4963F"  Offset ="0"   />
            
< GradientStop  Color ="#FFD5461F"  Offset ="1"   />
        
</ LinearGradientBrush >
    
</ Border.Background >
    
< TextBlock  FontSize ="15"  HorizontalAlignment ="Center"  TextAlignment ="Center"  Foreground ="#FFC" >
                                    当前最新版本
< LineBreak  /> v0.9.4.13
                                
</ TextBlock >
</ Border >
< Border  Margin ="28,20,4,0"  BorderBrush ="#AC690C"  BorderThickness ="1"  CornerRadius ="3"  Padding ="12" >
    
< Border.Background >
        
< LinearGradientBrush  StartPoint ="0,0"  EndPoint ="0,1" >
            
< GradientStop  Color ="#FFFFD66B"  Offset ="0"   />
            
< GradientStop  Color ="#FFF79E17"  Offset ="1"   />
        
</ LinearGradientBrush >
    
</ Border.Background >
    
< TextBlock  FontSize ="15"  HorizontalAlignment ="Center"  TextAlignment ="Center"  Foreground ="#FFC" >
                                    新手入门教程
                                
</ TextBlock >
</ Border >
< Border  Margin ="28,20,4,0"  BorderBrush ="#F3CB56"  BorderThickness ="1"  CornerRadius ="3"  Padding ="12" >
    
< Border.Background >
        
< LinearGradientBrush  StartPoint ="0,0"  EndPoint ="0,1" >
            
< GradientStop  Color ="#FFFFF99C"  Offset ="0"   />
            
< GradientStop  Color ="#FFF"  Offset ="1"   />
        
</ LinearGradientBrush >
    
</ Border.Background >
    
< TextBlock  TextAlignment ="Justify"  TextTrimming ="CharacterEllipsis"  FontSize ="12"  Foreground ="#BD730D" >
        
< Run  FontSize ="15"  FontWeight ="Bold" > 最近更新: </ Run >
        
< LineBreak  />
                                    新增加可为附件分别添加注释的功能
< LineBreak  />
日志中记录的本次发送出的邮件附件将显示文件图标
< LineBreak  />
将设置界面的伸缩组收缩时的边框改为圆角矩形
< LineBreak  />
增加附言使用HTML代码的选项
< LineBreak  />
完善帮助信息
< LineBreak  />
修正附件详细信息显示的BUG
< LineBreak  />
增加默认标题、附言设置选项
< LineBreak  />
增加签名设置选项
< LineBreak  />
                                    变更系统信息的显示位置和样式
< LineBreak  />
                                    在配置管理器打开时会自动选择当前所使用的配置
< LineBreak  />
将选项设置中的组改为可伸缩型
< LineBreak  />
                                    收件人及附件列表增加了全选及取消全选的快捷菜单
< LineBreak  />
增加了一个选项用以控制文件发送失败后的重试次数
< LineBreak  />
增加了一个选项用以控制邮件内是否写入文件的原始信息
                                
</ TextBlock >
</ Border >

 

可以看到其中的TextBlock使用了 TextTrimming="CharacterEllipsis" 属性,此属性的功能就是将超出容器宽度的字符以省略号显示,如下图所示:

“最近更新”内容块

至此,在设计视图中的完整效果如下:

设计视图效果

主文档中的完整代码:

 

Code

 

源文件下载


本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/08/26/1276610.html,如需转载请自行联系原作者

相关文章
|
7月前
|
Web App开发
解决:chrome浏览器打印预览的时候出现顶部底部页眉页脚的问题
解决:chrome浏览器打印预览的时候出现顶部底部页眉页脚的问题
绚丽的网页菜单
绚丽的网页菜单
109 0
|
C#
【WPF】使用Popup控件做浮窗/提示框
原文:【WPF】使用Popup控件做浮窗/提示框 需求:当鼠标移入某个区域时,弹出一个浮窗,以便用户进行下一步操作。 效果如下图: 当鼠标移入左上角的【多选显示】框内,出现下面的浮窗(悬浮在原UI之上)。
4448 0
|
前端开发 JavaScript
界面按钮样式丑?不可能!16款css实现炫酷按钮
界面按钮样式丑?不可能!16款css实现炫酷按钮
356 0
界面按钮样式丑?不可能!16款css实现炫酷按钮
CSS3小图标菜单导航
在线演示 本地下载
723 0
|
C#
WPF中Popup等弹窗的位置不对(偏左或者偏右)
原文:WPF中Popup等弹窗的位置不对(偏左或者偏右) 1.情况如图:    正常情况:         部分特殊情况:        在一般的电脑都能正确显示,就是第一种情况,同样的代码为什么在不同的电脑就会显示不同的位置呢,原来Windows为了满足 不同需求的用户,左撇子和右撇子,就...
1870 0