Silverlight’s Popup control does not close automatically. DevComponents.Silverlight.Controls.AutoClosePopup closes automatically in response to any mouse left or right button down on a region of the Silverlight application that is not covered by the popup’s child. It also closes, by default, in response to a mouse left button up event over the popup’s child, if the event argument’s Handled property is set to true. (For example, the popup closes if a button within it is clicked, since System.Windows.Controls.Button sets the event arguments Handled property to true.)

The content property is Child, which must be a UIElement.

AutoClosePopup.IsOpen gets or sets whether the popup is open.

AutoClosePopup has other features that are not included in Silverlight’s built-in popup control, including advanced placement and opening/closing animations.

Placement of the Popup

An AutoClosePopup can be placed relative to a specific point (determined by the public property PlacementPosition) or relative to an element in the visual tree (set via the property PlacementTarget.) To specify which, use property AutoClosePopup.Placement. Placement is a value of type System.Windows.Controls.Primitives.PlacementMode, an enumeration with the following values:

  • Mouse – the popup is placed at the position (in absolute coordinates) indicated by the property PlacementPosition, which must be set prior to the popup opening.
  • Top – the popup is placed on top of the target element.
  • Left – the popup is placed to the left of the target element.
  • Bottom – the popup is placed below the target element.
  • Right – the popup is placed to the right of the target element.
  • Relative – the popup is positioned relative to the placement target’s top left corner.
  • Center – the popup is centered at the center of the placement target.

In all cases, properties HorizontalOffset and VerticalOffset can be used to adjust the position by a number of pixels.

For situations where the popup content might be rendered past the bounds of the Silverlight application, the properties KeepInHorizontalBounds and KeepInVerticalBounds are available.  How these are used depends on the value of Placement. If Placement = PlacementMode.Mouse, the preferred location is such that the top left corner of the content is aligned with the placement position. If in this position the content extends towards the right beyond the application bounds, and KeepInHorizontalBounds = true, then an attempt will be made to position the content so that its top right corner is aligned with the placement position. If popup content still does not fit within the bounds of the application, its position is adjusted so that it does, if possible. The logic is similar in the case where the popup content extends beyond the bottom of the application bounds and KeepInVerticalBounds = true.

When Placement is other than Mouse the best that can be done is to attempt to keep the content in view by adjusting it’s position so that the edge that was out of view is positioned flush with the application bounds over which it extends.

Opening and Closing Animations

Animations can be defined which are started when the popup opens and as it is closing using OpeningAnimation and ClosingAnimation properties, respectively. Both properties are of type Storyboard. If the timelines in the storyboard do not have a value set for Storyboard.TargetName, then they’re target is set to equal the popup’s Child. Here is an example of a popup with a closing animation:

<ctrls:AutoClosePopup Name="Popup">
    <ctrls:PopupMenu.ClosingAnimation>
        <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.4" To="0">
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </ctrls:PopupMenu.ClosingAnimation>                            
</ctrls:PopupMenu>

Related posts:

  1. ContextMenu Control
  2. SuperToolTip Control
  3. Customizing Appointment Views in Silverlight Schedule
  4. Navigation Pane Quick Start Guide (Silverlight)
  5. Dynamic Resources