寫自己的WPF樣式 - 按鈕


  做一個后台管理小程序,據說WPF的界面比較"炫",於是選擇使用WPF來開發。既然用了WPF當然需要做好看點了,於是稍微研究了下WPF的樣式,廢話不多說下面開始自定義一個按鈕樣式:

(1)在App.xaml文件里自定義一個按鈕樣式 ,"MyWpfButton":

<Application x:Class="WPFCustomerStyleStudy.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="MyWpfButton" TargetType="{x:Type Button}" >
            
        </Style>
    </Application.Resources>
</Application>

(2)自定義按鈕的前景色背景色,個人比較喜歡藍色大氣:

tip1:自定義一些顏色,作為按鈕的前景色背景色方便重用  

tip2:假如選擇漸變顏色選擇比較相近的兩種顏色漸變起來比較好看

*tip3:使用blend工具編輯

<Application x:Class="WPFCustomerStyleStudy.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--自定義顏色-->
        <LinearGradientBrush x:Key="LinearGradientBlueBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF377FED" Offset="0" />
            <GradientStop Color="#FF074CC0" Offset="1" />
        </LinearGradientBrush>
        <Color x:Key="MyBtnBorderColor">#FF2D78F4</Color>
        <!--END-->
        
        <Style x:Key="MyWpfButton" TargetType="{x:Type Button}" >
            <Setter Property="Background" Value="{StaticResource LinearGradientBlueBackground}"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="BorderBrush" Value="{StaticResource MyBtnBorderColor}"></Setter>
        </Style>
    </Application.Resources>
</Application>

下面給按鈕綁定下樣式,我們對比下效果:

是不是頓時高大尚了起來呢,運行看看效果你會發現鼠標經過的時候顏色還是原始的顏色,下面我們繼續完善。

(3)自定義模板,給按鈕添加圓角,鼠標經過背景:

<Application x:Class="WPFCustomerStyleStudy.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--自定義顏色-->
        <LinearGradientBrush x:Key="LinearGradientBlueBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF377FED" Offset="0" />
            <GradientStop Color="#FF074CC0" Offset="1" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="MyBtnBorderColor" Color="#FF2D78F4"></SolidColorBrush>
        <SolidColorBrush x:Key="MyBtnHoverBackgroundColor" Color="#FF317EF3"></SolidColorBrush>
        <!--END-->
        
        <Style x:Key="MyWpfButton" TargetType="{x:Type Button}" >
            <Setter Property="Background" Value="{StaticResource LinearGradientBlueBackground}"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="BorderBrush" Value="{StaticResource MyBtnBorderColor}"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 
                                SnapsToDevicePixels="true" CornerRadius="3,3,3,3">
                            <ContentPresenter x:Name="contentPresenter" 
                                              Focusable="False" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}" 
                                              RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource MyBtnHoverBackgroundColor}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

簡單大氣的按鈕樣式就完成了,下面看效果:

轉載請注明出處:http://www.cnblogs.com/xinwang/p/4354182.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM