All geek questions in one place

WPF Stack Panel Visibility Animation

I have a stack panel with a button that, when pressed, makes the stack panel disappear. I want to animate the transition form visible hidden, but could not.

I looked around a bit and came across something similar to this:

<StackPanel Margin="80,60,60,80" Background="Gray"> <StackPanel.Triggers > <EventTrigger > <EventTrigger.Actions> <BeginStoryboard> <Storyboard TargetProperty="Visibility"> <DoubleAnimation Duration="0:0:5:0" From="Visible" To="Hidden"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </StackPanel.Triggers> <Button Name="buttonTop" Content="TOP" Margin="40,40,40,40" Click="buttonTop_Click" Width="131" /> </StackPanel>

which, of course, is not yet 100% there. Any ideas?

+6
source share
2 answers

you can use

 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/> </ObjectAnimationUsingKeyFrames>

This is pretty much the setter in the storyboard, where KeyTime describes the time when the value should be set. So, the full storyboard will be like this:

 <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:5.0"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:5.0" Value="{x:Static Visibility.Hidden}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard>

edit: How to make a storyboard trigger when a button is clicked:

 <Button Content="Button" HorizontalAlignment="Left" Margin="337,221,0,0" VerticalAlignment="Top" Width="75"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:5.0"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:5.0" Value="{x:Static Visibility.Hidden}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button>
+10
source

Visibiltiy is a discrete value - it is turned on or off, so the animation will still lead to a sudden disappearance, and not a gradual disappearance. Instead, you can animate the Opacity StackPanel from 1 to 0, and then animate Visibilty to Hidden (or Collapsed ) after that.

+4
source

Source: https://habr.com/ru/post/898820/

More articles:


All Articles