Blazor Window Overview

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

The Window component displays a popup window, which shows users custom content. The component provides predefined titlebar actions such as close, minimize and maximize. Custom actions are also supported. Other Window features include modality, resizing, and position control.

Telerik UI for Blazor Ninja image

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

In this article:

Creating Blazor Window

  1. Use the TelerikWindow tag.
  2. Bind the Visible parameter to a bool property. It supports one-way and two-way binding.
  3. Add content to the WindowContent child tag.
  4. (optional) Add some title inside a WindowTitle tag. HTML markup and child components are supported, too.
  5. (optional) Add a Close action inside a <WindowActions> tag.

Basic Blazor Window

<TelerikWindow @bind-Visible="@WindowIsVisible">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        Window Content ...
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
</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. Learn more about the Window features, related to size and resizing.

Dragging

By default, users can move the Window on the page by dragging its titlebar. Learn more about how to use the Window's Draggable feature.

Responsiveness

The Window component can be responsive when the browser window size changes. Here is an example how to achieve responsive Window behavior. One way is to use the Width and Height parameters of the Window. Another option is to apply CSS styles.

Window Parameters

The following table lists the Window parameters, which are not discussed elsewhere in the component documentation. Also check the Window API for a full list of parameters and events.

Parameter Type and Default Value Description
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.
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.
ThemeColor string A predefined color scheme for the Window, especially the titlebar. Use the available members of the static class ThemeConstants.Window.ThemeColor.
Visible bool Defines if the Window is rendered and visible on the page.

Important Notes

The Telerik Window component renders as a child of the TelerikRootComponent at the root of the Blazor app. This is required, so it can show over the other page content, and have 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:

See Also

In this article