How to: Animate a Popup
This example shows two ways to animate a Popup control.
Example
The following example sets the PopupAnimation property to a value of Slide, which causes the Popup to "slide-in" when it appears.
In order to rotate the Popup, the Popup content references a RotateTransform. This example specifies the transform by setting the RenderTransform property on the Popup child element.
For the transform to work correctly, the example must set the AllowsTransparency property to true. In addition, the Margin on the Canvas content must specify enough space for the Popup to rotate.
<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>
The previous example sets the PlacementTarget to a CheckBox that is part of a BulletDecorator. The Popup appears when you select the CheckBox.
The following example defines the BulletDecorator.
<BulletDecorator Margin="20,20,0,0">
<BulletDecorator.Bullet>
<CheckBox Name="myCheckBox"/>
</BulletDecorator.Bullet>
<TextBlock>Select CheckBox to see Popup</TextBlock>
</BulletDecorator>
The following example shows how a Click event, which occurs when a Button is clicked, triggers the Storyboard that starts the animation.
<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>
For the complete sample, see Animated Popup Sample.
See Also
Reference
RenderTransform
BulletDecorator
RotateTransform
Storyboard
Popup