Свойство XAML для запуска анимации раскадровки при загрузке
-
21-09-2019 - |
Вопрос
Ну, как следует из названия:
У меня есть раскадровка, и я хочу, чтобы ее анимация запускалась без вмешательства кода.Причина этого требования в том, что я ориентируюсь на Silverlight Embedded, и мне сейчас лень перекомпилировать свое приложение.И, если подумать, изменить анимацию будет проще только в будущем.
Есть ли у XAML свойство запускать раскадровку сразу после загрузки xaml?
Решение
Вы можете использовать событие Loaded, чтобы запустить раскадровку.
См. пример MSDN:Раскадровка (Silverlight)
Выбрал пример из 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>
Объект Rectangle имеет свойства.В свойстве Triggers мы определили EventTrigger, который сработает при возникновении этого события.Мы выбираем событие Rectangle.Loaded, что означает, что оно сработает при загрузке ;).
Мы добавляем свойство BeginStoryboard, чтобы начать раскадровку, и добавляем раскадровку.В этой анимации будет использоваться DoubleAnimation для свойства Opacity, что означает, что в течение 5 секунд непрозрачность будет постепенно уменьшаться до нуля и обратно (свойство AutoReverse), и это будет происходить вечно (свойство RepeatBehaviour).
Другие советы
<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>