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>
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'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'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 to enlarge a single picture in WPF. The problem is that after the operation the picture is shown only a part.
And I have to make it enlarged gradually. How can I do it?
I think that you modified image stretch property to none.
Set Height and Width attributes:
<Image
Height="165"
HorizontalAlignment="Left"
Name="image1" Stretch="Fill"
VerticalAlignment="Top"
Width="339"
Source="[your source]" />
In [your source] you will put your image's source.
If your image element is showing only part of the picture, you can change the Stretch property to either Uniform, which preserves the aspect ratio, or Fill, which does not.
You can use a ScaleTransform for the RenderTransform property to enlarge the picture without affecting the layout of your application or a ScaleTransform for the LayoutTransform property to enlarge the picture so your layout is affected. ScaleTransform provides two important properties, ScaleX and ScaleY, which affect how the image is resized in its X and Y axes, respectively. To apply this effect gradually, you must use a DoubleAnimation. You don't specify when you want to trigger the enlargement, so for the purpose of example, I'll assume you want the image to be enlarged when the user mouses over the image. The provided code also gradually decreases the image size when the user mouses out of the image. To change when the increase and decrease of size occurs, change the RoutedEvent property of the two EventTriggers.
<Image Stretch="Uniform" Source="Penguins.jpg">
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scale" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="scale" To="1.5"
Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="scale" To="1.5"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="scale" To="1"
Duration="0:0:1" />
<DoubleAnimation Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="scale" To="1"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
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.