-->

WPF XAML Round Gradient Animated Button

16 2019

1. Add a Image to the resource “Icons/icon_sett.png”
2. Add a Image source as Tag for the Button XML.

MainWindow.xaml

<Button x:Name="add_button" Style="{StaticResource GrayRoundCorner}" Content="Delivery" Height="80" VerticalAlignment="Top" Margin="212,-165,-290,0" HorizontalAlignment="Left" Width="80">
<Button.Tag>
<ImageSource>Icons/icon_sett.png</ImageSource>
</Button.Tag>
</Button>

Application.xaml

<!-- Gray Round Corner Button Style --> 
<Style x:Key="GrayRoundCorner" TargetType="{x:Type Button}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Image Name="pic" Source="{TemplateBinding Tag}" Width="32" Height="32" Panel.ZIndex="1"/>
<Border x:Name="border" CornerRadius="50" BorderBrush="#7FDEDEDE" BorderThickness="1">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.496,1.052">
 
<GradientStop Offset="1" x:Name="grayOffset" Color="#7FBFBFBF"/>
<GradientStop Offset="0" x:Name="whiteOffset" Color="White"/>
</RadialGradientBrush>
</Border.Background>
</Border>
 
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<!-- <RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
<TranslateTransform X="0.02" Y="0.3"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform> -->
<GradientStop Color="LightGray" Offset="1"/>
<GradientStop Color="White" Offset="0"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FFBFB8B8"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.25"/>
</Trigger>
<!-- Animations that start when mouse enters and leaves button. -->
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="whiteOffset"
Storyboard.TargetProperty="Offset"
From="0.0" To="1.0"
Duration="0:0:.2"/>
<DoubleAnimation
Storyboard.TargetName="grayOffset"
Storyboard.TargetProperty="Offset"
From="0.0" To="1.0"
Duration="0:0:.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="whiteOffset"
Storyboard.TargetProperty="Offset"
To="0.0"
Duration="0:0:.9"/>
<DoubleAnimation
Storyboard.TargetName="grayOffset"
Storyboard.TargetProperty="Offset"
To="1"
Duration="0:0:.9"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Leave a Reply