用XAML做网页！！—框架-白红宇

用XAML做网页！！—框架

阅读量：6609 次

发布时间：2019-06-24

本文共 8525 字，大约阅读时间需要 28 分钟。

原文:

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

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

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</DockPanel>

</Grid>

</ScrollViewer>

</Page>

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

接下来要进行一些美化。

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

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

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

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

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

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

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

导出的XAML内容如下：

Code

<?xml version="1.0" encoding="utf-8"?>

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Pen>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing.Pen>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing.Pen>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing.Pen>

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

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

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Page.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</DockPanel>

</Grid>

</ScrollViewer>

</Page>

本篇至此结束，在后续的篇章中将继续讲解页面主体中各个区块的制作。

文中如有不妥的地方，欢迎随时指正，我不介意听到异议，分歧是交流和进步的开始，我也有太多东西需要向各位学习：）

你可能感兴趣的文章

冰球游戏大概的模块

查看>>

ClassPathXMLApplicationContext上下文加载过程

查看>>

JS模拟select下拉菜单

查看>>

线性方程组迭代求解——Jacobi迭代算法（Python实现）

查看>>

vmware workstation14永久激活密钥分享

查看>>

iOS 多线程之 GCD（大中枢派发）(一)

查看>>

mysql用户与权限管理笔记

查看>>

Myeclipse中打开接口实现类的快捷键

查看>>

<20190516> 一次比较糟糕的售后维修体验(某硕主板)

查看>>

iOS网络篇2-http协议通信规则

查看>>

删除sql dump中的AUTO_INCREMENT

查看>>

使用JdbcTemplate和JdbcDaoSupport

查看>>

C博客作业--指针

查看>>

版本12.2.0.1.0数据库，复制种子数据库快速创建租户数据库PDB

查看>>

吴忠军中华演出网

查看>>

编程之美第1章游戏之乐——游戏中碰到的题目（十一）

查看>>

mysql for Mac 下创建数据表中文显示为？的解决方法

VMware 虚拟机的虚拟磁盘编程知识点扫盲之二

查看>>