Blazor Window Overview

This article provides basic information about the Blazor Window component and its core features.

The Window component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The Window component displays a popup with a title bar and shows custom content. The component provides predefined title bar actions, such as Close, Minimize, Maximize, and Restore. The Window component also supports custom actions, modality, resizing, dragging, and position control.

Creating Blazor Window

Use the TelerikWindow tag.
Bind the Visible parameter to a bool property. It supports one-way and two-way binding.
Add content to the WindowContent child tag.
(optional) Add some title inside a WindowTitle tag. HTML markup and child components are supported, too.
(optional) Add a Close action inside a <WindowActions> tag.
(optional) Add a WindowFooter tag to include custom content in the bottom section of the Window.

Basic Blazor Window

<TelerikWindow @bind-Visible="@WindowIsVisible">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        Window Content ...
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowFooter>
        Window Footer Content ...
    </WindowFooter>
</TelerikWindow>

<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Toggle window</TelerikButton>

@code {
    bool WindowIsVisible { get; set; }
}

Size

The Window can occupy a predefined size on the screen or expand automatically based on the content. By default, users can resize the Window. Read more about the Blazor Window size...

You can make the Window component responsive and allow it to adapt to different screen sizes and changes in the browser window. Here is an example that shows the two possible ways to achieve responsive Window behavior. The first method involves utilizing the Width and Height parameters of the component. The second method is to apply custom CSS styles.

Position

You can set the position of the Window with the Top and Left parameters. The component features a boolean Centered parameter, which is true by default when Top and Left are not set. The Window component also provides a ContainmentSelector parameter that can limit resizing and dragging within the boundaries of a specified container.

Read more about the Blazor Window position...

Actions

You can maximize, minimize, or close the Window through the action buttons in its titlebar. Read more about the Blazor Window action buttons...

Dragging

You can move the Window on the page by dragging its titlebar. Read more about the Blazor Window dragging option...

The Window can be modal and prevent interacting with the rest of the page until it closes. Read more about the Blazor Window Modal...

Events

The Window component fires events for visibility, state, size, and position changes. Use these events to respond to user actions. Read more about the Blazor Window Events...

Window Parameters

The following table lists the Window parameters. Also check the Window API for a full list of parameters, methods, and events.

Parameter	Type and Default Value	Description
`Centered`	`bool` (`true`)	Determines if the Window displays in the middle of the viewport. This parameter is ignored if `Top` or `Left` is set to a non-empty string.
`Class`	`string`	The custom CSS class of the `<div class="k-window">` element. Use it to override theme styles. Here is a custom Window styling example.
`CloseOnOverlayClick`	`bool`	Sets if a modal Window will close when the user clicks on the modal overlay that covers the rest of the page content.
`ContainmentSelector`	`string`	A CSS selector that points to a unique HTML element on the page. The Window will render inside the specified container. Window resizing and dragging will be restricted by the boundaries of the specified container. Do not use `ContainmentSelector` with modal Windows.
`Draggable`	`bool`	Sets if the Window allows moving.
`FooterLayoutAlign`	`WindowFooterLayoutAlign` enum (`Stretch`)	The alignment of the HTML elements in the `WindowFooter`. The possible options are `Stretch`, `Start`, `End`, and `Center`.
`Height`	`string`	The `height` style of the `<div class="k-window">` element. The parameter supports two-way binding.
`Left`	`string`	The `left` style of the Window relative to the browser viewport. The parameter supports two-way binding. If `ContainmentSelector` is set, the left position is with regard to the defined container.
`MaxHeight`	`string`	The maximum height of the Window during resizing or initial display. For example, if there is a lot of content and a fixed `Height` is not set.
`MaxWidth`	`string`	The maximum width of the Window during resizing or initial display. For example, if there is a lot of content and a fixed `Width` is not set.
`MinHeight`	`string`	The minimum height of the Window during resizing or initial display.
`MinWidth`	`string`	The maximum width of the Window during resizing or initial display.
`Modal`	`bool`	Determines if the Window covers the other page content with a semi-transparent overlay. Do not use modality with `ContainmentSelector`.
`PersistContent`	`bool`	Determines if a minimized Window removes its content from the DOM (default) or hides it with CSS.
`Resizable`	`bool` (`true`)	Determines if the Window allows users to change its dimensions.
`Size`	`string`	A predefined Window width. Use the string members of the static class `ThemeConstants.Window.Size` - `Small`, `Medium`, and `Large`. They translate to widths of `300px`, `800px` and `1200px`, respectively. If set, the `Width` parameter will take precedence over `Size`.
`State`	`WindowState` enum (`Default`)	The Window state can be `Maximized`, `Minimized`, or `Default`. The parameter supports two-way binding.
`ThemeColor`	`string`	A predefined color scheme for the Window, especially the titlebar. Use the available members of the static class `ThemeConstants.Window.ThemeColor`.
`Top`	`string`	The `top` style of the Window relative to the browser viewport. The parameter supports two-way binding. If `ContainmentSelector` is set, the top position is with regard to the defined container.
`Visible`	`bool`	Defines if the Window is rendered and visible on the page. The parameter supports two-way binding.
`Width`	`string`	The `width` style of the `<div class="k-window">` element. The parameter supports two-way binding.

Window Reference and Methods

The Window methods are accessible through its reference.

Method	Description
`Refresh`	Redraws the component.

Get a reference to the Window and use its Refresh method.

<TelerikButton OnClick="@OpenWindow">Open Window</TelerikButton>

<TelerikWindow @ref="WindowRef" @bind-Visible="@WindowVisible">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <p role="status">Current count: @CurrentCount</p>
        <TelerikButton OnClick="IncrementCount">Increment Count</TelerikButton>
    </WindowContent>
</TelerikWindow>

@code {
    private TelerikWindow? WindowRef { get; set; }

    private bool WindowVisible { get; set; }

    private int CurrentCount { get; set; }

    private void IncrementCount()
    {
        CurrentCount++;

        WindowRef?.Refresh();
    }

    private void OpenWindow()
    {
        WindowVisible = true;
    }
}

Important Notes

When ContainmentSelector is not set, the Telerik Window component renders as a child of the TelerikRootComponent at the root of the Blazor app. This placement ensures that the Window can show over all the other page content in all scenarios and have a correct position.

In Blazor, however, the render tree structure may be important. In some cases, the special Window placement may put you in one of the following situations: