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?
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 want to create a animation with WPF, but I dont know the right way. The animation should be async. The animation should be a rectangle that grows (height)
. Is a canvas object for something like that a good choose?
Maybe someone of you can give me a helpfull link. I don't want any code snippets.
Links :
Animation Overview : MSDN
Animation How-To : MSDN
In your case, problem is "Height grows downward or both up/down (50%) each". To make Rectangle grow only upwards poses few small challenges.
How to animate an attached property like Canvas.Top. ( Approach 1)
How to animate a Scale Transform. ( Approach 2 )
Animating Attached-Property
Animating Transforms
I am posting a working code using Canvas (Approach 1).
<Canvas Margin="482,125,206,10" Background="MediumSeaGreen">
<Rectangle x:Name="Rect" Fill="#FF030315" Height="100" Stroke="Black" Width="42" Canvas.Top="222">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard x:Name="Sb">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="Rect" By="-100" Duration="0:0:5"/>
<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="Rect" By="100" Duration="0:0:5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<PauseStoryboard BeginStoryboardName="Sb" />
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
I wish to change the actual content of my textblock. I know I can change it by using textblock.text = "new text" when an event is triggered. However, is there a way to make it change gradually, i.e. with a fade animation? I tried using Visual Studio Blend, and managed to make objects scale, and rotate, but I have not figured out how to make content of an element change/ apply animation when content of the element changes.
Here is a small example, which consists of a TextBox and a TextBlock. Each time you change the value in the TextBox, the content of the TextBlock fades out and in.
<StackPanel>
<TextBox x:Name="txtSampleText" Margin="10" Text="This is a Sample Text"></TextBox>
<TextBlock x:Name="tbMessage" Text="{Binding ElementName=txtSampleText, Path=Text, NotifyOnTargetUpdated=True}" Margin="10">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1" From="1.0" To="0.0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1" From="0.0" To="1.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</StackPanel>
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>
I have a storyboard inside a data template. I want to start this only for a certain condition. In my case whenever the no. of seconds in the clock is 59 the storyboard should start.
Below you can see the storyboard as well as the control to which the animation is applied :
<!-- Minute Hand -->
<Image
Source="{Binding Time, Converter={StaticResource MinHandBackground}}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Canvas.Left="118"
Canvas.Top="118">
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform
X="-11"
Y="-90" />
<RotateTransform
x:Name="minHandTransform" />
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger
RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard
x:Name="myStoryboard2">
<DoubleAnimation
x:Name="minuteAnimation"
Storyboard.TargetName="minHandTransform"
Storyboard.TargetProperty="Angle"
Duration="0:0:1"
From="{Binding Time, Converter={StaticResource minuteHandTransform}}"
To="{Binding Time, Converter={StaticResource minuteHandToTransform}}"
RepeatBehavior="1x">
<DoubleAnimation.EasingFunction>
<SineEase
EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Currently the BeginStoryboard starts it immediately on load. I want to start it when the number of seconds is 59 but i cant access the storyboard in the back end as the control is within a data template.
Can anyone please help me out here.....i have been banging my head about this problem for a lot of days now!!
The easiest way would be to move the entire contents of the DataTemplate to a separate UserControl so you would get easier access to all named elements.