WPF Button添加图片样式

WPF 按钮添加图片样式
作者：邱名涛
撰写时间：2019 年 7 月 28 日
前台代码：

<Window x:Class="WpfApplication1.LoginDes"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="Login" Height="300" Width="300"
        ResizeMode="NoResize"
        Background="Transparent"
        Opacity="1"
        AllowsTransparency="True"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        >
    <Window.Resources>
        <!--定义按钮样式-->
        <Style TargetType="Button">
            <Setter Property="Foreground" Value="Black"/>
            <!--修改模板属性-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <!--定义视觉树-->
                        <!--背景色-->
                        <Border x:Name="back" Opacity="0.8" CornerRadius="3">
                            <Border.Background>
                                <!--使用LinearGradientBrush渐变画刷：定义一个渐变画刷，然后需要定义渐变颜色，颜色已直线形式渐变-->
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">
                                    <GradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <!--GradientStop:定义渐变颜色与颜色渐变始点-->
                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent},  Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>
                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>
                                            <GradientStop Color="#FFF" Offset="1"/>
                                        </GradientStopCollection>
                                    </GradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                            <!--前景色及边框-->
                            <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="Black">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0.494,0.26" EndPoint="0.494,0.889">
                                        <GradientStop Color="#a2c1e6" Offset="1.5"/>
                                        <GradientStop Color="#d2d9e2" Offset="0.199"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <!--按钮内容-->
                                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center">
                                </ContentPresenter>
                            </Border>
                        </Border>
                        <!--定义视觉树_end-->
                        <!--定义触发器-->
                        <ControlTemplate.Triggers>
                            <!--属性触发器： 鼠标移入移出-->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#3FFF" BeginTime="0:0:0.1" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation To="#AFFF" BeginTime="0:0:0.1" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>

                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                        <!--定义触发器_End-->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    <DockPanel Name="dp">
        <!--附加属性-->
        <Grid x:Name="grdLogin">
            <Grid.Background>
                <LinearGradientBrush StartPoint="0.494,0.26" EndPoint="0.494,0.889">
                    <GradientStop Color="#a2c1e6" Offset="1.5"/>
                    <GradientStop Color="#d2d9e2" Offset="0.199"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Button                                       
                    Name="btn_Login" 
                    Content="登录" 
                    Height="33"
                    Width="76"
                    FontSize="19"                    
                    Background="SkyBlue"
                    Cursor="Hand"
                    Foreground="Black"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top" 
                    Margin="55,182,-131,0" 
                    FontFamily="Vivaldi" 
                   />
            <!--Cursor：当光标进入控件范围时使用的鼠标指针-->
            <Button                     
                    Name="btn_Cancel" 
                    Height="33" 
                    Width="76" 
                    FontSize="19"                   
                    Foreground="White"
                    Background="SkyBlue" 
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Top" 
                    Margin="169,182,-249,0" 
                    Cursor="Hand"
                    >
                <Button.Content>
                    <DockPanel>
                        <Image Source="Images/008.png"></Image>
                        <TextBlock Text="退出"></TextBlock>
                    </DockPanel>
                </Button.Content>
            </Button>

            <Button Height="76" Width="76" Cursor="Hand" HorizontalAlignment="Center" 
                    VerticalAlignment="Center" Foreground="Black"
                    Background="SkyBlue" >
                <Button.Content>
                    <StackPanel>
                        <Image Source="/Images/008.png" Width="50"></Image>
                        <TextBlock Text="打印" FontSize="16" HorizontalAlignment="Center"></TextBlock>
                    </StackPanel>
                </Button.Content>
            </Button>
        </Grid>

        <!--</Border>-->
    </DockPanel>
</Window>

图例：