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