The Window offers two ways for you to control its position:
Leftproperties (read more about the possible values in the Dimensions article)
<TelerikWindow Top="50px" Left="100px" Visible="true"> <WindowTitle> <strong>The Title</strong> </WindowTitle> <WindowContent> I am <strong>100px</strong> away from the left edge of the <strong>app</strong> container, and <strong>50px</strong> away from its top. </WindowContent> </TelerikWindow>
Centered property adds a CSS class that sets the window position to
top: 50%; left: 50%; transform: translate(-50%, -50%);. This keep is it centered if the viewport size changes.
Left properties are set, they will take precedence, because they render as rules in an inline
<TelerikWindow Centered="true" Visible="true"> <WindowTitle> <strong>The Title</strong> </WindowTitle> <WindowContent> I am <strong>centered</strong> in the app container (usually the viewport). </WindowContent> </TelerikWindow>
If you want to center the window dynamically through data binding its
Centeredproperty, you may want to data bind the
Leftproperties as well, so you can reset them to
nullwhen you want to center the window in the viewport.
The Window renders in the root of the application (where the
<TelerikRootComponent>is declared). This, generally, positions it relatively to the viewport. If you have special CSS positioning, margins or other offsets on the app element, they may affect the position of the Window.