用XAML做網(wǎng)頁(yè)??！—框架

時(shí)間：2023-07-24 06:39:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 06:39:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

用XAML做網(wǎng)頁(yè)?。　蚣埽?br>
上一篇中我進(jìn)行了一下效果展示和概述，此篇開始將重現(xiàn)我此次嘗試的步驟，我想大家通過(guò)閱讀這些步驟，可以了解到XAML網(wǎng)頁(yè)排版的方法。

文章來(lái)源博客園斯克迪亞.

下面就開始編寫XAML，首先來(lái)定義一下頁(yè)面的屬性：

<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就是頁(yè)面標(biāo)題。

SnapsToDevicePixels屬性很重要，它會(huì)使我們的圖像自動(dòng)進(jìn)行像素對(duì)齊，從而去除模糊的邊緣，這可以使我們的網(wǎng)頁(yè)看起來(lái)更像傳統(tǒng)網(wǎng)頁(yè)。

接下來(lái)這一點(diǎn)很有趣，我們要在頁(yè)面中放置ScrollViewer，否則我們的網(wǎng)頁(yè)超出屏幕的時(shí)候不會(huì)顯示滾動(dòng)條，連這個(gè)都要我們自助使用了：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"></ScrollViewer>把橫向和縱向滾動(dòng)條的顯示屬性都設(shè)為Auto是個(gè)比較好的方案，這樣在不需要的時(shí)候就會(huì)自動(dòng)隱藏了。

ScrollViewer中要放置一個(gè)Grid用于總體布局：

<Grid MinHeight="900" MinWidth="1000"> <Grid.ColumnDefinitions> <ColumnDefinition Width="8*"/> <ColumnDefinition Width="84*"/> <ColumnDefinition Width="8*"/> </Grid.ColumnDefinitions> </Grid>其中定義了三個(gè)列，兩邊8%留作空白，中間84%是頁(yè)面主體。

在Grid里放置DockPanel用于細(xì)化布局：

<DockPanel Background="#FFF" Grid.Column="1"></DockPanel>DockPanel中裝載的就是頁(yè)面的各個(gè)區(qū)塊了：

<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>僅僅通過(guò)DockPanel.Dock屬性就可以將各個(gè)區(qū)塊完美的放置到它所應(yīng)處的位置，實(shí)際應(yīng)用中可以比這復(fù)雜很多，但實(shí)現(xiàn)起來(lái)依然是非常簡(jiǎn)單。

PS：掌握了WPF布局后，再去其他環(huán)境中布局，都會(huì)有捶墻的沖動(dòng)～

現(xiàn)在我們的界面就是下面這樣了：

我把每個(gè)區(qū)塊都命名并對(duì)應(yīng)到此圖上，這只是為了便于理解，并不是必需的。

在Body中加入兩個(gè)區(qū)塊，即邊欄和內(nèi)容：

<DockPanel x:Name="Side" Background="#1E874900" DockPanel.Dock="Right" Width="245"></DockPanel> <StackPanel x:Name="Content"></StackPanel>其實(shí)不用Body，直接把這兩個(gè)元素放在上層使用也沒(méi)有問(wèn)題，我在這里是希望它們有一個(gè)共同的背景才這樣設(shè)計(jì)的。

到此為止我們的代碼如下：

<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> 它現(xiàn)在只包含了頁(yè)面的框架結(jié)構(gòu)和一點(diǎn)簡(jiǎn)單的樣式。

接下來(lái)要進(jìn)行一些美化。

打開 Microsoft Expression Design ，先來(lái)制作頁(yè)面的背景填充圖：

新建一個(gè)名為back的層，隨便畫幾條平行的線條，線條顏色設(shè)為黑色，然后為它們指定不同的寬度，以及非常低的不透明度，低到你幾乎看不出它們來(lái)。

然后選中它們，點(diǎn)擊右鍵 > 從選定內(nèi)容創(chuàng)建切片，然后這樣設(shè)置切片屬性：

之后執(zhí)行：文件 > 導(dǎo)出..

在“要導(dǎo)出的項(xiàng)”一欄選中“切片”

選則我們的切片，點(diǎn)擊“全部導(dǎo)出”按鈕右側(cè)的箭頭，選擇“導(dǎo)出選定切片”菜單項(xiàng)

這系列操作可以讓我們把每個(gè)切片都保存到獨(dú)立的文件中，并且可以控制我們需要導(dǎo)出哪些切片，在以后的導(dǎo)出中都應(yīng)采用這種方法。

導(dǎo)出的XAML內(nèi)容如下：

<?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">”中加入幾個(gè)屬性：

ViewportUnits="Absolute" Viewport="0,0,55,145" TileMode="FlipXY"這些屬性控制了圖像的填充方式。

現(xiàn)在回到主文檔，準(zhǔn)備載入這個(gè)背景，先將其以資源字典的形式引用：

<Page.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="back.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Page.Resources> 然后為Grid加入背景屬性設(shè)置：

<Grid MinHeight="900" MinWidth="1000" Background="{StaticResource back}"> 這樣就完成了頁(yè)面背景樣式的設(shè)置。

你會(huì)發(fā)覺(jué)頁(yè)面主體的部分區(qū)塊與頁(yè)面背景的邊際不夠明顯：

我們可以使用偽陰影來(lái)突出主體，即通過(guò)在頁(yè)面主題兩側(cè)加入兩個(gè)黑色到透明的漸變，我們通過(guò)在Grid中加入兩個(gè)矩形來(lái)實(shí)現(xiàn)：

<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> 下面兩圖分別是設(shè)計(jì)效果和實(shí)際效果：

至此我們完成了基本的框架設(shè)計(jì)，現(xiàn)在設(shè)計(jì)視圖中的效果如下：

到目前為止的全部代碼：

<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>本篇至此結(jié)束，在后續(xù)的篇章中將繼續(xù)講解頁(yè)面主體中各個(gè)區(qū)塊的制作。

文中如有不妥的地方，歡迎隨時(shí)指正，我不介意聽到異議，分歧是交流和進(jìn)步的開始，我也有太多東西需要向各位學(xué)習(xí)：）