New to Telerik UI for Blazor? Start a free 30-day trial
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:
- Set the
Top
andLeft
parameters using@bind-Top
and@bind-Left
or theTopChanged
andLeftChanged
events. - Set both parameters to
string.Empty
to center the Window initially or any time afterwards. - 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();
}
}