使用Visual Studio 2008建立WPF自定義按鈕

使用Visual Studio 2008開發已經有一段時間了。其中改善了不少用戶體驗對咱們的開發頗有幫助，所提供的模板也大大簡化了咱們的項目開發。

其中對WPF技術的引入引發了個人極大興趣，WPF技術的出現，使得傳統的UI設計獲得了大大的簡化，之前咱們要作一個用戶自定義控件是件很複雜的事情，在WPF裏面，將會比較簡單。那些只有專業公司才能作的事情如今普通開發者也能夠輕鬆完成。

前段時間收到了來自微軟最有影響力開發者項目組的技術光盤，其中就講到了WPF以及SilverLight的一些相關技術。因爲工做關係沒有及時拿上來與你們分享。

本文就以在VS2008中使用WPF建立用戶自定義按鈕爲例，來學習一下怎麼樣使用WPF來工做。

首先，打開VS2008，建立一個WPF應用程序項目。

咱們取名爲WpfDemo1

跟傳統的windows應用程序開發同樣，VS會自動幫咱們完成程序的基本框架的建立工做。

添加基本按鈕

 

在新創建的項目中，咱們雙擊Window1.xaml文件。

經過在解決方案資源管理器中雙擊 Window1.xaml 文件來打開它。默認狀況下， Window1.xaml 中存在一個 Grid 元素。移除 Grid 元素，並經過向 Window1.xaml 中鍵入或複製和粘貼如下突出顯示的代碼來向可擴展應用程序標記語言 (XAML) 頁面中添加幾個按鈕

<Window x:Class= "WpfDemo1.Window1"
        xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
        <StackPanel HorizontalAlignment="Left" Width="132">
                <Button>Button1</Button>
                <Button>Button2</Button>
                <Button>Button3</Button>
        </StackPanel>
</Window>

 

F5運行咱們的應用程序，咱們將會看到咱們剛纔新添加的基本應用程序按鈕。

設置基本屬性

接着，咱們將會爲這些按鈕設置一些屬性，以便控制按鈕外觀和佈局。您將使用資源來爲整個應用程序定義按鈕屬性，而不是爲這些按鈕單獨設置屬性。在概念上，應用程序資源與網頁的外部級聯樣式表 (CSS) 類似；可是，資源遠比級聯樣式表 (CSS) 強大，在本例結束時您將明白這一點。

使用樣式爲按鈕設置基本屬性

1.    定義 Application.Resources 塊： 打開 app.xaml 並添加下面突出顯示的標記（若是還沒有添加）：

        <Application.Resources>
                <Style TargetType= "Button">
                        <Setter Property= "Width" Value= "90" />
                        <Setter Property= "Margin" Value= "10" />
                </Style>
        </Application.Resources>

1.    資源範圍由資源的定義位置來肯定。若是資源是在 app.xaml 文件的 Application.Resoureses 中定義的，則將容許從應用程序中的任何位置使用資源。

2.    建立一個樣式並用該樣式定義基本屬性值：向 Application.Resources 塊添加下面的標記。此標記建立一個應用於該應用程序中全部按鈕的 Style，並將這些按鈕的 Width 設置爲 90，將 Margin 設置爲 10：

        <Application.Resources>
                <Style TargetType= "Button">
                        <Setter Property= "Width" Value= "90" />
                        <Setter Property= "Margin" Value= "10" />
                </Style>
        </Application.Resources>

TargetType 屬性指定將該樣式應用於 Button 類型的全部對象。每一個 Setter 都爲 Style 設置不一樣的屬性值。所以，此時該應用程序中的每一個按鈕的寬度都爲 90 ，邊距都爲 10 。

3    您還能夠對樣式進行更多的處理，這包括以各類方式微調對象的目標、指定複雜的屬性值，甚至將樣式做爲其餘樣式的輸入。

4    爲資源設置樣式屬性值： 使用資源，能夠經過一種簡單的方式來重用一般定義的對象和值。爲了使代碼更加模塊化，使用資源定義複雜值尤爲有用。向 app.xaml 添加下面突出顯示的標記。

        <Application.Resources>
                <LinearGradientBrush x:Key= "GrayBlueGradientBrush"    
        StartPoint= "0,0" EndPoint= "1,1">
                        <GradientStop Color= "DarkGray" Offset= "0" />
                        <GradientStop Color= "#CCCCFF" Offset= "0.5" />
                        <GradientStop Color= "DarkGray" Offset= "1" />
                </LinearGradientBrush>

                <Style TargetType= "{x:Type Button}">
                        <Setter Property= "Background"    
            Value= "{StaticResource GrayBlueGradientBrush}" />

                        <Setter Property= "Width" Value= "90" />
                        <Setter Property= "Margin" Value= "10" />
                </Style>
        </Application.Resources>

 

5    您已經在 Application.Resources 塊的正下方建立了一個名爲 「GrayBlueGradientBrush」 的資源。此資源將定義一個水平漸變。此資源能夠在該應用程序中的任何位置（包括在 Background 屬性的按鈕樣式 setter 內部中）用做屬性值。如今，全部的按鈕都具備此漸變的 Background 屬性值。

按 F5 運行該應用程序。其外觀相似於下圖：

建立一個定義按鈕外觀的模板

在本節中，將建立一個用來自定義按鈕外觀（表示）的模板。按鈕表示是由幾個賦予按鈕獨特外觀的對象（包括矩形和其餘組件）組成的。

到目前爲止，對應用程序中按鈕外觀的控制已限制爲更改按鈕的屬性。若是您但願更完全地改變按鈕的外觀，該怎麼辦？ 使用模板能夠強有力地控制對象的表示。因爲模板能夠在樣式中使用，所以您能夠將模板應用於全部應用了樣式的對象（在本例中爲按鈕）。

使用模板定義按鈕的外觀

1.    設置模板： 因爲控件（如 Button ）具備 Template 屬性，所以您能夠像對 Style 中所設置的其餘屬性值那樣，使用 Setter 來定義模板屬性值。向按鈕樣式中添加下面突出顯示的標記。

<Application.Resources>

    <LinearGradientBrush x:Key= "GrayBlueGradientBrush"    
        StartPoint= "0,0" EndPoint= "1,1">
        <GradientStop Color= "DarkGray" Offset= "0" />
        <GradientStop Color= "#CCCCFF" Offset= "0.5" />
        <GradientStop Color= "DarkGray" Offset= "1" />
    </LinearGradientBrush>

    <Style TargetType= "{x:Type Button}">
    <Setter Property= "Background" Value= "{StaticResource GrayBlueGradientBrush}" />
        <Setter Property= "Width" Value= "80" />
        <Setter Property= "Margin" Value= "10" />
        <Setter Property= "Template">
            <Setter.Value>
                <!-- The button template is defined here. -->
            </Setter.Value>
        </Setter>
    </Style>

</Application.Resources>

 

未完，待續……