Our Blazor Window component allows you to display a non-modal window in your application. You can use it to display additional information or task progress, implement search dialogs, gather information from users, or ask for confirmation.
The window consists of three elements: header, body, and footer. The footer is initially hidden. You can set the ShowFooter property to true to display the footer.
To show or close the Window in code, implement two-way binding for the Visible property. You can also use the ShowAsync, ShowAtAsync, and CloseAsync methods.
Users can close a Window in the following ways:
- Click the Close button. The button is shown when the ShowCloseButton is set to
true. - Press Escape. You can set the CloseOnEscape property to
falseto disable this capability.
The HeaderText, BodyText, and FooterText properties specify text displayed in the Window elements. You can also customize the Window element's content and appearance. Refer to the following topic for more information: DxWindow - Content and Appearance.
The Window component also supports keyboard navigation. Press the Tab key or Shift+Tab to move focus to the next or previous focusable element inside window and press the Esc key to close the window
You can use the following ShowAsync method overloads to show the Window at the specified position:
- ShowAtAsync(Double, Double, CancellationToken) — Asynchronously shows the Window at the mouse click position.
- ShowAtAsync(ElementReference, CancellationToken) — Asynchronously shows the Window over the element specified by ElementReference.
- ShowAtAsync(Point, CancellationToken) — Asynchronously shows the Window at the specified point.
- ShowAtAsync(String, CancellationToken) — Asynchronously shows the Window over the element specified by a selector.
The Width and Height properties set the Window's initial size.
Enable the AllowResize property to allow users to change the Window's size. A user can drag window edges and corners. You can handle ResizeStarted and ResizeCompleted events to process resize actions.
You can also use the following properties to restrict changes to the component size: MinWidth, MaxWidth, MinHeight, MaxHeight.
The PositionX and PositionY properties set the Window's initial position.
Activate the AllowDrag option to allow users to drag the Window by its header to a new position. If you disable the AllowDragByHeaderOnly option, users can start a drag-and-drop operation in any element – header, body, or footer.
Handle DragStarted and DragCompleted events to process drag-related operations (save and load the current position).
Our Blazor Window component can display multiple windows simultaneously. You can use the ShowAtAsync method overloads to open windows in a specific sequence/order. Users can switch between windows and interact with associated content as necessary. When a window is focused, it overlaps other visible windows.