用Xaml做網(wǎng)頁(yè)框架_.Net教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

推薦：校內(nèi)網(wǎng)API的.net版本XiaoNei.Net 1.0(非官方)
校內(nèi)API開(kāi)放也有一段時(shí)間了，也沒(méi)有太關(guān)注，正好新版本的SNS開(kāi)發(fā)到了API這一塊，正好借鑒一下XiaoNei，F(xiàn)B，MySpace的API。且聞校內(nèi)API比較有前途，最近的API編程大賽也比較火，而且人氣也較

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

以下為引用的內(nèi)容：

<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è)都要我們自助使用了：

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

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

以下為引用的內(nèi)容：

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

其中定義了三個(gè)列，兩邊8%留作空白，中間84%是頁(yè)面主體。

在Grid里放置DockPanel用于細(xì)化布局：<DockPanel Background="#FFF" Grid.Column="1"></DockPanel>

DockPanel中裝載的就是頁(yè)面的各個(gè)區(qū)塊了：

以下為引用的內(nèi)容：
<DockPanel x:Name="Head" DockPanel.Dock="Top" Background="#FF4A4A4A" Height="115"></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)容：

以下為引用的內(nèi)容：
<DockPanel x:Name="Side" Background="#1E874900" DockPanel.Dock="Right" Width="245"></DockPanel>

其實(shí)不用Body，直接把這兩個(gè)元素放在上層使用也沒(méi)有問(wèn)題，我在這里是希望它們有一個(gè)共同的背景才這樣設(shè)計(jì)的。

分享：Asp.net Mvc Framework可以在Controller中使用的Url.Action方法
原本的Url.Action方法是利用RouteCollection來(lái)實(shí)現(xiàn)Url的Routing的。所以這里用一個(gè)擴(kuò)展方法重現(xiàn)一下以下為引用的內(nèi)容：