上一篇中我进行了一下效果展示和概述,此篇开始将重现我此次尝试的步骤,我想大家通过阅读这些步骤,可以了解到XAML网页排版的方法。
下面就开始编写XAML,首先来定义一下页面的属性:
......
WindowTitle就是页面标题。
SnapsToDevicePixels属性很重要,它会使我们的图像自动进行像素对齐,从而去除模糊的边缘,这可以使我们的网页看起来更像传统网页。
接下来这一点很有趣,我们要在页面中放置ScrollViewer,否则我们的网页超出屏幕的时候不会显示滚动条,连这个都要我们自助使用了:
.....
上一篇中我进行了一下效果展示和概述,此篇开始将重现我此次尝试的步骤,我想大家通过阅读这些步骤,可以了解到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
<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的层,随便画几条平行的线条,线条颜色设为黑色,然后为它们指定不同的宽度,以及非常低的不透明度,低到你几乎看不出它们来。
然后选中它们,点击右键 > 从选定内容创建切片,然后这样设置切片属性:
之后执行:文件 > 导出..
在“要导出的项”一栏选中“切片”
选则我们的切片,点击“全部导出”按钮右侧的箭头,选择“导出选定切片”菜单项
这系列操作可以让我们把每个切片都保存到独立的文件中,并且可以控制我们需要导出哪些切片,在以后的导出中都应采用这种方法。
导出的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>
下面两图分别是设计效果和实际效果:
至此我们完成了基本的框架设计,现在设计视图中的效果如下:
到目前为止的全部代码:
Code
<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.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="back.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinHeight="900" MinWidth="1000" Background="{StaticResource back}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="84*"/>
<ColumnDefinition Width="8*"/>
</Grid.ColumnDefinitions>
<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>
<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" Background="#1E874900" DockPanel.Dock="Right" Width="245"></DockPanel>
<StackPanel x:Name="Content"></StackPanel>
</DockPanel>
</DockPanel>
</Grid>
</ScrollViewer>
</Page>
本篇至此结束,在后续的篇章中将继续讲解页面主体中各个区块的制作。
文中如有不妥的地方,欢迎随时指正,我不介意听到异议,分歧是交流和进步的开始,我也有太多东西需要向各位学习:)