To show or close the Popup in code, implement two-way binding for the Visible property. Users can choose from the following options to close the Popup: click the Close button in the header, click outside the Popup's boundaries, or press Escape.
If you specify the HeaderText, BodyText, and FooterText properties, the Popup component uses predefined appearance settings. To customize the window's content and appearance, you can use the following templates:
- HeaderContentTemplate, BodyContentTemplate, FooterContentTemplate — This template replaces the footer's default content but keeps the predefined space between the footer's content area and border.
- HeaderTemplate, BodyTemplate, FooterTemplate — Allow you to customize the entire area of Popup elements. These templates change the default element rendering, including paddings, scroll bar, and inner content alignment.
You can handle the following events to process show and close actions:
- Showing / Closing — Occur before the Popup is displayed/closed and allow you to cancel these actions.
- Shown / Closed — Occur after the Popup is displayed/closed.
In this demo, a second Popup component appears if you do not select the checkbox in the first Popup.
Enable the AllowResize property to allow users to change Popup size as requirements dictate. A user can drag window edges or its corners. You can handle ResizeStarted and ResizeCompleted events to process resize actions.