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.
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 using WPF Storyboard to slide my window from the right corner of the screen and then to hide it again.
I have three problems:
If you catch window that is currently sliding right it slows down.
Sometimes(very rarely, so it's hard to find the reason) window only hides its half and animation stops. If you enter the window by a mouse and leave again it hides the rest of it.
Sometimes when I reach the edge of the screen to show the window nothing happens for a while and then window slides very fast to the correct position.
MouseOnEdge is my custom event which is fired when mouse reaches the right corner of the screen.
That's my XAML code:
<local:CustomWindow.Triggers>
<EventTrigger RoutedEvent="local:CustomWindow.CustomMouseLeave">
<BeginStoryboard>
<Storyboard Name="SlideWindowOff">
<DoubleAnimation
Storyboard.TargetName="ShellViewWindow" Storyboard.TargetProperty="Left"
Duration="0:0:0.75"
AccelerationRatio="0.5"
From="{Binding WindowLeft}"
To="{Binding WindowLeftHidden}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="local:CustomWindow.MouseOnEdge">
<BeginStoryboard>
<Storyboard Name="SlideWindowOn">
<DoubleAnimation
Storyboard.TargetName="ShellViewWindow" Storyboard.TargetProperty="Left"
Duration="0:0:0.75"
AccelerationRatio="0.5"
From="{Binding WindowLeft}"
To="{Binding WindowLeftUnhidden}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</local:CustomWindow.Triggers>
Why is something like this happening? The main problem here is when storyboard hides only half of the window and it's going to be the biggest problem for users.
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'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 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.