Radzen Blazor Studio provides a powerful design time UI for adding Blazor components and HTML elements.
After opening a
.razor file Radzen Blazor Studio displays a tree of all components available in the current
The component toolbox has the following categories:
- Built-in - Blazor components provided by the framework -
- Third party - any other Blazor component which is available in the application.
- Application - components in the application itself (excluding layouts) - pages (components with
@pagedirective), shared components etc.
- HTML - contains commonly used HTML elements. To use other elements not listed there you have to edit the source code.
- Bootstrap - contains bootstrap snippets e.g.
To add a toolbox item (Blazor component or HTML element) perform the following steps:
- Find the desired item in the toolbox. You can start typing its name to find it quickly.
- Drag it from the toolbox onto Radzen Blazor Studio’s design canvas.
- Drop the item at the desired location - before, after or inside an existing component or HTML element.
You can select a component in one of the following ways:
- By clicking it in the design canvas.
- From the Outline tree in the sidebar.
- You can also select the parent component or first child of the selected one.
You can select multiple components by holding ctrl (cmd in macOS) while clicking components in the design canvas or in the outline.
You can also select a range of components by selecting one component and then selecting another while pressing shift. Radzen Blazor Studio will select all components in between.
To move components:
- Select one or more components.
- Drag the move handle to the desired location.
- Release the mouse button to complete.
Cut, copy and paste
You can cut, copy and paste components by selecting them and pressing ctrl+x, ctrl+c, ctrl+v (macOS users should use cmd instead of ctrl). You can also use the component context menu or the “…” button in the component toolbar.
You can delete component by selecting it first and then clicking the Delete button from the toolbar “…” menu. You can also use the context menu or backspace.
After selecting a Blazor component you will see all of its properties (ones that are decorated with the
[Parameter] attribute) in the property grid.
Use the property grid to set the desired property value. Do not add quotes (
") for string values - Radzen Blazor Studio will add them for you.
To assign a component property to an existing page data member (field or property) type
@. Radzen Blazor Studio will show an autocomplete dropdown with the available members.
You can also click the gear icon which will open the Expression editor. You can pick an existing page property or field.
Radzen Blazor Studio uses
@bind- syntax by default for properties that support two-way data-binding (e.g.
Value property and
You can use the <–> button to change that e.g. from
Radzen Blazor Studio allows you to set custom attributes of HTML elements or Blazor components that support that (have a property decorated with
[Parameter(CaptureUnmatchedValues = true)]).
To add a custom attribute to a Blazor component click the + button next to the Custom attributes label. Pick a name for the attribute and type its value.
To set an attribute of a HTML element click the Add Attribute button.
The Styles tab of the property grid allows you to customize the appearance of the selected Blazor component or HTML element. Radzen Blazor Studio generates a
style attribute when
you change any of the style attributes.
You can handle Blazor component events from the Events tab of the property grid. Click the + next to the event name. Radzen Blazor Studio will open a dialog asking you to enter a name for the event handler method (a default name would be suggested). After that it will open the newly created method in design mode and allow you to add statements to it.
Handling events of HTML elements is similar. Click the Add event button and follow the same steps.
Radzen Blazor Studio has a special design time mode for template properties (properties of type
RenderFragment<T>). Click the pencil icon and Radzen
Blazor Studio will switch to template edit mode. Dragging and dropping components will add them inside the template property tag. If you open the Expression editor
you can access template context properties via the
context parameter. Press the done button when you have finished editing the template.
Radzen Blazor Studio includes a special Text item which allows you to set the text content of a HTML element or use text without an HTML element whatsoever.
To set the content of a Text component simply double click it in the designer. Radzen Blazor Studio will enter inline edit mode and allow you to type your content.
The following demo uses an existing Blazor application created from the default
Note: Adding a Text item before or after an existing Text item will merge them together.
The Expression component is another Radzen Blazor Studio toolbox item which allows you to display C# values e.g.