用Xaml做网页框架

2008-08-20 17:06 [小大] 来源: cnblogs 评论: 0 分享至:

下面就开始编写XAML，首先来定义一下页面的属性：

以下为引用的内容：

<Page

WindowTitle="MailMail"

FontFamily="微软雅黑"

Background="#FF424242"

SnapsToDevicePixels="True"></Page>

WindowTitle就是页面标题。

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

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

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

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

以下为引用的内容：

<Grid.ColumnDefinitions>

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

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

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

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

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

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

以下为引用的内容：
<DockPanel x:Name="Side" Background="#1E874900" DockPanel.Dock="Right" Width="245"></DockPanel>

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

网友评论