Popup manager helps to show a framework element control or page as a popup with single statement. The popup can be align left, top, right, bottom or center to the triggering element. You can also define the margin around the triggering element.
StoreAppLib.Controls
To use PopupManager in your project, add reference to the StoreAppLib project or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.
Add the following code inside the tap event of the triggering source to show a framework element in a popup. Use PopupAlignment enum to set the popup position relative to the triggering source.
private void OnClickMeTapped(object sender, TappedRoutedEventArgs e)
{
//// Your custom control instance
PopupChild
content = new PopupChild();
//// Open the control in a popup aligning to bottom right of the triggering control (sender)
PopupManager.Open(sender as FrameworkElement, content, PopupAlignment.BottomRight);
//// The below code give 5 pixel bottom margin
//// PopupManager.Open(sender as FrameworkElement, content, PopupAlignment.BottomRight, new Thickness(0, 0, 0, 5));
}
Following are the PopupAlignment values.
Left
: Horizontally align left of popup and triggering source, and vertically align to center of triggering source. Right
: Horizontally align right of popup and triggering source, and vertically align to center of triggering source. Center
: Place popup center of triggering source. TopLeft
: Horizontally align left of popup and triggering source, and vertically align top of triggering source. Top
: Horizontally align center of popup and triggering source, and vertically align top of triggering source. TopRight
: Horizontally align right of popup and triggering source, and vertically align top of triggering source. BottomLeft
: Horizontally align left of popup and triggering source, and vertically align bottom of triggering source. Bottom
: Horizontally align center of popup and triggering source, and vertically align bottom of triggering source. BottomRight
: Horizontally align right of popup and triggering source, and vertically align bottom of triggering source. TowardsLeft
: Horizontally place left to triggering source, and vertically align center of triggering source. TowardsRight
: Horizontally place right to triggering source, and vertically align center of triggering source.