Write your own style WPF - Button

This article reprinted from: https://www.cnblogs.com/xinwang/p/4354182.html Author: xinwang reproduced, please indicate the statement.

　　Do a little background management program, is said to WPF interface more "flip", so he chose to use WPF to develop. Now with the WPF Aspect of course need to do, so little studied under the WPF style , ado, let's start a custom button style:

(1) In App.xaml file customize a button style, "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) from the foreground color background color custom button, personally prefer blue atmosphere:

tip1: customize some color, background color as the foreground color button easy reuse  

tip2: If the selection gradient color selected two relatively close up more attractive color gradient

* Tip3: edit using the blend tool

<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>

Button below to bind the next style, we compare the next effect:

It is not suddenly tall and yet it up, run it to see the effect you will find the mouse after the time of the original color or color, let's continue to improve.

(3) a custom template, add rounded corners to a button, mouse over the background:

<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>

Simple button style atmosphere complete, see the following effect:

Please indicate the source: http: //www.cnblogs.com/xinwang/p/4354182.html