用XAML做網頁！！—頁頭

接續上次進度，我們此次來制作頁頭。

首先要實作兩側邊緣的美化，如下圖所示：

在邊緣處有一層朦胧的亮度反光效果，這也是通過簡單的漸變實作的，而且我們在後面的每個區塊中都要實作類似的效果，是以現在就将所需的資源一起建立了。

在Grid中建立一個資源标記，并設定4個筆刷資源：

Code

LightLeft和LightRight是我們一會用到的，剩下兩個會在其它區塊中使用。

在Head區塊中插入兩個矩形，并引用上述兩個資源做填充：

<Rectangle DockPanel.Dock="Left" Width="16" Fill="{StaticResource LightLeft}"/>

<Rectangle DockPanel.Dock="Right" Width="16" Fill="{StaticResource LightRight}"/>

兩個矩形一左一右貼靠，邊緣美化工作就完成了。

然後請你把以下代碼儲存為logo.xaml，這也是由 Microsoft Expression Design 設計并導出的資源，是我們的頁面Logo圖形：

接着在Page的資源中引入這個資源：

<ResourceDictionary Source="logo.xaml"/>

在Head中加入矩形填充該資源：

<Rectangle Fill="{StaticResource logo}" Margin="0" Width="300" Height="125" DockPanel.Dock="Left" />

然後再來加一條縱向分隔線：

<Rectangle Height="75" Width="1" DockPanel.Dock="Left">

<Rectangle.Fill>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Color="#03FFFFFF" Offset="0" />

<GradientStop Color="#5DFFFFFF" Offset="0.5" />

<GradientStop Color="#00FFFFFF" Offset="1" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

這是使用了一個1像素寬的矩形來實作的，其效果如下：

後面要實作的内容是這些：

這實際上就是在一個Canvas容器中放置了幾個文本标簽來實作的：

Canvas的ClipToBounds屬性設為True可以使超出容器範圍的内容被剪裁，比如我們這裡的那個巨大的@符号。

這個@符号被我設定了動畫，它會在那裡不停的旋轉。

現在，把上面那段代碼也插入Head區塊，就完成了頁面頭部的制作：

嗯，對，還有下面這條水準線也要給一塊弄出來：

這很簡單，我們隻使用一個漸變邊框和一個漸變背景就可以實作了：

邊框為什麼也要漸變呢？因為我們這個隻有上下有邊框線，而且它們是不同顔色的，是以一個漸變就搞定了。

至此全部代碼如下：

<a href="http://files.cnblogs.com/SkyD/XAML_WEB320080821182329.rar">源代碼下載下傳</a>

本文轉自斯克迪亞部落格園部落格，原文連結：http://www.cnblogs.com/SkyD/archive/2008/08/21/1273479.html，如需轉載請自行聯系原作者