The Palette component is an Accordion wrapper that displays ItemListView components as its child panels. Each ItemListView displays the items of a palette category.

Call the AddCategory method to define a category and create its respective accordion pane. Call AddItem to add an item to specified category.

Drag-and-drop operations create a copy of the dragged item, and set its size to NewInstanceSize. The copy is created by calling item's Clone method. You can override clone to copy property values of custom item subclasses.

Icons in the list are drawn by scaling NewInstanceSize down to IconSize. E.g. if a list icon is half the size of the diagram item it creates, its graphic elements such as cells, labels, strokes would be rendered at half scale too (as opposed to rendering with same label / stroke sizes but in smaller bounding rectangle). The scaling code assumes MeasureUnit of the target diagram and the palette have matching values.

Styling

The Palette component can function without any styling applied. The appearance of the control's headers and panes can be customized by using a predefined or a user-defined CSS theme.

To apply a predefined theme, set the Theme property to the string identifier of the theme (e.g. "standard") and make sure the corresponding CSS file is loaded by your application, by placing the themes subfolder inside application's wwwroot folder and referencing the desired CSS file.

Razor  Copy Code
<link rel="stylesheet" href="themes/standard.css" /> ... <Palette @ref="palette" Theme="standard"/>

The library includes a set of ten predefined themes, which you can find in the "themes" subfolder of distribution. You can easily create your own theme by copying one of them and changing its identifier. The expand/collapse icons are inside the themes/icons subfolder. If you do not wish to use a theme, but keep the icons, copy the icons folder to your application's wwwroot folder.

Another way to apply CSS styling to the control is by defining the CSS classes directly within your razor file, like this:

Razor  Copy Code
<style>  .mfc-accordionitem-header  {   color: #fff;   background-color: #000;   font-size: larger;  } </style>

The default size of the control is set to 100% width and height. To override this, or to set any other style attributes to the control's main DOM element, you can also use the StyleAttributes dictionary property.

Razor  Copy Code
<Palette @ref="palette" StyleAttributes="styles"/> ... protected override void OnInitialized() {     base.OnInitialized();     styles.Add("width", "400px"); }

System.Object
    Microsoft.AspNetCore.Components.ComponentBase
        MindFusion.Diagramming.Blazor.Palette

Palette Members
MindFusion.Diagramming.Blazor Namespace