• 用Xaml做网页框架
• 发布时间：2008-08-21 17:11:17    浏览数：6763    发布者：superadmin    设置字体【大 中 小】   

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

#2楼发布者：superadmin时间：2008-08-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的层，随便画几条平行的线条，线条颜色设为黑色，然后为它们指定不同的宽度，以及非常低的不透明度，低到你几乎看不出它们来。

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



之后执行：文件 > 导出



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



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



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

#3楼发布者：superadmin时间：2008-08-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>

#4楼发布者：superadmin时间：2008-08-21 17:33:02