用XAML做网页！！—框架-阿里云开发者社区

用XAML做网页！！—框架

2014-03-04 889

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 原文:用XAML做网页！！—框架上一篇中我进行了一下效果展示和概述，此篇开始将重现我此次尝试的步骤，我想大家通过阅读这些步骤，可以了解到XAML网页排版的方法。下面就开始编写XAML，首先来定义一下页面的属性： WindowTitle就是页面标题。

原文: 用XAML做网页！！—框架

上一篇中我进行了一下效果展示和概述，此篇开始将重现我此次尝试的步骤，我想大家通过阅读这些步骤，可以了解到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 >

WindowTitle就是页面标题。

SnapsToDevicePixels属性很重要，它会使我们的图像自动进行像素对齐，从而去除模糊的边缘，这可以使我们的网页看起来更像传统网页。

接下来这一点很有趣，我们要在页面中放置ScrollViewer，否则我们的网页超出屏幕的时候不会显示滚动条，连这个都要我们自助使用了：

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

把横向和纵向滚动条的显示属性都设为Auto是个比较好的方案，这样在不需要的时候就会自动隐藏了。

ScrollViewer中要放置一个Grid用于总体布局：

        < Grid MinHeight ="900" MinWidth ="1000" >

             < Grid.ColumnDefinitions >

                 < ColumnDefinition Width ="8*" />

                 < ColumnDefinition Width ="84*" />

                 < ColumnDefinition Width ="8*" />

             </ Grid.ColumnDefinitions >

         </ Grid >

其中定义了三个列，两边8%留作空白，中间84%是页面主体。

在Grid里放置DockPanel用于细化布局：

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

DockPanel中装载的就是页面的各个区块了：

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

                 < Border x:Name ="HeadLine" Background ="#888" BorderThickness ="0,1" DockPanel.Dock ="Top" Height ="15" ></ 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 >

仅仅通过DockPanel.Dock属性就可以将各个区块完美的放置到它所应处的位置，实际应用中可以比这复杂很多，但实现起来依然是非常简单。

PS：掌握了WPF布局后，再去其他环境中布局，都会有捶墙的冲动～

现在我们的界面就是下面这样了：

我把每个区块都命名并对应到此图上，这只是为了便于理解，并不是必需的。

在Body中加入两个区块，即边栏和内容：

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

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

其实不用Body，直接把这两个元素放在上层使用也没有问题，我在这里是希望它们有一个共同的背景才这样设计的。

到此为止我们的代码如下：

Code

它现在只包含了页面的框架结构和一点简单的样式。

接下来要进行一些美化。

打开 Microsoft Expression Design ，先来制作页面的背景填充图：

新建一个名为back的层，随便画几条平行的线条，线条颜色设为黑色，然后为它们指定不同的宽度，以及非常低的不透明度，低到你几乎看不出它们来。

然后选中它们，点击右键 > 从选定内容创建切片，然后这样设置切片属性：

之后执行：文件 > 导出..

在“要导出的项”一栏选中“切片”

选则我们的切片，点击“全部导出”按钮右侧的箭头，选择“导出选定切片”菜单项

这系列操作可以让我们把每个切片都保存到独立的文件中，并且可以控制我们需要导出哪些切片，在以后的导出中都应采用这种方法。

导出的XAML内容如下：

Code

我们需要给“<DrawingBrush x:Key="back" Stretch="Uniform">”中加入几个属性：

ViewportUnits="Absolute" Viewport="0,0,55,145" TileMode="FlipXY"

这些属性控制了图像的填充方式。

现在回到主文档，准备载入这个背景，先将其以资源字典的形式引用：

     < Page.Resources >

         < ResourceDictionary >

             < ResourceDictionary.MergedDictionaries >

                 < ResourceDictionary Source ="back.xaml" />

             </ ResourceDictionary.MergedDictionaries >

         </ ResourceDictionary >

     </ Page.Resources >

然后为Grid加入背景属性设置：

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

这样就完成了页面背景样式的设置。

你会发觉页面主体的部分区块与页面背景的边际不够明显：

我们可以使用伪阴影来突出主体，即通过在页面主题两侧加入两个黑色到透明的渐变，我们通过在Grid中加入两个矩形来实现：

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

下面两图分别是设计效果和实际效果：