wpf自定義按鈕樣式

wpf採用xaml文件的方式來向開發者提供繪製界面的平臺。本篇我將根據自己在編寫軟件過程中的經歷,向大家介紹一下如果自定義按鈕的樣式。通過這些介紹,你可以做出帶圓角的按鈕,帶圖標的按鈕,顏色漸變的按鈕,以及設置在鼠標經過,以及點擊時按鈕的樣式。

(1)先看效果:

第一個是帶圓角和漸變背景的按鈕(藍色是界面背景,與按鈕無關)

正常狀態 鼠標停留時的樣式(按鈕變亮)

         第二個是半透明按鈕:類似於qq的關閉按鈕(同樣墨綠色和粉紅色是界面背景上的與按鈕無關)

正常狀態 (從上到下由於墨綠色變透明) 鼠標停留後的樣式(背景從上到下由紅變透明)

第三種是帶圖標的按鈕(藍色背景同樣是界面背景,與按鈕無關)

正常狀態 鼠標停留後的樣式(邊框發光) 點擊後的樣式(邊框發黑)

(2)爲達到上面的效果你需要做的僅僅是在按鈕的xaml代碼中添加一段模板代碼,然後根據自己的需要對代碼進行一些修改:

原始代碼:

第一種效果按鈕的代碼:

<Button x:Name="Button_Login" Content="登    錄" HorizontalAlignment="Left" Margin="111,222,0,0" VerticalAlignment="Top" Width="120" Height="32" IsDefault="True" Click="Button_Login_Click">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="Silver" Offset="0.5" />
                                <GradientStop Color="White" Offset="0.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" TargetName="PART_Background">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="Silver" Offset="0.0" />
                                        <GradientStop Color="White" Offset="0.5" />
                                        <GradientStop Color="Silver" Offset="0.0" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
第二種效果代碼:

<Button Content="×" HorizontalAlignment="Left" Height="21" Margin="353,0,0,0" VerticalAlignment="Top" Width="22" Foreground="White" BorderBrush="#FF285A5C" Click="Button_Click" Background="Transparent" FontWeight="Bold" IsTabStop="False">
            <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" Name="PART_Background">
                            <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FF484753" Offset="0.0" />
                                <GradientStop Color="Transparent" Offset="1" />
                            </LinearGradientBrush>
                        </Border.Background>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" TargetName="PART_Background">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="#FF90250E" Offset="0.0" />
                                        <GradientStop Color="Transparent" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    <Trigger Property="ButtonBase.IsPressed" Value="True">
                        <Setter Property="UIElement.Effect">
                            <Setter.Value>
                                <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            </Button.Template>
        </Button>
第三種效果代碼:

<Button HorizontalAlignment="Left" Margin="279,222,0,0" VerticalAlignment="Top" Width="37" Height="38" BorderBrush="Transparent" BorderThickness="0" ToolTip="忘記密碼" IsTabStop="False">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="Transparent" Offset="0.0" />
                                <GradientStop Color="Transparent" Offset="0.0" />
                                <GradientStop Color="Transparent" Offset="0.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>                       
                        <Rectangle Width="40" Height="40">
                            <Rectangle.Fill>
                                <ImageBrush  Stretch="Fill" ImageSource="button_ForgetPwd.png" />
                            </Rectangle.Fill>
                        </Rectangle>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Yellow" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

其實三段代碼大同小異,如果你直接要和上述三種按鈕一樣的樣式,直接複製代碼即可,如果需要詳細瞭解以便設計自己的按鈕樣式,則以第一個按鈕的代碼爲例,我們詳細研究一下代碼各部分的作用。

(3)、代碼分析

①  <Button x:Name="Button_Login" Content="登    錄" HorizontalAlignment="Left" Margin="111,222,0,0" VerticalAlignment="Top" Width="120" Height="32" IsDefault="True" Click="Button_Login_Click">

這個是經典的按鈕樣式,各個屬性的具體功能就不再介紹了,但是需要注意的是,和系統默認的button xaml代碼不同的地方是後>沒有/與之對應的是在這段代碼最後應該有</Button>來包裹代碼,學過標記語言的朋友肯定知道這個。如果沒有學習過標記語言,需要稍微瞭解一下,至少知道它是一種嵌套結構的語言。

②在<button></button>的下一級標籤是<Button.Template></ Button.Template >,它的下一級僅嵌套了一個< ControlTemplate >< /ControlTemplate >是一個類似於容器的標記。而它的下一級主要分爲兩大部分。第一部分是確定按鈕上都有哪些東西。如果只需要設置按鈕樣式而需要添加背景圖片呢麼只需要一個<Border></Border>標籤即可。可以參看第一個,第二個按鈕,他們在< ControlTemplate >< /ControlTemplate >中的第一部分內容是:

<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="Silver" Offset="0.5" />
                                <GradientStop Color="White" Offset="0.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>

其中CornerRadius="8,8,8,8"表示按鈕的上下左右圓角,可以通過設置此處的參數來改變按鈕的形狀。不一定是四個角都是圓角,可以根據自己的需要,對四個角進行設置。最內部的三個GradientStop是用來控制按鈕的背景顏色的。Color可以直接指定顏色名稱,也可以通過RGB顏色指定。Offset表示該顏色的垂直起始位置。而其後的數字爲距離頂端的百分比。這裏的GradientStop可以有n多個。用以設置按鈕從上到下幾中不同的顏色變化上述代碼是從0-按鈕的0.5處由白變銀,05-1處由銀變白。而對於第二種樣式按鈕需要從紅色漸變爲透明,因此需要兩個GradientStop,第一個顏色紅色,offset0,第二個transparent(透明),offset1.有了這個可以在按鈕任意位置設置任意顏色。

    但是如果不僅僅要設置按鈕樣式,還要爲按鈕添加背景圖片,那麼就需要用<Grid></Grid>包裹<Border></Border>標籤。與<Border></Border>平等地在其後面添加一個

<Rectangle Width="40" Height="40">
                            <Rectangle.Fill>
<ImageBrush  Stretch="Fill" ImageSource="button_ForgetPwd.png" />
                            </Rectangle.Fill>
                        </Rectangle>

也就是說這時候< ControlTemplate >< /ControlTemplate >的第一部分標籤是<Grid></Grid>

而<Grid></Grid>的下一級包括兩部分<Border></Border>用於設置按鈕樣式,<Rectangle></Rectangle>用於設置背景圖片。

< ControlTemplate >< /ControlTemplate >的第二部分是按鈕響應樣式,也就是鼠標停留,或者鼠標點擊時按鈕的樣式,它的標籤爲<ControlTemplate.Triggers></ ControlTemplate.Triggers>

其中包含的是所有的按鈕響應樣式。其中的每一個響應樣式格式爲

  <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" TargetName="PART_Background">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="Silver" Offset="0.0" />
                                        <GradientStop Color="White" Offset="0.5" />
                                        <GradientStop Color="Silver" Offset="0.0" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

其中Property用於指示按鈕的響應事件類型,Property="UIElement.IsMouseOver"爲鼠標停留,Property="ButtonBase.IsPressed"爲鼠標按下。而其對應按鈕樣式的設置方式有兩種,如果需要設置按鈕顏色,像按鈕1一樣則內部爲如上述代碼一樣,其樣式具體設置方式,與前面按鈕默認樣式設置一樣。而如果僅需要修改邊框顏色則可以採用按鈕3的方式:

<ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Yellow" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>

其區別請讀者自行研究。

本文是我在繪製軟件界面時,通過查閱相關資料,並自行揣測理解所得,其間可能有一下謬誤或不完善的地方,忘大家多提意見,大家一起進步!

mushao 2014-8-27@hust


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章