Propriedade XAML para iniciar uma animação de storyboard em carga
-
21-09-2019 - |
Pergunta
Bem, como o título sugere:
Eu tenho um storyboard e quero que seja animação começar sem a intervenção do código. A razão para esse requisito é que estou direcionando o Silverlight incorporado e estou muito preguiçoso agora para recompilar meu aplicativo também. E, pensando bem, será mais fácil alterar a animação apenas no futuro.
O XAML tem uma propriedade para fazer o storyboard funcionar assim que o XAML carregar?
Solução
Você pode usar o evento carregado para iniciar seu storyboard
Veja o MSDN para um exemplo:Storyboard (Silverlight)
Escolheu o exemplo do msdn:
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
x:Name="MyAnimatedRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity.
This is the important part, the EventTrigger which will start our animation -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
O retângulo do objeto possui propriedades. Na propriedade Giggers, definimos um EventTrigger que disparará quando esse evento ocorrer. Escolhemos o evento Rectangle.Loaded, o que significa que ele disparará quando carregado;).
Adicionamos uma propriedade BeginStoryboard para iniciar nosso storyboard e adicionar um storyboard. Essa animação usará uma Doubleanimation na propriedade Opacity, o que significa que, em uma duração de 5 segundos, a opacidade desaparecerá gradualmente para zero e voltar (propriedades automática do AutoReverse) e fará isso para sempre (a propriedade Repetbehaviour).
Outras dicas
<UserControl x:Class="SOSMVVM.AniM11"
xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
xmlns:d='http://schemas.microsoft.com/expression/blend/2008'
xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'
mc:Ignorable='d'
d:DesignWidth='640'
d:DesignHeight='480'>
<StackPanel Margin="5">
<Rectangle Name="rect3" Fill="Blue" Margin="2" Width="20"
Height="20" HorizontalAlignment="Left" />
<Button Margin="2,20,0,0" HorizontalAlignment="Left"
Content="Start Animations" Width="100">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="rect3" Storyboard.TargetProperty="Width"
From="20" To="400" Duration="0:0:10" SpeedRatio="0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</UserControl>