WPF Style Button

20 2020

MainWindow.xaml

<Button x:Name="button17" Style="{StaticResource ProductButtonStyle}" Content="Blue Lagoon" >
<Button.Tag>
<ImageSource>Icons/item_blue_lagoon.png</ImageSource>
</Button.Tag>
</Button>

Application.xaml

<!-- Product Button Style -->

<Style TargetType="{x:Type Button}" x:Key="ProductButtonStyle" >
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="70" />
<Setter Property="Margin" Value="10" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Background" Value="Yellow" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
ClipToBounds="True">
<Border x:Name="ProductBorder" CornerRadius="5" BorderBrush="red" BorderThickness="0">
<Border.Background>
<LinearGradientBrush>
<GradientStop x:Name="darkblueOffset" Offset="0" Color="red"/>
<GradientStop x:Name="blueOffset" Offset="1" Color="red"/>
</LinearGradientBrush>
</Border.Background>

</Border>

<StackPanel>

<Image x:Name="ProductImage" Source ="{TemplateBinding Tag}"
Height="70"
Stretch="Fill"
HorizontalAlignment="Center"
Margin="0"
VerticalAlignment="Top">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>

<ContentPresenter x:Name="ProductText" Margin="0,-20,0,0" Width="Auto"
Content="{TemplateBinding Content}"
TextBlock.Foreground="White"
Panel.ZIndex="11"
Opacity="0"
HorizontalAlignment="Center" />

<Rectangle x:Name="TextBGRectagle"
HorizontalAlignment="Stretch"
Height="30"
Panel.ZIndex="10"
StrokeThickness="1" Fill="#FF555555" Opacity="0.6" >
<Rectangle.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="0"/>
<ScaleTransform ScaleY="1" ScaleX="1"/>
<SkewTransform/>
<RotateTransform Angle="0"/>

</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>

</Grid>

<ControlTemplate.Triggers>
<!-- Set properties when mouse pointer is over the button. -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="270" ShadowDepth="3" BlurRadius="15" Opacity="0.7" />
</Setter.Value>

</Setter>

</Trigger>
<!-- Set properties when button has focus. -->

<!-- Animations that start when mouse enters and leaves button. -->
<EventTrigger RoutedEvent="Mouse.MouseEnter">

<EventTrigger.Actions>
<BeginStoryboard Name="mouseEnterBeginStoryboard">
<Storyboard>
<!-- This animation makes the glass rectangle shrink in the X direction. -->

<DoubleAnimation Storyboard.TargetName="TextBGRectagle"
Storyboard.TargetProperty= "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"
To="-25" By="-1"
Duration="0:0:0.2" >
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="ProductImage"
Storyboard.TargetProperty= "(Image.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
By="0.2"
Duration="0:0:0.2" >

</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="ProductImage"
Storyboard.TargetProperty= "(Image.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
By="0.2"
Duration="0:0:0.2">

</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="ProductText"
Storyboard.TargetProperty= "Opacity"
From="0" To="1" By="0.1"
Duration="0:0:0.2">

</DoubleAnimation>

</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard Name="mouseLeaveBeginStoryboard">
<!-- Stopping the storyboard sets all animated properties back to default. -->

<Storyboard>
<DoubleAnimation Storyboard.TargetName="ProductText"
Storyboard.TargetProperty= "Opacity"
From="1" To="0" By="0.1"
Duration="0:0:0.5">

</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="TextBGRectagle"
Storyboard.TargetProperty= "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"
To="0" By="1"
Duration="0:0:0.5" >
</DoubleAnimation>

</Storyboard>
</BeginStoryboard>
<StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard"></StopStoryboard>
</EventTrigger.Actions>
</EventTrigger>

</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- End Product Button Style-->

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>