How To Center Window Programmatically

Environment

Product

Window for Blazor

Description

This knowledge base article answers the following questions:

• How can I programmatically center a Telerik Window?
• How do I reset a Telerik Window to its default position?
• How can I position a Telerik Window in the center of the viewport?
• How do I dynamically adjust the Telerik Window position?

Solution

To center a Telerik Window programmatically, follow these steps:

1. Set the Top and Left parameters using @bind-Top and @bind-Left or the TopChanged and LeftChanged events.
2. Set both parameters to string.Empty to center the Window initially or any time afterwards.
3. Call the Refresh() method of the Window component instance to re-render the Window at the new position.

Center the Telerik Blazor Window Programmatically

<TelerikWindow Visible="true"
               @bind-Top="@Top"
               @bind-Left="@Left"
               Width="200px"
               Height="200px"
               @ref="WindowRef">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        <TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>
    </WindowContent>
</TelerikWindow>

@code {
    private TelerikWindow? WindowRef { get; set; }
    private string Top { get; set; } = "10%";
    private string Left { get; set; } = "10%";

    private void CenterWindow()
    {
        Top = Left = string.Empty;
        WindowRef?.Refresh();
    }
}

See Also

• Window Position
• Telerik Window for Blazor - Overview