天天看點

WPF界面設計技巧(1)—不規則窗體圖文指南

初到園子,奉上第一篇入門級教程,請勿見笑。

以往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"”對應的是我們之前設計時的圖層名稱,我們在程式中引用此資源時要使用這個名稱。

WPF界面設計技巧(1)—不規則窗體圖文指南

Code

現在我們要把這個資源字典引入程式集,打開“App.xaml”檔案,添加下圖中紅色框内的代碼。

WPF界面設計技巧(1)—不規則窗體圖文指南

<Application x:Class="不規則窗體.App"

WPF界面設計技巧(1)—不規則窗體圖文指南

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

WPF界面設計技巧(1)—不規則窗體圖文指南

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

WPF界面設計技巧(1)—不規則窗體圖文指南

    StartupUri="Window1.xaml">

WPF界面設計技巧(1)—不規則窗體圖文指南

    <Application.Resources>

WPF界面設計技巧(1)—不規則窗體圖文指南

        <ResourceDictionary>

WPF界面設計技巧(1)—不規則窗體圖文指南

            <ResourceDictionary.MergedDictionaries>

WPF界面設計技巧(1)—不規則窗體圖文指南

                <ResourceDictionary Source="cnblogs-SkyD.xaml"/>

WPF界面設計技巧(1)—不規則窗體圖文指南

            </ResourceDictionary.MergedDictionaries>

WPF界面設計技巧(1)—不規則窗體圖文指南

        </ResourceDictionary>

WPF界面設計技巧(1)—不規則窗體圖文指南

    </Application.Resources>

WPF界面設計技巧(1)—不規則窗體圖文指南

</Application>

WPF界面設計技巧(1)—不規則窗體圖文指南

然後打開“Window1.xaml”檔案的設計視圖,點選窗體邊緣以選中窗體,依照下圖所示,在屬性面闆中更改AllowsTransparency及WindowStyle屬性。

AllowsTransparency 訓示窗體是否支援透明。

WindowStyle訓示窗體邊框樣式,設為 None 為無邊框。

切換到XAML代碼視圖,依照下圖所示,為 Window 元素添加Background和 MouseDown屬性定義。

Background 屬性訓示窗體的背景,這裡引用資源中的“back”,就是我們之前畫好的圖形啦。

MouseDown 是滑鼠按下時産生的事件,我們要為之定義一個事件處理函數以實作窗體拖動功能。

WPF界面設計技巧(1)—不規則窗體圖文指南

<Window x:Class="不規則窗體.Window1"

WPF界面設計技巧(1)—不規則窗體圖文指南
WPF界面設計技巧(1)—不規則窗體圖文指南
WPF界面設計技巧(1)—不規則窗體圖文指南

    Title="Window1" 

WPF界面設計技巧(1)—不規則窗體圖文指南

    Height="450" 

WPF界面設計技巧(1)—不規則窗體圖文指南

    Width="450" 

WPF界面設計技巧(1)—不規則窗體圖文指南

    AllowsTransparency="True" 

WPF界面設計技巧(1)—不規則窗體圖文指南

    WindowStyle="None" 

WPF界面設計技巧(1)—不規則窗體圖文指南

    Background="{StaticResource back}"

WPF界面設計技巧(1)—不規則窗體圖文指南

    MouseDown="Window_MouseDown">

WPF界面設計技巧(1)—不規則窗體圖文指南

    <Grid>

WPF界面設計技巧(1)—不規則窗體圖文指南
WPF界面設計技巧(1)—不規則窗體圖文指南

    </Grid>

WPF界面設計技巧(1)—不規則窗體圖文指南

</Window>

WPF界面設計技巧(1)—不規則窗體圖文指南

在上圖的“Window_MouseDown”字元上單擊右鍵,在彈出菜單中選擇“定位到事件處理程式”,即會轉到“Window1.xaml.cs”代碼視圖,依照下圖輸入代碼。

WPF界面設計技巧(1)—不規則窗體圖文指南

        private void Window_MouseDown(object sender, MouseButtonEventArgs e)

WPF界面設計技巧(1)—不規則窗體圖文指南

        {

WPF界面設計技巧(1)—不規則窗體圖文指南

            if(e.ChangedButton==MouseButton.Left)this.DragMove();

WPF界面設計技巧(1)—不規則窗體圖文指南

        }

至此就完成了不規則窗體的創制了。

編譯運作看看:

嗯嗯,效果很酷的說,你說什麼?沒有關閉按鈕?這麼好看的界面你舍得關嗎?

好吧,要實作關閉按鈕也很簡單啦,自己搞個按鈕在上面,在 Click 事件中執行 this.Close(); 就OK啦,我是懶得搞了哈。

此效果在任何裝有.Net架構3.0的機器上都可以運作,不用再羨慕Adobe AIR的外觀了,WPF可以做得更好!

再來張Vista切換視窗時的圖:

本文轉自斯克迪亞部落格園部落格,原文連結:http://www.cnblogs.com/SkyD/archive/2008/07/13/1242044.html,如需轉載請自行聯系原作者