初到園子,奉上第一篇入門級教程,請勿見笑。
以往WinForm程式設計中,實作不規則窗體是有一定難度的,更難的是不規則窗體的邊緣抗鋸齒及局部透明處理。而現在,WPF的出現使這個問題迎刃而解,使得我們可以輕松、靈活地美化使用者界面。
下面就讓我們來看看如何實作一個不規則窗體:
首先我們需要借助Microsoft Expression Design 2來進行圖形設計。(這裡使用Photoshop等傳統軟體也可以,但是隻能利用PNG格式來實作透明,其缺點就是不支援無損縮放,且不支援動态修改。)
打開Microsoft Expression Design 2中文版,點選菜單“檔案 > 建立”,依照下圖進行設定,這裡将文檔尺寸機關設為“像素”,便于與應用程式的布局機關相對應。
然後随心所欲的畫吧,想畫成什麼樣都行,但注意Microsoft Expression Design 2中繪制的圖形并非全部都是矢量的,比如紋理填充、一些特殊筆刷以及濾鏡效果(輸出時有“将實時效果轉換為XAML效果”的選項,但是點了無用,不知道是不是BUG)都會以位圖形式輸出。
這是我畫出來的圖形:
這裡要注意的是:最好将所有元素都放在一個圖層裡,因為我們後面導出資源字典的時候需要依據圖層來分組,我們畫好之後要給圖層重命名,在這裡我給它命名為“back”,這個名稱将在後面代碼中引用資源時使用。
接下來點選菜單“檔案 > 導出...”,将格式設為“XAML WPF 資源字典”,分組依據設為“層”,實時效果設為“轉換為XAML效果”(貌似無用的設定)。然後按“浏覽...”按鈕選擇輸出路徑,然後按“全部導出”按鈕完成導出。
然後就可以儲存檔案,關閉Microsoft Expression Design 2了。
打開Microsoft Visual Studio 2008,點選菜單“檔案 > 建立 > 項目...”,選擇“WPF 應用程式”,名稱設為“不規則窗體”。
點選菜單“項目 > 添加現有項...”,浏覽并選擇此前導出的資源字典檔案(選的時候注意把右邊的檔案類型過濾改一下,預設是C#檔案類型)。如下圖所示,這就是導入的資源字典檔案。
引入的資源字典内容如下,我們不需要搞明白這些對圖形的描述文法,隻要了解其中的“x:Key="back"”對應的是我們之前設計時的圖層名稱,我們在程式中引用此資源時要使用這個名稱。
Code
現在我們要把這個資源字典引入程式集,打開“App.xaml”檔案,添加下圖中紅色框内的代碼。
<Application x:Class="不規則窗體.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Window1.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="cnblogs-SkyD.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
然後打開“Window1.xaml”檔案的設計視圖,點選窗體邊緣以選中窗體,依照下圖所示,在屬性面闆中更改AllowsTransparency及WindowStyle屬性。
AllowsTransparency 訓示窗體是否支援透明。
WindowStyle訓示窗體邊框樣式,設為 None 為無邊框。
切換到XAML代碼視圖,依照下圖所示,為 Window 元素添加Background和 MouseDown屬性定義。
Background 屬性訓示窗體的背景,這裡引用資源中的“back”,就是我們之前畫好的圖形啦。
MouseDown 是滑鼠按下時産生的事件,我們要為之定義一個事件處理函數以實作窗體拖動功能。
<Window x:Class="不規則窗體.Window1"
Title="Window1"
Height="450"
Width="450"
AllowsTransparency="True"
WindowStyle="None"
Background="{StaticResource back}"
MouseDown="Window_MouseDown">
<Grid>
</Grid>
</Window>
在上圖的“Window_MouseDown”字元上單擊右鍵,在彈出菜單中選擇“定位到事件處理程式”,即會轉到“Window1.xaml.cs”代碼視圖,依照下圖輸入代碼。
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
if(e.ChangedButton==MouseButton.Left)this.DragMove();
}
至此就完成了不規則窗體的創制了。
編譯運作看看:
嗯嗯,效果很酷的說,你說什麼?沒有關閉按鈕?這麼好看的界面你舍得關嗎?
好吧,要實作關閉按鈕也很簡單啦,自己搞個按鈕在上面,在 Click 事件中執行 this.Close(); 就OK啦,我是懶得搞了哈。
此效果在任何裝有.Net架構3.0的機器上都可以運作,不用再羨慕Adobe AIR的外觀了,WPF可以做得更好!
再來張Vista切換視窗時的圖:
本文轉自斯克迪亞部落格園部落格,原文連結:http://www.cnblogs.com/SkyD/archive/2008/07/13/1242044.html,如需轉載請自行聯系原作者