用Xaml做网页框架

superadmin · 发表于 2008-8-21 17:11:17

下面就开始编写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，直接把这两个元素放在上层使用也没有问题，我在这里是希望它们有一个共同的背景才这样设计的。

superadmin · 发表于 2008-8-21 17:27:38

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

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

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

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

         <Grid.ColumnDefinitions>

            <ColumnDefinition Width="8*"/>

            <ColumnDefinition Width="84*"/>

            <ColumnDefinition Width="8*"/>

         </Grid.ColumnDefinitions>

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

            <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 x:Name="Side" DockPanel.Dock="Right" Width="245"></DockPanel>

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

            </DockPanel>

         </DockPanel>

      </Grid>

</ScrollViewer>

</Page>

它现在只包含了页面的框架结构和一点简单的样式。接下来要进行一些美化。

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

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

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

之后执行：文件 > 导出

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

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

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

superadmin · 发表于 2008-8-21 17:32:10

导出的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="back" Stretch="Uniform">

<DrawingBrush.Drawing>

<DrawingGroup ClipGeometry="F1 M 0,0L 395.017,0L 395.017,466L 0,466L 0,0">

<DrawingGroup.Children>

<GeometryDrawing Geometry="F1 M 64,5.5L 331.017,5.5">

<GeometryDrawing.Pen>

<Pen Thickness="11" LineJoin="Round" Brush="#08000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Geometry="F1 M 64,122.5L 331.017,122.5">

<GeometryDrawing.Pen>

<Pen Thickness="128" LineJoin="Round" Brush="#06000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Geometry="F1 M 64,428.501L 331.017,428.501">

<GeometryDrawing.Pen>

<Pen Thickness="75" LineJoin="Round" Brush="#06000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Geometry="F1 M 64,275.5L 331.017,275.5">

<GeometryDrawing.Pen>

<Pen Thickness="35" LineJoin="Round" Brush="#0B000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</ResourceDictionary>

我们需要给“<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>

superadmin · 发表于 2008-8-21 17:33:02

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

至此我们完成了基本的框架设计，现在设计视图中的效果如下：

到目前为止的全部代码：

本篇至此结束，在后续的篇章中将继续讲解页面主体中各个区块的制作。
文中如有不妥的地方，欢迎随时指正，我不介意听到异议，分歧是交流和进步的开始，我也有太多东西需要向各位学习：）

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询