原文: 自定義WPF 視窗樣式

自定義 Window

在客戶端程式中，經常需要用到自定義一個

Window ，大部分是為了好看吧。做了很多研究和實踐之後，覺得需要把這個過程寫下來，以供查閱。

WPF 提供的豐富的功能使得自定義 Window 變得簡單，但是也不是一個簡單的 Style 就能做到的事情。雖然 WPF 中的控制元件是 Lookless 的，但是 Window 類有他自己的特殊之處，做個簡單的實驗就能看出，對於普通的 WPF 控制元件，用 XamlWriter.Write 方法就能將某個型別物件的模板輸出出來，這樣就可以看到該控制元件的內部構造。但是如果輸出 Window 物件的預設模板，就會發現模板非常簡單，其中並沒有包含標題欄以及最大化最小化按鈕的定義，具體的實現不得而知，但是至少說明 Window 的預設 Style 不是按照 WPF 的規範來實現的。

 

為了實現任意風格的 Window 就需要重寫 Window 的預設模板，第一步要做的就是建立 Window 的一個派生類，並建立自定義 Style ，然後重寫 DefaultStyleKey 屬性讓 WPF 引擎來將樣式和 Window 的派生類裝載到一起。具體做法如下：

1.         建立一個 WPF Application 專案

2.         在專案中新增 Themes 資料夾，並在該資料夾下新增名稱為 Generic.xaml 的 ResourceDictionary 。該資料夾和檔案的名稱和位置都是固定的，也就是說必須這麼做才能讓 WPF 引擎讓自定義控制元件和預設 Style 協同工作，因為微軟對此進行了硬編碼。

3.         建立自定義視窗類為 HeaderedWindow ，為什麼定義為 HeaderedWindow 呢？因為我覺得 Window 物件更像是一個 HeaderedContentControl 而不是一個 ContentControl ，因為它的標題欄更像是一個 Header ，而不僅僅是為了顯示圖示和標題！ HeaderedWindow 類的定義如下：

 

public class HeaderedWindow : Window

{

static HeaderedWindow()

    {

      DefaultStyleKeyProperty.OverrideMetadata(typeof (HeaderedWindow ), new FrameworkPropertyMetadata (typeof (HeaderedWindow )));     

    }

}

 

4.         在 Generic.xaml 檔案中新增 HeaderedWindow 的預設樣式，如下：

< Style TargetType ="{ x : Type l : HeaderedWindow }">

    < Setter Property ="WindowStyle" Value ="None"/>

    < Setter Property ="ResizeMode" Value ="NoResize"/>

    < Setter Property ="Background" Value ="Gray"/>

    < Setter Property ="BorderBrush" Value ="#FF5A3D1C"/>

    < Setter Property ="BorderThickness" Value ="1"/>

    < Setter Property ="MinWidth" Value ="90"/>

    < Setter Property ="MinHeight" Value ="33"/>

    < Setter Property ="VerticalContentAlignment" Value ="Stretch"/>

    < Setter Property ="HorizontalContentAlignment" Value ="Stretch"/>

  </ Style >

最重要的兩個屬性是 WindowStyle 和 ResizeMode ，將 WindowStyle 屬性設定為 None 將會去除預設的標題欄，將 ResizeMode 設定為 NoResize 將會去除 Window 邊框，該邊框在 Window 7 比較難看，不過卻有他的作用， 就是用來調整視窗大小，我們把它去掉了，就意味著我們需要自己來編寫調整視窗大小的程式碼了。

5.         測試一下這個 HeaderedWindow 吧，編寫如下測試程式碼：

 

< local : HeaderedWindow x : Class ="CustomWindowDemo.MainWindow"

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

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

         xmlns : local ="clr-namespace:CustomWindowDemo"

         Title ="MainWindow" Height ="350" Width ="525">

    < Grid >

       

    </ Grid >

</ local : HeaderedWindow >

後置程式碼類必須要從 HeaderedWindow 繼承才行。執行程式發現視窗黑乎乎一片。這是因為我們還沒有重寫 Window 的 ControlTemplate 的緣故。

6.         一個視窗應該有如下基本要素

a)         圖示，就是 Icon 屬性，自定義視窗應該有將其顯示出來的能力

b)         標題，就是 Title 屬性，自定視窗應該將其顯示在標題欄中

c)         最大化，最小化，關閉按鈕

d)         為了美觀， Window 的邊框應該定義出來。但是當視窗最大化的時候應該隱藏邊框，擴大視窗的使用面積，這也是 Windows 下視窗的標準行為。

e)         八個方向的 Resizer 應該定義出來，這些 Resize 其實就是一些透明的 Thumb 控制元件，用來支援拖動事件，並改變視窗的定位和高寬。

對於 HeaderedWindow 還有幾個擴充套件要素需要提供：

a)         自定義 Header 屬性，使用者可以重新定義 Window 的 Header ，在這裡我們將 Window 的 Icon 和 Title 定義為他的預設 Header ，所以有一個 ShowDefaultHeader 屬性用來控制預設 Header 的可見性。 Header 屬性是一個 Object 物件，其用法和 HeaderedContentControl 控制元件的 Header 幾乎一模一樣。

b)         ShowResizeGrip 屬性，用來控制是否在右下角顯示一個抓手模樣的圖形，用來指示用此處可以拖動，當然不顯示也可以調整視窗大小，不過顯示這個抓手增加了易用性。

c)         CanResize 屬性，由於我們在樣式中將視窗設定 ResizeMode 為 NoResize ，所以需要提供一個額外的屬性用來設定當前視窗是否可以調整大小。當 CanResize 為 False 的時候，所有可以調整視窗大小的控制元件將被隱藏。

d)         最後一個比較有意思的屬性就是 IsFullScreenMaximize ，當該屬性設定為 True 的時候，那麼當最大化的時候，視窗將把工作列覆蓋住。是真正意義上的“最大化”了。

7.           如果想製作不規則形狀的視窗，需要將 AllowTransparency 屬性設定為 true ，不過當此屬性為 true 的時候，該 WPF 視窗將不能作為 WinForm 控制元件或者 ActiveX 控制元件的宿主了。所以需要慎重考慮。

最後附上全部程式碼以及使用方式，以供查閱！

Generic.xaml 的內容：

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

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

     xmlns : sys ="clr-namespace:System;assembly=mscorlib"

     xmlns : l ="clr-namespace:CustomWindowDemo">

 

    < l : BoolToVisibilityConverter x : Key ="BoolToVisibilityConverter"></ l : BoolToVisibilityConverter >

 

    < Style x : Key ="styleWindowButtonMinimize" BasedOn ="{ x : Null }" TargetType ="{ x : Type Button }">

        < Setter Property ="Template">

            < Setter.Value >

                < ControlTemplate TargetType ="{ x : Type Button }">

                    < Grid x : Name ="buttonClose">

                        < Ellipse Stroke ="{ x : Null }" StrokeThickness ="1" x : Name ="btnEllipse" >

                            < Ellipse.Fill >

                                < RadialGradientBrush >

                                    < GradientStop Color ="#BFABA7A4" Offset ="0.777"/>

                                     < GradientStop Color ="#FF897F77" Offset ="1"/>

                                </ RadialGradientBrush >

                            </ Ellipse.Fill >

                        </ Ellipse >

 

                        < Path x : Name ="iconMin" Width ="11.1641" Height ="2.06641" Canvas.Left ="3.97266" Canvas.Top ="8.51962" Stretch ="Fill" Fill ="#FFFFFFFF" Data ="F1 M 5.00659,8.51962C 4.43613,8.51831 3.97266,8.98184 3.97266,9.55347C 3.97266,10.1238 4.435,10.586 5.00659,10.586L 14.1028,10.586C 14.6733,10.586 15.1353,10.1238 15.1367,9.55215C 15.1367,8.98056 14.6733,8.51962 14.1028,8.51962L 5.00659,8.51962 Z "/>

                         < ContentPresenter SnapsToDevicePixels ="{ TemplateBinding SnapsToDevicePixels }" HorizontalAlignment ="{ TemplateBinding HorizontalContentAlignment }" VerticalAlignment ="{ TemplateBinding VerticalContentAlignment }" RecognizesAccessKey ="True"/>

                    </ Grid >

                    < ControlTemplate.Triggers >

                        < Trigger Property ="IsFocused" Value ="True"/>

                        < Trigger Property ="IsDefaulted" Value ="True"/>

                        < Trigger Property ="IsMouseOver" Value ="True">

                            < Setter Property ="Fill" Value ="#FF5D4E3E" TargetName ="btnEllipse"/>

                        </ Trigger >

                        < Trigger Property ="IsPressed" Value ="True"/>

                        < Trigger Property ="IsEnabled" Value ="False"/>

                    </ ControlTemplate.Triggers >

                </ ControlTemplate >

            </ Setter.Value >

        </ Setter >

    </ Style >

 

    < Style x : Key ="styleWindowButtonMaximize" BasedOn ="{ x : Null }" TargetType ="{ x : Type ToggleButton }">

        < Setter Property ="Template">

            < Setter.Value >

                < ControlTemplate TargetType ="{ x : Type ToggleButton }">

                    < Grid >

                        < Ellipse x : Name ="btnEllipse" Stroke ="{ x : Null }" StrokeThickness ="1">

                            < Ellipse.Fill >

                                < RadialGradientBrush >

                                    < GradientStop Color ="#BFABA7A4" Offset ="0.777"/>

                                    < GradientStop Color ="#FF897F77" Offset ="1"/>

                                </ RadialGradientBrush >

                            </ Ellipse.Fill >

                        </ Ellipse >

 

                        < Path x : Name ="iconMax" Width ="12.4011" Height ="9.93359" Stretch ="Fill" Fill ="#FFFFFFFF" Data ="F1 M 390.641,289.034C 389.073,289.034 387.8,290.308 387.8,291.875L 387.8,296.125C 387.8,297.692 389.073,298.967 390.641,298.967L 397.362,298.967C 398.927,298.967 400.201,297.692 400.201,296.125L 400.201,291.875C 400.201,290.308 398.927,289.034 397.362,289.034L 390.641,289.034 Z M 389.399,296.125L 389.399,291.875C 389.399,291.19 389.956,290.634 390.641,290.634L 397.362,290.634C 398.045,290.634 398.602,291.19 398.602,291.875L 398.602,296.125C 398.602,296.81 398.045,297.367 397.362,297.367L 390.641,297.367C 389.956,297.367 389.399,296.81 389.399,296.125 Z "/>

 

                        < Path x : Name ="iconRestore" Visibility ="Collapsed" Width ="11.6719" Height ="9.48242" Stretch ="Fill" Fill ="#FFFFFFFF" Data ="F1 M 411.826,302.421C 411.802,301.775 411.28,301.259 410.629,301.259L 404.483,301.259C 403.836,301.257 403.312,301.775 403.286,302.421L 403.277,302.421C 403.277,302.421 403.277,303.254 403.277,304.177L 407.126,304.177C 407.984,304.177 408.679,304.853 408.722,305.728L 408.722,307.822L 410.629,307.822C 411.294,307.822 411.834,307.283 411.836,306.615C 411.836,306.507 411.836,302.421 411.836,302.421L 411.826,302.421 Z M 407.126,304.956L 400.979,304.956C 400.545,304.955 400.19,305.301 400.164,305.728L 400.164,309.925C 400.164,310.374 400.531,310.741 400.981,310.741L 407.126,310.741C 407.575,310.741 407.942,310.374 407.944,309.923L 407.934,305.742C 407.918,305.301 407.565,304.956 407.126,304.956 Z "/>

 

                        < ContentPresenter SnapsToDevicePixels ="{ TemplateBinding SnapsToDevicePixels }" HorizontalAlignment ="{ TemplateBinding HorizontalContentAlignment }" VerticalAlignment ="{ TemplateBinding VerticalContentAlignment }" RecognizesAccessKey ="True"/>

                    </ Grid >

                    < ControlTemplate.Triggers >

                        < Trigger Property ="IsFocused" Value ="True"/>

                        < Trigger Property ="IsMouseOver" Value ="True">

                            < Setter Property ="Fill" Value ="#FF6E8F9A" TargetName ="btnEllipse"/>

                         </ Trigger >

                        < Trigger Property ="IsPressed" Value ="True"/>

                        < Trigger Property ="IsEnabled" Value ="False"/>

                        < Trigger Property ="IsChecked" Value ="True">

                            < Setter TargetName ="iconMax" Property ="Visibility" Value ="Collapsed" />

                            < Setter TargetName ="iconRestore" Property ="Visibility" Value ="Visible" />

                        </ Trigger >

                    </ ControlTemplate.Triggers >

                </ ControlTemplate >

            </ Setter.Value >

        </ Setter >

    </ Style >

 

    < Style x : Key ="styleMainWindowButtonClose" BasedOn ="{ x : Null }" TargetType ="{ x : Type Button }">

        < Setter Property ="Template">

            < Setter.Value >

                < ControlTemplate TargetType ="{ x : Type Button }">

相關推薦