当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 用Xaml做网页框架

ASP.NET
Asp.net 时间操作基类(支持短日期,长日期,时间差)
asp.net 获取机器硬件信息(cpu频率、磁盘可用空间、内存容量等)
asp.net 数据库备份还原(sqlserver+access)
Asp.Net 数据操作类(附通用数据基类)
Asp.net 弹出对话框基类(输出alet警告框)
Asp.net 文件上传类(取得文件后缀名,保存文件,加入文字水印)
Asp.net Socket客户端(远程发送和接收数据)
Asp.net 字符串操作基类(安全,替换,分解等)
Asp.Net数据输出到EXCEL表格中
asp.net Gridview里添加汇总行
asp.net UpdatePanel的简单用法
asp.net ajaxControlToolkit FilteredTextBoxExtender的简单用法
this connector is disabled错误的解决方法
sql事务应用积累
asp.net Page.Controls对象(找到所有服务器控件)
在asp.NET中字符串替换的五种方法
ASP.NET缓存方法分析和实践示例代码
asp.net 在DNN模块开发中遇到的resx怪问题
ASP.NET State service状态服务的问题解决方法
asp.net 结合mysql存储过程进行分页代码

No. « 50 51 52 53 »

技术文章搜索

关键字

ASP.NET 中的 用Xaml做网页框架

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-23   浏览: 175 ::
收藏到网摘: n/a

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

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

以下为引用的内容：
<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>

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

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

到目前为止的全部代码：

以下为引用的内容：
<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>

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

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