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>
图例: