Практическое руководство. Анимация контекстного меню
В этом примере показаны два способа анимировать Popup элемента управления.
Пример
В следующем примере задается PopupAnimation свойство в значение Slide, чего Popup для «слайд в» когда он появится.
Для смены Popup, этот пример назначает RotateTransform для RenderTransform свойство Canvas, который является дочерним элементом элемента Popup.
Для корректной работы преобразования, в примере необходимо присвоить AllowsTransparency свойства true. Кроме того Margin на Canvas содержимого необходимо указать достаточно места для Popup для поворота.
<Popup IsOpen="{Binding ElementName=myCheckBox,Path=IsChecked}"
PlacementTarget="{Binding ElementName=myCheckBox}"
AllowsTransparency="True"
PopupAnimation="Slide"
HorizontalOffset="50"
VerticalOffset="50"
>
<!--The Margin set on the Canvas provides the additional
area around the Popup so that the Popup is visible when
it rotates.-->
<Canvas Width="100" Height="100" Background="DarkBlue"
Margin="150">
<Canvas.RenderTransform>
<RotateTransform x:Name="theTransform" />
</Canvas.RenderTransform>
<TextBlock TextWrapping="Wrap" Foreground="White">
Rotating Popup
</TextBlock>
</Canvas>
</Popup>
В следующем примере показан как Click событие, возникающее при Button нажатии триггеры Storyboard , запускает анимацию.
<Button HorizontalAlignment="Left" Width="200" Margin="20,10,0,0">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="theTransform"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:5" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
Click to see the Popup animate
</Button>