Layouts define common UI elements for the entire application - navigation, logo, copyright etc. In this article you will learn how to work with layouts in Radzen Blazor Studio.
INFO: Radzen Blazor Studio supports layout management since v1.15.0
To create a layout:
- Right-click the
Shareddirectory of your application or click the + button next to your project name.
- Select New Layout. This opens the Choose layout type dialog which allows you to pick from a list of layout templates.
- Empty - empty layout
- Sidebar - a layout with sidebar navigation which uses the RadzenPanelMenu. Optionally you can make the side bar occupy the full browser window height, move the sidebar to the right, add a footer.
- Menu - a layout which uses the RadzeMenu component.
- Login - a layout which is typically used for login pages.
- Specify the Name of the layout. It should be a valid C# identifier (without whitespace, numbers or any invalid symbols). Radzen Blazor Studio will append
Layoutto the file name as it is a common convention.
- Click Finish
TIP: Set Name to
Mainin order to replace the default layout of the application
Changing the layout of a page
To change the layout of a page
- Open a page in design time.
- Pick a layout from the Layout dropdown in the Page properties section of the property grid.
- Save the page.
Rendering the layout in design time
By default Radzen Blazor Studio shows the layout of a page in design time preview. Use the Layout switch in the toolbar if you want to hide the layout and show only the page contents.
You can also globally toggle that option from the Radzen Blazor Studio settings (available from the in the bottom left corner).