IBarButton Interface

A button on the Rich Text Editor‘s ribbon or toolbar.

Namespace: DevExpress.Blazor.Office

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IBarButton :
    IBarItemWithImageBase,
    IBarItem,
    IBarItemBase

Related API Members

The following members return IBarButton objects:

• BarItemCollection.AddCustomButton(Int32, String, Func<Task>)
• BarItemCollection.AddCustomButton(String, Func<Task>)

Remarks

The code below demonstrates how to create a custom Watermark button.

@inject NavigationManager NavigationManager

<DxRichEdit @ref=rich 
            CustomizeToolbar=OnCustomizeToolbar 
            BarMode=BarMode.Toolbar/>

@code {
    Selection selection;
    DxRichEdit rich;

    void OnCustomizeToolbar(IToolbar toolbar) {
        BarGroupCollection groups = toolbar.Groups;
        groups.Clear();
        AddFileCommonGroup(groups);
        // ...
    }

    void AddFileCommonGroup(BarGroupCollection groups) {
        IBarGroup fileCommonGroup = groups.Add(RichEditRibbonGroupNames.FileCommon);
        // ...

        // Adds a custom button
        IBarButton insertWatermarkButton = fileCommonGroup.Items.AddCustomButton("Watermark", InsertWatermarkAsync);
        insertWatermarkButton.GetEnabled = () => selection.ActiveSubDocument.Type == SubDocumentType.Main;
        insertWatermarkButton.IconUrl = "_content/BlazorDemo/images/Watermark.svg";
        insertWatermarkButton.Tooltip = "Insert Watermark.";
    }    

    async Task InsertWatermarkAsync() {
        rich.DocumentAPI.BeginUpdate();
        Section section = await rich.DocumentAPI.Sections.GetAsync(0);
        try {
            SubDocument header = await section.GetHeaderAsync(createIfNotExist: true);
            Image image = await header.Images.CreateAsync(0, DocumentImageSource.LoadFromUrl(NavigationManager.BaseUri + "_content/BlazorDemo/images/SampleWatermark.png", 5000, 5000));
            await image.ChangePropertiesAsync(ip => {
                ip.HorizontalAnchorElement = FloatingObjectHorizontalAnchorElement.Page;
                ip.VerticalAnchorElement = FloatingObjectVerticalAnchorElement.Page;
                ip.HorizontalAlignment = FloatingObjectHorizontalAlignment.Center;
                ip.VerticalAlignment = FloatingObjectVerticalAlignment.Center;
            });
        }
        finally {
            rich.DocumentAPI.EndUpdate();
        }
    }
}

Run Demo: Toolbar Customization