Develop Reference

How to make a card fade in and out C# / WPF / MaterialDesign

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.

Invoking animation in a different xaml control on button click WITHOUT resorting to ViewModels

I have the following xaml:
<Button Content="{Binding Header}" Background="Blue" Name="PanelHeader">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Stackpanel"
Storyboard.TargetProperty="Height"
From="0" To="100" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
I want to move the storyboard animation to the stack panel declaration and simply invoke that animation from the button click.
Most examples I've found resort to using the viewmodel or other codebehind interjections.

this example doesn't use code behind nor ViewModel
http://www.java2s.com/Tutorial/VB/0290__Windows-Presentation-Foundation/StartandstopanAnimationwithButtonactions.htm

correct way to animate objects in wpf and c#

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>

Start Animation While Button IsPressed in WPF

I have this DoubleAnimation in my XAML that scrolls a ScrollViewer up and down depending on a button which is pressed. I'm trying to switch it to animate (scroll) indefinitely when the button is pressed and stop animating when the button is released. I cant seem to figure out how to do this in XAML. I'd like to avoid doing this in code because I'm using an MVVM pattern and have been pretty good about separating the UI from the logic. Here's my animation code
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="ScrollUp">
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard Duration="0:0:1">
<DoubleAnimation
Storyboard.TargetName="ScrollViewerView"
Storyboard.TargetProperty="(wpf:ScrollViewerBinding.VerticalOffset)"
To="{Binding NewVerticalScrollPositionUp}">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="ScrollDown">
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard Duration="0:0:0:1">
<DoubleAnimation
Storyboard.TargetName="ScrollViewerView"
Storyboard.TargetProperty="(wpf:ScrollViewerBinding.VerticalOffset)"
To="{Binding NewVerticalScrollPositionDown}">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
When I press the down button, it animates, scrolling the ScrollViewer down. The same goes for when I press the up button. But I cant figure out a way to make the animation keep going while the button is down.

Use a RepeatButton instead of a regular Button. A RepeatButton functions like the arrow buttons on a ScrollBar and continues to fire at a fixed interval for as long as it is pressed. Note that its Interval property is measured in milliseconds.

Create a new animation which runs continuously and start it on the button press. Then stop the continuous animation on the button release.

Windows Phone 8 - Creating a "Fade-in and slide-in" animation

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>