This documentation is archived and is not being maintained.

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

Show: