Is shape animation possible in WPF? - wpf

Question

Example Button Link
Can WPF do shape animation likes this button click's effect? I try to use double animation the width and cornerRadius but the effects is not quite good. I using the path animation to animate the progress circle but only the shape animation I really don know how to animate it. Anyone can help me or give some ideas?
This is my Code
<Path x:Name="path" Height="20" Width="20" Stroke="Gray" Stretch="Fill" Opacity="0.3"
StrokeThickness="2" Data="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
StrokeDashOffset="204.243713378906">
<Path.StrokeDashArray>
<System:Double>204.243713378906</System:Double>
</Path.StrokeDashArray>
</Path>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="bdrTest">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="path"
Storyboard.TargetProperty="(Shape.StrokeDashOffset)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="204.243713378906"/>
<SplineDoubleKeyFrame KeyTime="00:00:5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

Answer 1

What you are calling Animations are not Animations. It is simply the Button.Background and Button.Foreground changing colour in response to mouse over events. To give a Button rounded corners, you just need to supply your own ControlTemplate for the Button:
<Button Content="Submit" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="30" BorderThickness="2" BorderBrush="#FF1ECD97"
TextElement.Foreground="#FF1ECD97" TextElement.FontSize="20"
TextElement.FontWeight="SemiBold" Padding="100,20">
<ContentPresenter />
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Now to add the mouse over effects, we just need to add a Trigger to the ControlTemplate to change the colour of the Button.Background and Button.Foreground when the UIElement.IsMouseOver property is True:
<Button Content="Submit" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" CornerRadius="30" Background="Transparent"
BorderThickness="2" BorderBrush="#FF1ECD97" TextElement.Foreground=
"#FF1ECD97" TextElement.FontSize="20" TextElement.FontWeight="SemiBold"
Padding="100,20">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background"
Value="#FF1ECD97" />
<Setter TargetName="Border" Property="TextElement.Foreground"
Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

Answer 2

The most difficult thing is animating the circular progress. If using codebehind, it's not such problematic. But I tried to use pure XAML. In codebehind we can calculate the Point of some ArcSegment from the corresponding angle and update the ArcSegment accordingly. But in XAML, we have to use some hacky work-around. I had to use 4 layers of borders to create this effect. Firstly I tried with just 2 layers but because changing the Background while animating it simply makes the animation not work expectedly.
I will concentrate mainly on the circular progress effect because this is the most challenging problem when solving with pure XAML. Basically you need some background Border having 2 halves with different colors making a full circle. The left half is grayed, the right half has active (progressed) color. This border is fixed:
You need another Border also with 2 different halves. Its left half is transparent and its right half has active/progressed color. This Border will be rotated (in fact its Background is rotated) in the second phase after the first phase is 180 degree rotated:
The next Border will be used in the first phase. This border also has 2 different halves. The left half is transparent and the right half is grayed:
So initially, these 3 Borders will make a full grayed circle (the left grayed half is of the first Border, the right grayed half is of the third):
In the first phase, the third border is 180 degree rotated. Its grayed half will gradually open the underneath active-color half of the second Border making the effect of progressing from 0 to 180 degree. After that the first phase has been finished. The third Border will be hidden, the second Border will be rotated. Now its active-color half (the right half) will gradually cover the grayed half of the first Border (on the left) and make the effect progressing from 180 to 360 (full of active color).
There are still other Border layers for the last effect of showing tickmark,... Here is the full code. It's fairly long and it's mainly used for reference, you may have to improve it much so that it can be used in your code. I just used simple animations (without easing):
<Button Background="Transparent" Content="Submit" FontSize="30" Foreground="#FF1ECD97" BorderBrush="#FF1ECD97">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Height" Value="80"/>
<Setter Property="Width" Value="280"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</Button.Style>
<Button.Template>
<ControlTemplate TargetType="Button">
<ControlTemplate.Resources>
<DrawingBrush Stretch="Fill" x:Key="circle">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M-25,-25 h50v50h-50v-50" Brush="Transparent">
</GeometryDrawing>
<GeometryDrawing Geometry="M0,-25 A25,25 0 0 1 0,25">
<GeometryDrawing.Pen>
<Pen Brush="{DynamicResource right}" Thickness="4"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Geometry="M0,25 A25,25 0 0 1 0,-25">
<GeometryDrawing.Pen>
<Pen Brush="{DynamicResource left}" Thickness="4"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
<DrawingBrush.RelativeTransform>
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
</DrawingBrush.RelativeTransform>
</DrawingBrush>
<DrawingBrush x:Key="ok" Stretch="None">
<DrawingBrush.Drawing>
<GeometryDrawing Geometry="M0,20 L10,30 30,5">
<GeometryDrawing.Pen>
<Pen Brush="White" Thickness="5" EndLineCap="Round" StartLineCap="Round"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
<DrawingBrush.RelativeTransform>
<ScaleTransform CenterX="0.5" CenterY=".5" ScaleX="0" ScaleY="0"/>
</DrawingBrush.RelativeTransform>
</DrawingBrush>
</ControlTemplate.Resources>
<Grid>
<Grid.Effect>
<DropShadowEffect ShadowDepth="1"/>
</Grid.Effect>
<Border BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"
BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}" CornerRadius="40"
Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}">
</Border>
<Border Opacity="0" Name="b1">
<Border.Resources>
<SolidColorBrush Color="#FF1ECD97" x:Key="right"/>
<SolidColorBrush Color="#ffdddddd" x:Key="left"/>
</Border.Resources>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{StaticResource circle}"/>
</Style>
</Border.Style>
</Border>
<Border Opacity="0" Name="b12">
<Border.Resources>
<SolidColorBrush Color="#FF1ECD97" x:Key="right"/>
<SolidColorBrush Color="Transparent" x:Key="left"/>
</Border.Resources>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{StaticResource circle}"/>
</Style>
</Border.Style>
</Border>
<Border Opacity="0" Name="b2">
<Border.Resources>
<SolidColorBrush Color="#ffdddddd" x:Key="right"/>
<SolidColorBrush Color="Transparent" x:Key="left"/>
</Border.Resources>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{StaticResource circle}"/>
</Style>
</Border.Style>
</Border>
<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Name="cp"/>
<Border Opacity="0" Name="b3_" Background="#FF1ECD97" CornerRadius="40"/>
<Border Opacity="0" Name="b3" Background="{StaticResource ok}"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Name="bg">
<Storyboard Duration="0:0:6" FillBehavior="Stop">
<DoubleAnimation Storyboard.TargetProperty="Width" To="80" Duration="0:0:.2">
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="b1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:.2" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:.2" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="cp" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Background.RelativeTransform.Angle" By="180" BeginTime="0:0:.2" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Opacity" BeginTime="0:0:2.2" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:2.2" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Background.RelativeTransform.Angle" By="180" Duration="0:0:2" BeginTime="0:0:2.2"/>
<!-- Reset -->
<DoubleAnimation Storyboard.TargetName="b1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="b2" Storyboard.TargetProperty="Background.RelativeTransform.Angle" To="0" BeginTime="0:0:4.2" Duration="0:0:0"/>
<DoubleAnimation Storyboard.TargetName="b12" Storyboard.TargetProperty="Background.RelativeTransform.Angle" To="0" Duration="0:0:0" BeginTime="0:0:4.2"/>
<DoubleAnimation Storyboard.TargetProperty="Width" To="280" BeginTime="0:0:4.2" Duration="0:0:.2"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="b3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="1" Duration="0:0:0"/>
<DoubleAnimation Storyboard.TargetName="b3_" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.2" To="1" Duration="0:0:.1"/>
<DoubleAnimation Storyboard.TargetName="b3" Storyboard.TargetProperty="Background.RelativeTransform.ScaleX" To="1" Duration="0:0:.2" BeginTime="0:0:4.2"/>
<DoubleAnimation Storyboard.TargetName="b3" Storyboard.TargetProperty="Background.RelativeTransform.ScaleY" To="1" Duration="0:0:.2" BeginTime="0:0:4.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition SourceName="b1" Property="Opacity" Value="0"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF1ECD97" Duration="0:0:.3">
</ColorAnimation>
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="White" Duration="0:0:.3">
</ColorAnimation>
<ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="0" Duration="0:0:0">
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="Transparent" Duration="0:0:.3">
</ColorAnimation>
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="#FF1ECD97" Duration="0:0:.3">
</ColorAnimation>
<ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="2" Duration="0:0:0">
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>