I've seen posts on here on how to create an Image slide-in effect, I am however currently trying to animate a TextBlock in a Windows Phone 8 project to "Slide-in and fade-in" both at the same time, just to give my app that "snazzy" feel. My current code targets the StoryBoard.Target Property for Opacity and that works, I'm just confused on how to animate both the opacity and I'm guessing for the "slide-in" effect it would be the "X" property of the TextBlock, both at the same time. The code I have currently for Opacity is as follows:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="Txt2"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:1"
Completed="DoubleAnimation_Completed_1"/>
</Storyboard>
Nice and simple, now how would I combine this with a "Slide-in" movement animation, could anyone guide me as to what changes I would need to make to the code to achieve the desired effect as stated previously? Any written out samples would be a big bonus.
Thanks in advance.
It can be tricky to animate a "slide-in", depending on the layout -- the problem is that you really need to animate X from "width of container", which can be harder than it sounds. But often it's good-enough just to hard-code a value.
So, if you have a Canvas, then you can simply animate Canvas.X. Otherwise, you'll have to add a TranslateTransform to the target element, and animate its X property.
<Grid>
<TextBlock x:Name="Txt2" Text="foo">
<TextBlock.RenderTransform>
<TranslateTransform x:Name="translateTransform" X="500" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
Then add the second animation to the Storyboard:
<Storyboard x:Name="StoryBoard1">
<DoubleAnimation Storyboard.TargetName="Txt2"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:1"
Completed="DoubleAnimation_Completed_1"/>
<DoubleAnimation Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
From="500" To="0" Duration="0:0:1"/>
</Storyboard>
Related
After I click a button, I'd like my card to fade in, and then after a set time fade back out. Unfortunately, I'm new to C# / WPF, and don't know how I would go about doing this. Currently I'm using MaterialDeisgn and Dragablz aswell.
I tried this solution, however it just caused my program to crash. Is someone able to help me with this? Since I'm not sure at all where to go with this, I've atatched the XAML for the Card I want to fade in / out itself (it would be triggered by clicking a different button).
EDIT FOR CLARITY: I'm trying to make it so that it starts hidden, and when an if statement in the MainWindow.xaml.cs is true, fades in, fades out after some time (maybe a second?), and then stays hidden until triggered again.
<materialDesign:Card
x:Name="userFound"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{DynamicResource PrimaryHueMidBrush}"
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
Width="81"
Padding="8"
materialDesign:ShadowAssist.ShadowDepth="Depth2"
UniformCornerRadius="6" Margin="-60,0,0,249">
<TextBlock
TextWrapping="Wrap">
User Found!
</TextBlock>
</materialDesign:Card>
Thank you so much for any help! I'm 100% lost, so anything helps.
This is modified from https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.animation.timeline.begintime?view=netframework-4.8#System_Windows_Media_Animation_Timeline_BeginTime and https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/how-to-animate-the-opacity-of-an-element-or-brush
<Button>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetName="userFound" Storyboard.TargetProperty="(Card.Opacity)" From="0" To="1" Duration="0:0:0.5"/> //Fade in taking half a second
<DoubleAnimation BeginTime="0:0:1.5" Storyboard.TargetName="userFound" Storyboard.TargetProperty="(Card.Opacity)" From="1" To="0" Duration="0:0:0.5"/>//Fade out takes half a second
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
<Button>
The above would make your card fully opaque in 1/2 a second then waits 1 full second from when the card was fully opaque and fade out meaning all animation complete in 2 seconds
remove the button triggers and add the storyboard to page resources in then add a x:key so it can be called from code behind
<Page.Resources>
<Storyboard x:Key="Test">
<DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5"/> //Fade in taking half a second
<DoubleAnimation BeginTime="0:0:1.5" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5"/> //Fade out takes half a second
</Storyboard>
</Page.Resources>
Then like they did on WPF Fade Out on a control do this or something similar in the click event
if(truecondition)
{
((Storyboard)this.Resources["Test"]).Begin(userFound);
}
this is a way to do it but there are better ways. I can not currently think of them but i know they exist.
I'm trying to animate the width and height property of an Ellipse element in XAML. I found a few examples online, but none of them seems to work.
I'm sure I'm missing only something little and stupid. Here my animation in xaml:
<Page.Resources>
<Storyboard x:Name="PressFormLogin" Storyboard.TargetName="OuterEllipse">
<DoubleAnimation Storyboard.TargetProperty="Width" From="259.0" To="149.0" Duration="0:0:5" />
<DoubleAnimation Storyboard.TargetProperty="Height" From="259.0" To="149.0" Duration="0:0:5" />
</Storyboard>
</Page.Ressources>
The Ellipse element in XAML:
<Ellipse x:Name="OuterEllipse" Width="259" Height="259" Fill="#FF5AA1BA" />
And how I try to start the animation in the code behind:
PressFormLogin.Begin();
It's the first time that I'm using a animation in one of my applications, it would be nice if someone could give me a push in the right direction.
Try to set EnableDependentAnimation="True" for your DoubleAnimation. See EnableDependentAnimation on MSDN.
Here my StoryBoard
<Storyboard x:Name="SB_BattleSound">
<DoubleAnimation
x:Name="BattleSound"
Duration="0:0:0.5"
Storyboard.TargetProperty="(MediaElement.Volume)"
Storyboard.TargetName="battle"
d:IsOptimized="True">
</DoubleAnimation>
</Storyboard>
Here the MediaElement
<MediaElement x:Name="battle" Source="Assets/Sounds/battle.mp3" Volume="0.0" IsLooping="True" AutoPlay="True" Height="0" Width="0" />
And here the fade start
BattleSound.From = 0.0;
BattleSound.To = 0.8;
SB_BattleSound.Begin();
No errors but also no effect. I guess there is something wong with the target property or not?
You need to set EnableDependentAnimation="True" on your animation. By default only animations which the system can tell won't cause a dependency between the rendering and UI threads will run. Animating properties which aren't explicitly known to be safe is disabled unless the app explicitly enables them.
See Dependent and independent animations in the Storyboarded animations documentation on MSDN for more details.
This works as I think you want:
<Storyboard x:Name="SB_BattleSound">
<DoubleAnimation
x:Name="BattleSound"
Duration="0:0:0.5"
Storyboard.TargetProperty="(MediaElement.Volume)"
Storyboard.TargetName="battle"
EnableDependentAnimation="True"
d:IsOptimized="True">
</DoubleAnimation>
</Storyboard>
I'm stuck with my school assignment and it should be ready soon, so I hope someone could help me. I've been searching for a solution for hours. I'm sure this is a very simple thing, but I just can't figure it out.
So I'm trying to make a label move in a specific area so that it bounces from "borders" (an area defined with From/To) and takes a new direction. So far I have only managed to make it move up and down, left and right or from corner to corner, but not in every direction. I have no idea how I'm supposed to implement this. This is my xaml code:
<Canvas Height="60" HorizontalAlignment="Left" Margin="138,0,0,0" Name="canvas1" VerticalAlignment="Top" Width="227">
<Label Content="GKO" Height="40" Name="labelGKO" Canvas.Left="19" Canvas.Top="6" Width="61" FontSize="8">
<Label.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard TargetName="labelGKO" RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Left)"
From="0" To="180" Duration="0:0:1"/>
<DoubleAnimation
Storyboard.TargetProperty="(Canvas.Top)"
From="0" To="50" Duration="0:0:1"
AutoReverse="True" />
<DoubleAnimation
Storyboard.TargetProperty="(Label.FontSize)"
To="24" Duration="0:0:1"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Label.Triggers>
</Label>
</Canvas>
This makes the label move from up left corner to the bottom right and then up. Then it starts from the beginning. It is clear I don't understand the logic behind it. Should I do multiple Storyboards or DoubleAnimations? Or can I somehow change the course of the label during one animation? How can I tell the label where exactly to go after it has reached a border?
I have a real trouble with WPF StackPanel - I need to make it animated not only for scrolling its content horizontaly (this is ok more or less), but also I must make it expand/collapse (animated) by pressing some button on the containing window.
I have tried a lot of animated expander controls (for example http://www.codeproject.com/KB/WPF/AnimatingExpander.aspx) but they have overloaded with functionality (and some artifacts with contained controls) and not suitable for my task.
So the question is how to make SIMPLE horizontal oriented StackPanel to expand/collapse with animation by button click?
The simplest approach is to start an animation on a ToggleButton.Checked or .Unchecked event:
<StackPanel x:Name="MyStackPanel">...</StackPanel>
...
<ToggleButton Content="Click Me">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyStackPanel"
Storyboard.TargetProperty="Width"
To="0"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyStackPanel"
Storyboard.TargetProperty="Width"
To="200"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
Why not adding a storyboard and double animation for stackpanel's width. By clicking the button you can start the animation in code or by defining event triggers.