based on this answer i have two questions:
Whats the name of the marked icon?
How can I make it to raotate to the other direction, i.e to spin like:
Itried to add FlowDirection="RightToLeft" like:
<fa:ImageAwesome FlowDirection="RightToLeft" SpinDuration="6" Icon="Cog" Width="200" Height="200" Foreground="White" Spin="True" />
but it still rotate to same direction
this should do the trick for you:
<Viewbox Height="20">
<Path Fill="black" Data="M28,2.202v4.059C37.053,7.706,44,15.547,44,25c0,10.477-8.523,19-19,19S6,35.477,6,25c0-9.442,6.93-17.275,15.966-18.734 V2.206C10.713,3.696,2,13.347,2,25c0,12.682,10.317,23,23,23s23-10.318,23-23C48,13.335,39.269,3.677,28,2.202z" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<RotateTransform/>
</Path.RenderTransform>
<Path.Style>
<Style>
<Style.Triggers>
<Trigger Property="Image.IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Angle"
From="0"
To="360"
Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Viewbox>
Related
For the past week, I tried in vain to find a way to trigger a path animation.
What I want to do is by using a boolean property defined in my ViewModel, so that when this value is true, an rectangle shall move along the path.
I thought it was easy at first but...
Demos of Path-Animation I found, would trigger the Storyboard by means of RoutedEvent like clicking a button or Button.Loaded etc., and I haven't got a way to trigger it by DependencyProperty.
I am new to WPF and thank you in advance!
Code here:
<!--I define a rectangle which is expected to be auto-moving along the path when "Monitoring" is set true. -->
<Rectangle Width="20" Height="10" Fill="LightBlue">
<Rectangle.RenderTransform>
<MatrixTransform x:Name="RectangleMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding Monitoring}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--Here I got compile exception: 'TargetName property cannot be set on a Style Setter.'-->
<MatrixAnimationUsingPath
Storyboard.TargetName="RectangleMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
RepeatBehavior="Forever" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Canvas>
BTW, WPF is strong but really tough :(
Just drop Storyboard.TargetName and use Storyboard.TargetProperty="RenderTransform.Matrix":
<Rectangle Width="20" Height="10" Fill="LightBlue">
<Rectangle.RenderTransform>
<MatrixTransform />
</Rectangle.RenderTransform>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding Monitoring}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetProperty="RenderTransform.Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
RepeatBehavior="Forever" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
I have a simple image on my form. What I would like to do is when I hover the image it starts a storyboard which basically does a 360 loop on itself.
Here's the storyboard, it's called TurnLogo:
<Storyboard x:Key="TurnLogo">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Here's my image :
<Image x:Name="image" HorizontalAlignment="Left" Height="64" VerticalAlignment="Top" Width="64" Source="Images/Logo/Logomakr_3lb9fd.png" Margin="7,7,0,0" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
<Image.Style>
<Style>
<Style.Triggers>
<EventTrigger RoutedEvent="Control.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource TurnLogo}"/>
</EventTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
When I hover the image it fails.. Why ?
Remove the Storyboard.TargetName:
<Storyboard x:Key="TurnLogo">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
By="360" Duration="0:0:1"/>
</Storyboard>
and simplify the RenderTransform:
<Image ... RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform/>
</Image.RenderTransform>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="{StaticResource TurnLogo}"/>
</EventTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
I want to implement the button expanding animation where when user hovers over the top button, a sneak peak of the other functions each with their own button will be displayed below that top button on which the user hovered initially. I wrote the below XAML to achieve that and it is working as expected.
XAML:
<Button Name="panel" Margin="0,40,0,0">
<Button.Template>
<ControlTemplate x:Name="abc">
<Grid>
<Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter>
</-->
<Trigger Property="Margin" Value="0,45,10,0">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Margin" Value="0,85,10,0">
<Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="..." Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="editBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=editButton}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="enterBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="exitBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Initial Screenshot:
When the user hovers on the blue button, two additional buttons will drop from behind this blue button. It is difficult to take screenshot for that as those two buttons will be displayed only until the user is hovering on the the blue button. This is exactly my problem.
If the user wants to click on the two additional buttons which come down, the user will have to move the cursor away from the blue button and immediately these two additional buttons will go away and hide behind the blue button and thus escaping the user's click. How can I overcome this?
Is there anyway I can overwrite the Trigger.ExitActions if the user clicks on the blue button instead of hovering on it? Or any other event which I can fire up to disable the ExitActions for a while?
I am trying to create a click event for the blue button and handle the required behaviour in the code behind but if there are any other better approaches, please let me know.
Either use VisualStates one for Normal and another for Expanded state.
Or, use ToggleButton instead of Button , in case of which your code would look like this :
<Button Name="panel" Margin="0,40,10,31">
<Button.Template>
<ControlTemplate x:Name="abc">
<Grid>
<Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" >
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter>
</-->
<Trigger Property="Margin" Value="0,45,10,0">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Margin" Value="0,85,10,0">
<Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<ToggleButton Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="...">
<ToggleButton.Template>
<ControlTemplate x:Name="editBtn" TargetType="ToggleButton">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=editButton}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="enterBoard">
<Storyboard FillBehavior="HoldEnd">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="exitBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
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>
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>
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>
I have a button with a style.
That style has an image:
<ContentPresenter.Content>
<Grid>
.
.
.
<Image x:Name="RecordingImage"
Source="/Studio;component/Images/Icons/image.png"
Width="107"
Height="107"
RenderTransformOrigin=".5,.5"
Visibility="Hidden">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
And is animated with this code:
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="RecordingImage" Property="Visibility" Value="Visible" />
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="RecordingImage"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
From="0" To="360" Duration="00:00:03.000" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
But when the animation begins, all my interface slows down.
What is the problem?