Blazor Window Overview

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

ninja-iconThe 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

  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.
  6. (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.

ParameterType and Default ValueDescription
Centeredbool
(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.
ClassstringThe custom CSS class of the <div class="k-window"> element. Use it to override theme styles. Here is a custom Window styling example.
CloseOnOverlayClickboolSets if a modal Window will close when the user clicks on the modal overlay that covers the rest of the page content.
ContainmentSelectorstringA 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.
DraggableboolSets if the Window allows moving.
FooterLayoutAlignWindowFooterLayoutAlign enum
(Stretch)
The alignment of the HTML elements in the WindowFooter. The possible options are Stretch, Start, End, and Center.
HeightstringThe height style of the <div class="k-window"> element. The parameter supports two-way binding.
LeftstringThe 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.
MaxHeightstringThe 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.
MaxWidthstringThe 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.
MinHeightstringThe minimum height of the Window during resizing or initial display.
MinWidthstringThe maximum width of the Window during resizing or initial display.
ModalboolDetermines if the Window covers the other page content with a semi-transparent overlay. Do not use modality with ContainmentSelector.
PersistContentboolDetermines if a minimized Window removes its content from the DOM (default) or hides it with CSS.
Resizablebool
(true)
Determines if the Window allows users to change its dimensions.
SizestringA 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.
StateWindowState enum
(Default)
The Window state can be Maximized, Minimized, or Default. The parameter supports two-way binding.
ThemeColorstringA predefined color scheme for the Window, especially the titlebar. Use the available members of the static class ThemeConstants.Window.ThemeColor.
TopstringThe 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.
VisibleboolDefines if the Window is rendered and visible on the page. The parameter supports two-way binding.
WidthstringThe 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.

MethodDescription
RefreshRedraws 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:

Next Steps

See Also