Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxRibbonColorGroup Class

Defines the color palette item’s color group.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxRibbonColorGroup :
    DxRibbonItemBase<RibbonEmptyRender>

#Remarks

The DxRibbonColorGroup object allows you to populate a ribbon color palette item (DxRibbonColorPaletteItem) with predefined and custom color groups.

Follow the steps below to add color groups to the palette:

  1. Add DxRibbonColorGroup objects to the item’s Groups collection.
  2. Use the Colors property to specify a palette preset or add custom colors to the palette.
razor
...
<DxRibbonColorPaletteItem @bind-Value="color" >
    <Groups>
        <DxRibbonColorGroup Header="Universal" Colors="@DxColorPalettePresets.GetPalette(ColorPalettePresetType.Universal)" />
        <DxRibbonColorGroup Colors="@DxColorPalettePresets.GetPalette(ColorPalettePresetType.Pastel)" />
        <DxRibbonColorGroup Header="Aqua" Colors="@(["#184E77", "#1E6091", "#1A759F", "#1A759F", "#34A0A4", "#52B69A", "#76C893", "#99D98C", "#B5E48C", "#D9ED92"])" />
        <DxRibbonColorGroup Header="Pink" Colors="@Colors" />
    </Groups>
    <IconTemplate>
        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.4642 2.3143C10.3883 2.12448 10.2045 2 10 2C9.79556 2 9.6117 2.12448 9.53577 2.3143L6.53577 9.8143C6.43322 10.0707 6.55792 10.3617 6.81432 10.4642C7.07071 10.5668 7.36169 10.4421 7.46425 10.1857L8.53707 7.50364H11.4629L12.5358 10.1857C12.6383 10.4421 12.9293 10.5668 13.1857 10.4642C13.4421 10.3617 13.5668 10.0707 13.4642 9.8143L10.4642 2.3143ZM10 3.84629L11.0629 6.50364H8.93707L10 3.84629Z" />
            <path fill="@color" d="M4.5 12C3.67157 12 3 12.6716 3 13.5V16.5C3 17.3284 3.67157 18 4.5 18H15.5C16.3284 18 17 17.3284 17 16.5V13.5C17 12.6716 16.3284 12 15.5 12H4.5" />
        </svg>
    </IconTemplate>
</DxRibbonColorPaletteItem>
...
@code {
    string color = "";

    public List<string> Colors = new List<string> {
        "#FF0A54", "#FF477E", "#FF5C8A", "#FF7096", "#FF85A1", "#FF99AC", "#FBB1BD", "#F9BEC7", "#F7CAD0", "#FAE0E4"
    };
}

Groups in ribbon color palette

#Inheritance

Object
ComponentBase
DxComponentBase
DxRibbonItemBase<DevExpress.Blazor.Navigation.Internal.RibbonEmptyRender>
DxRibbonColorGroup
See Also