I'm trying to create a loading animation in XAML. I know about ProgressRing, but for product branding we're trying to use our own loading circle.
I'd like to achieve the same functionality as ProgressRing (triggered by a boolean), but with my own pattern.
Below is the storyboard I've used to get the circles to do one full rotation, but I'm getting confused on how to activate it via boolean and also how to make it a continuous.
For our application, we will also have multiple of these loading icons on each page, and we will need to trigger them separately.
<Storyboard x:Key="SpinAnimation" Completed="Spin_Complete">
<DoubleAnimation From="1" To=".3" Duration="0:0:.1"
Storyboard.TargetName="FirstCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.1" From="1" To=".3" Duration="0:0:.1"
Storyboard.TargetName="SecondCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.2" From="1" To=".3" Duration="0:0:.1"
Storyboard.TargetName="ThirdCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.3" From="1" To=".3" Duration="0:0:.1"
Storyboard.TargetName="FourthCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.4" From="1" To=".3" Duration="0:0:.1"
Storyboard.TargetName="FifthCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.5" From="1" To=".3" Duration="0:0:.1"
Storyboard.TargetName="SixthCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.1" From=".3" To="1" Duration="0:0:.1"
Storyboard.TargetName="FirstCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.2" From=".3" To="1" Duration="0:0:.1"
Storyboard.TargetName="SecondCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.3" From=".3" To="1" Duration="0:0:.1"
Storyboard.TargetName="ThirdCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.4" From=".3" To="1" Duration="0:0:.1"
Storyboard.TargetName="FourthCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.5" From=".3" To="1" Duration="0:0:.1"
Storyboard.TargetName="FifthCircle"
Storyboard.TargetProperty="Opacity" />
<DoubleAnimation BeginTime="0:0:.6" From=".3" To="1" Duration="0:0:.1"
Storyboard.TargetName="SixthCircle"
Storyboard.TargetProperty="Opacity" />
</Storyboard>
Related
I am a complete newbie to WPF and XAML.
I have created a simple fade-in and fade-out animation for a textbox:-
<Storyboard x:Key="storyFadeInOutTop" Name="storyFadeInOutTop">
<DoubleAnimation From="0" To="1" Duration="00:00:01"
Storyboard.TargetName="txtTopCredit"
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
<DoubleAnimation From="10" To="0" Duration="00:00:01" BeginTime="00:00:01"
Storyboard.TargetName="blurTop"
Storyboard.TargetProperty="Radius">
</DoubleAnimation>
<DoubleAnimation From="0" To="10" Duration="00:00:01" BeginTime="00:00:05"
Storyboard.TargetName="blurTop"
Storyboard.TargetProperty="Radius">
</DoubleAnimation>
<DoubleAnimation From="1" To="0" Duration="00:00:01" BeginTime="00:00:06"
Storyboard.TargetName="txtTopCredit"
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
</Storyboard>
What I would like to do is run this storyboard several times within the lifecyle of the animation.
Something like:-
<Storyboard>
<!-- (Run my fade-in-fade out with BeginTime of 00:00:00) -->
<StringAnimationUsingKeyFrames Duration="00:00:01" BeginTime="00:00:07"
Storyboard.TargetName="txtTopCredit"
Storyboard.TargetProperty="Text">
<DiscreteStringKeyFrame Value="Game design and concept by" KeyTime="0:0:1" />
</StringAnimationUsingKeyFrames>
<!-- (Run my fade-in-fade out again with BeginTime of 00:00:07) -->
<StringAnimationUsingKeyFrames Duration="00:00:01" BeginTime="00:00:07"
Storyboard.TargetName="txtTopCredit"
Storyboard.TargetProperty="Text">
<DiscreteStringKeyFrame Value="Look Ive changed to another credit" KeyTime="0:0:1" />
</StringAnimationUsingKeyFrames>
<!-- (etc etc) -->
</Storyboard>
I hope you understand the gist of what I'm trying to do. I know I could just add the code in the storyboard to each section of the above but that would be very tedious. Is there an elegant way to do this?
You should be able to set the RepeatBehavior property on the storyboard (inherited from Timeline)
<Storyboard x:Key="storyFadeInOutTop" Name="storyFadeInOutTop" RepeatBehavior="Forever">
<DoubleAnimation From="0" To="1" Duration="00:00:01"
Storyboard.TargetName="txtTopCredit"
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
<DoubleAnimation From="10" To="0" Duration="00:00:01" BeginTime="00:00:01"
Storyboard.TargetName="blurTop"
Storyboard.TargetProperty="Radius">
</DoubleAnimation>
<DoubleAnimation From="0" To="10" Duration="00:00:01" BeginTime="00:00:05"
Storyboard.TargetName="blurTop"
Storyboard.TargetProperty="Radius">
</DoubleAnimation>
<DoubleAnimation From="1" To="0" Duration="00:00:01" BeginTime="00:00:06"
Storyboard.TargetName="txtTopCredit"
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
</Storyboard>
RepeatBehavior can also be set to a positive integer.
Hey all I am pretty new at creating a WPF in VS 2013. I am wanting this box to bounce & ease in/out.
The current code i have:
<BeginStoryboard x:Name="FadeInStoryBoard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.01" To="0.85" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="5" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.85" To="0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8" BeginTime="0:0:20" Name="boxFader">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
It currently looks very odd when showing due to it fading in/out. How can i take off the fading and just have it fade in when bouncing in/out?
Please try this,
<Rectangle Width="100"
Height="100"
VerticalAlignment="Bottom"
Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0:0:1"
Value="-200">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
I am developing a Windows phone game appsand I need to animate multiple buttons on certain event say Page_loaded. What i can achieve is that
<Storyboard Storyboard.TargetName="scaButton" Storyboard.TargetProperty="Angle" >
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
</Storyboard>
And in the XAML in a single button
<Button Height="100" Width="200" Margin="10,495,270,103" Content="{Binding Path=ListOfValues[0]}" RenderTransformOrigin="0.5,0.5" Click="Button_Click">
<Button.RenderTransform>
<ScaleTransform x:Name="scaButton" ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
</Button.RenderTransform>
</Button>
But the problem is how do I define it for Multiple buttons. I want all the buttons will flipAnimation at the sametime. But how do I achieve it?
please help.
In windows Phone <Style.Triggers> is also not present.
You can accomplish this by setting the TargetName inside the DoubleAnimation
<Grid.Resources>
<Storyboard x:Name="FlipButtonStory">
<DoubleAnimation Storyboard.TargetName="scaButton1"
Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
<DoubleAnimation Storyboard.TargetName="scaButton2"
Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
<DoubleAnimation Storyboard.TargetName="scaButton3"
Storyboard.TargetProperty="ScaleY"
From="-1" To="1"
BeginTime="0:0:0"
Duration="0:0:0.5"
AutoReverse="False" />
</Storyboard>
<Grid.Resouces>
You can begin the story by calling the BeginStoryboard method.
FlipButtonStory.BeginStoryboard();
I can fade in / out using the following code
<Storyboard x:Name="EnterStoryboard">
<FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
<FadeInThemeAnimation Storyboard.TargetName="PauseImage" />
</Storyboard>
To fadein:
EnterStoryboard.Begin();
To fadeout:
ExitStoryboard.Begin();
How can I fadein if the element is hidden from the beginning (I tried to set opacity=0 and visibility=collapsed).
EDIT:
based on AstiK solution, here's the new Storyboards (Instead of the built-in FadeInThemeAnimation / FadeOutThemeAnimation)
<Storyboard x:Name="EnterStoryboard">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:00.3" Storyboard.TargetName="Image"/>
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="0" Duration="00:00:00.3" Storyboard.TargetName="Image"/>
</Storyboard>
In your original approach, you should have kept Opacity ="0" and Visibility="Visible" from the beginning. I think you are looking for something like this:
<Grid Height="50" Width="100" Background="Red" Opacity="0">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<Storyboard >
<DoubleAnimation BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="00:00:03"/>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
use this:
<Storyboard x:Name="EnterStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PauseImage">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<FadeOutThemeAnimation Storyboard.TargetName="PauseImage" />
set to collapsed in the same way for ExitStoryboard
I want to show all my windows except Main page from right to left transition style.
I tried this
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2" FillBehavior="HoldEnd" />
</Storyboard>-->
<Storyboard >
<ThicknessAnimation Duration="0:0:.8" Storyboard.TargetProperty="Margin" To="-1200,0,-100,0" AccelerationRatio=".1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
The same if i put stackpanel trigger it's coming from left to right inside the window.
Like wise i need for showing window itself.
How to achieve this ?
A DoubleAnimation on the Left property should do the trick
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:.8" Storyboard.TargetProperty="Left" From="1920" To="0" AccelerationRatio=".1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>