Declarative Approach

The declarative approach defines the ToolStrip layout directly in Razor markup. Use this method when the structure of the toolbar is known beforehand and when explicitly placing each tool (buttons, toggles, separators, dropdowns) in a fixed order is necessary. This approach offers full control over the visual layout and simplifies manual design.

Create ToolStrip in Razor Markup

Add the ToolStrip component:

<C1ToolStrip>
</C1ToolStrip>

2. Add a Dropdown tool:

<C1DropDownTool Label="Options" IconTemplate="C1IconTemplate.ThreeDotsHorizontal">
    <ContentTemplate>
        <!-- custom dropdown content -->
    </ContentTemplate>
</C1DropDownTool>

3. Insert a Separator:

<C1ToolSeparator />

4. Add a Button tool:

<C1ButtonTool Label="Select All" IconTemplate="C1IconTemplate.SelectAll" />

5. Add a Toggle tool:

<C1ToggleButtonTool Label="Filter" IconTemplate="C1IconTemplate.Funnel" />

6. Add Menu tool:

<C1MenuTool Label="edit" Description="(C1MenuTool)" IconTemplate="C1IconTemplate.Edit">
    <C1MenuTool Label="misc" IconTemplate="C1IconTemplate.ThreeDotsHorizontal">
        <C1ButtonTool Label="paste" Padding="5" IconTemplate="C1IconTemplate.MinusSquare" />
        <C1SelectTool Label="items count" Description="(C1SelectTool)"
                      IconTemplate="C1IconTemplate.Copy"
                      ItemsSource="selectToolItems"/>
    </C1MenuTool>
</C1MenuTool>

7. Add Select tool:

<C1SelectTool Label="items count" Description="(C1SelectTool)"
    IconTemplate="C1IconTemplate.Copy"
    ItemsSource="selectToolItems"
    Style="selectToolStyle" />

Declarative Approach Sample

 <C1ToolStrip @ref="toolStrip" GroupCornerRadius="16"
                 Style="@($"background: linear-gradient(90deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 12px; border: 1px solid #e0e0e0;")"
                 OverflowDropDownStyle="@("background: green !important; padding: 12px !important; border: 3px solid red !important;")"
                 ToolStyle="@("border: thin solid; margin: 3px;")">

        <C1DropDownTool Label="options" Description="(C1DropDownTool)">
            <ContentTemplate>
                <div style="display: grid; grid-template-columns: max-content max-content; gap: 8px; padding: 4px 12px 12px 8px;">
                    Orientation
                    <C1ComboBox T="Orientation"/>
                    Tool orientation
                    <C1ComboBox T="Orientation"/>
                    Overflow
                    <C1ComboBox T="ToolStripOverflow"/>
                    isLabelVisible
                    <C1CheckBox/>
                </div>
            </ContentTemplate>
        </C1DropDownTool>

        <C1ToolSeparator Foreground="@("#888")" />

        <C1ButtonTool Label="select all" Description="(C1ButtonTool)" />

        <C1ToggleButtonTool Label="filter" Description="(C1ToggleButtonTool)" IconTemplate="C1IconTemplate.Funnel" />

        <C1SelectTool Label="items count" Description="(C1SelectTool)"
                      IconTemplate="C1IconTemplate.Copy"
                      ItemsSource="selectToolItems"
                      Style="selectToolStyle" />

        <C1MenuTool Label="edit" Description="(C1MenuTool)" IconTemplate="C1IconTemplate.Edit">
            <C1ButtonTool Label="add" IconTemplate="C1IconTemplate.PlusSquare"/>
            <C1ButtonTool Label="remove" Padding="5" IconTemplate="C1IconTemplate.MinusSquare" />
            <C1MenuTool Label="misc" IconTemplate="C1IconTemplate.ThreeDotsHorizontal">
                <C1ButtonTool Label="paste" Padding="5" IconTemplate="C1IconTemplate.MinusSquare" />
                <C1SelectTool Label="items count" Description="(C1SelectTool)"
                              IconTemplate="C1IconTemplate.Copy"
                              ItemsSource="selectToolItems"/>
            </C1MenuTool>
        </C1MenuTool>
    </C1ToolStrip>