Components

Radzen Blazor Studio provides a powerful design time UI for adding Blazor components and HTML elements.

Toolbox

After opening a .razor file Radzen Blazor Studio displays a tree of all components available in the current .csproj file.

The component toolbox has the following categories:

• Built-in - Blazor components provided by the framework - InputText, EditForm, NavLink et. al.
• Third party - any other Blazor component which is available in the application.
• Application - components in the application itself (excluding layouts) - pages (components with @page directive), 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. <div class="row">.

Add

To add a toolbox item (Blazor component or HTML element) perform the following steps:

1. Find the desired item in the toolbox. You can start typing its name to find it quickly.
2. Drag it from the toolbox onto Radzen Blazor Studio’s design canvas.
3. Drop the item at the desired location - before, after or inside an existing component or HTML element.

Select

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.

Move

To move components:

1. Select one or more components.
2. Drag the move handle to the desired location.
3. 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.

Delete

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.

Set properties

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 ValueChanged event). You can use the <–> button to change that e.g. from @bind-Value="value" to Value="value".

Attributes

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.

CSS style

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.

Events

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.

Templates

Radzen Blazor Studio has a special design time mode for template properties (properties of type RenderFragment or 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.

Text

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 dotnet new template.

Note: Adding a Text item before or after an existing Text item will merge them together.

Expression

The Expression component is another Radzen Blazor Studio toolbox item which allows you to display C# values e.g. @counter.