Back to Devexpress

Shapes Panel

wpf-116504-controls-and-libraries-diagram-control-diagram-designer-control-shapes-panel.md

latest9.2 KB
Original Source

Shapes Panel

  • Dec 26, 2023
  • 4 minutes to read

The Shapes panel displays available shapes that users can drag to the Canvas.

Users can click the Expand/ Collapse buttons to toggle between full and compact modes. To change the display mode in code-behind, use the DiagramControl.ToolboxVisibility property. The image below shows the panel in compact mode.

Users can select the Shapes Panel item in the Ribbon UI to show or hide the Shapes panel.

Shapes are organized into categories. The Quick Shapes category contains shapes whose ShapeDescription.IsQuick property is set to true. Set the ShowQuickShapes property to false to hide the Quick Shapes category.

The search form at the top allows users to search a shape by its name. When the user types in a search string, shapes whose name does not match the string are filtered out. The dropdown button shows the list of the most recently used (MRU) search strings.

Customization

Shapes in the Shapes panel are grouped by stencils. Use the DiagramControl.Stencils property to modify stencils for a specific DiagramControl. The following example shows how to create a stencil with an SVG shape:

csharp
var svgStencil = new DiagramStencil("SVGStencilId", "SVGStencilName");
using(var svgStream = File.OpenRead("Shape.svg")) {
    var svgShape = ShapeDescription.CreateSvgShape("SVGShapeId", "SVGShapeName", svgStream);
    svgStencil.RegisterShape(svgShape);
}
diagramControl.Stencils = new DiagramStencilCollection(svgStencil, BasicShapes.Stencil);
vb
Dim svgStencil = New DiagramStencil("SVGStencilId", "SVGStencilName")
Using svgStream = File.OpenRead("Shape.svg")
    Dim svgShape = ShapeDescription.CreateSvgShape("SVGShapeId", "SVGShapeName", svgStream)
    svgStencil.RegisterShape(svgShape)
End Using
diagramControl.Stencils = New DiagramStencilCollection(svgStencil, BasicShapes.Stencil)

To modify stencils for all diagrams in your application, use the DiagramToolboxRegistrator static class’s DiagramToolboxRegistrator.RegisterStencil and DiagramToolboxRegistrator.UnregisterStencil methods. The example below illustrates how to remove all the default stencils from the Shapes panel.

csharp
List<DiagramStencil> Stencils = DiagramToolboxRegistrator.Stencils.ToList<DiagramStencil>();
Stencils.ForEach(s => DiagramToolboxRegistrator.UnregisterStencil(s));
vb
Dim Stencils As List(Of DiagramStencil) = DiagramToolboxRegistrator.Stencils.ToList()
Stencils.ForEach(Function(s) DiagramToolboxRegistrator.UnregisterStencil(s))

Use FactoryItemTool to Add Items

The FactoryItemTool class allows you to add the DiagramShape, DiagramImage, DiagramContentItem, DiagramContainer, and DiagramConnector items to stencils. The code snippet below illustrates how to add a new stencil with a raster image.

csharp
DiagramStencil myStencil = new DiagramStencil("myStencil", "My Stencil");
myStencil.RegisterTool(new FactoryItemTool("customItem", () => "Custom Item",
        diagram => new DiagramImage() { Image = "img.png" }, new Size(100, 100)));
DiagramToolboxRegistrator.RegisterStencil(myStencil);
vb
Dim myStencil As New DiagramStencil("myStencil", "My Stencil")
myStencil.RegisterTool(New FactoryItemTool("customItem", Function() "Custom Item",
        Function(diagram) New DiagramImage() With {.Image = "img.png"}, New Size(100, 100)))
DiagramToolboxRegistrator.RegisterStencil(myStencil)

Modify Existing Items

Use the DiagramControl.ItemInitializing event to modify newly created diagram items and toolbox items. The example below illustrates how to change the border thickness for the Rectangle shape.

csharp
private void Diagram_ItemInitializing(object sender, DevExpress.Xpf.Diagram.DiagramItemInitializingEventArgs e) {
    DiagramShape shapeItem = e.Item as DiagramShape;
    if (shapeItem !=null && shapeItem.Shape == BasicShapes.Rectangle) {
        shapeItem.StrokeThickness = 8;
    }
}
vb
Private Sub Diagram_ItemInitializing(ByVal sender As Object, ByVal e As DevExpress.Xpf.Diagram.DiagramItemInitializingEventArgs)
    Dim shapeItem As DiagramShape = TryCast(e.Item, DiagramShape)
    If shapeItem IsNot Nothing AndAlso shapeItem.Shape = BasicShapes.Rectangle Then
        shapeItem.StrokeThickness = 8
    End If
End Sub

Remove Stencils

To remove a stencil from the Shapes panel, use the DiagramToolboxRegistrator static class’s DiagramToolboxRegistrator.UnregisterStencil method:

csharp
DiagramToolboxRegistrator.UnregisterStencil(SDLDiagramShapes.Stencil);
vb
DiagramToolboxRegistrator.UnregisterStencil(SDLDiagramShapes.Stencil)

To remove all stencils except those specified, initialize a new DiagramStencilCollection and set it as the DiagramControl.Stencils property value:

csharp
diagramControl1.Stencils = new
 DevExpress.Diagram.Core.DiagramStencilCollection(BasicShapes.Stencil);
vb
diagramControl1.Stencils = New
 DevExpress.Diagram.Core.DiagramStencilCollection(BasicShapes.Stencil)

Remove Shapes From Stencils

Use the DiagramStencil.UnregisterShape method to remove a shape from a stencil. See the example below.

csharp
BasicShapes.Stencil.UnregisterShape(BasicShapes.Ellipse);
vb
BasicShapes.Stencil.UnregisterShape(BasicShapes.Ellipse)

Create Hidden Stencils

Set the isVisible DiagramStencil constructor parameter to false to create hidden stencils. Hidden stencils are not shown in the Shapes panel, but their shapes can be used in the diagram. See the example below.

csharp
DiagramStencil myStencil = new DiagramStencil("myInvisibleStencil",
     "My Invisible Stencil", false);
vb
Dim myStencil As New DiagramStencil("myInvisibleStencil",
      "My Invisible Stencil", False)

Create a Custom Toolbox

Use the DevExpress.Diagram.Core.DiagramToolBehavior class to create custom toolbox items based on standard controls. Attach the DiagramToolBehavior to a UI element that serves as a container item. Then bind the DiagramToolBehavior.DiagramTool to an instance of a DevExpress.Diagram.Core.ItemTool descendant.

View Example

See Also

Shapes

How to: Change the Set of Shapes Available In the Shapes Panel