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.
The HeaderText, BodyText, and FooterText properties specify text displayed in the Window elements.
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
- Press Escape. You can set the CloseOnEscape property to
falseto disable this capability.
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. Users can drag the size grip to change the window's width and height. 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.
Enable the AllowDrag property to allow users to drag the Window to a new position. Handle DragStarted and DragCompleted events to process drag actions (save and load a current position).