Proprietà XAML per avviare un'animazione storyboard sul carico
-
21-09-2019 - |
Domanda
Bene, come suggerisce il titolo:
Ho uno storyboard e voglio che sia di animazione per iniziare senza l'intervento di codice. La ragione di questo requisito è che io sono il targeting Silverlight embedded e io sono troppo pigro in questo momento per ricompilare la mia domanda pure. E, venendo a pensarci bene, sarà più facile cambiare l'animazione solo in futuro.
La XAML ha una proprietà per rendere la corsa storyboard non appena i carichi XAML?
Soluzione
È possibile utilizzare l'evento Loaded per iniziare la storyboard
Vedere MSDN per un esempio: Storyboard (Silverlight)
Raccolto l'esempio da 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>
L'oggetto Rectangle ha proprietà. Nella proprietà Trigger abbiamo definito un EventTrigger che il fuoco quando si verificherà questo evento. Abbiamo scelto l'evento Rectangle.Loaded, il che significa che si attiva quando è caricato;)
.Si aggiunge una proprietà BeginStoryboard per iniziare il nostro storyboard e aggiungere uno storyboard. Questa animazione userà una DoubleAnimation sulla proprietà Opacità, il che significa che in una durata di 5 secondi, l'opacità gradualmente dissolvenza a zero, e viceversa (proprietà AutoReverse) e lo farà sempre (la proprietà RepeatBehaviour).
Altri suggerimenti
<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>