Blazor

Code Examples Upgrade Guide User Guide Demos Support Forums Download
  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramUserHandle

    Show / Hide Table of Contents

    Class DiagramUserHandle

    Represents a customizable handle that can be used to perform custom actions.

    Inheritance
    System.Object
    SfDiagramBase
    DiagramUserHandle
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramUserHandle : SfDiagramBase
    Remarks

    The user handles are icons that are placed around the selected node or connector to run the frequently used commands, and that icons can be the path, image, SVG content, or HTMLTemplate.

    Examples
    <SfDiagram Height="600px" Nodes="@NodeCollection" SelectedItems="@SelectedModel">
    </SfDiagram>
    @code{
       // Defines diagram's nodes collection
       public ObservableCollection<DiagramNode> NodeCollection { get; set; }
       // Defines diagram's SelectedItems
       public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; }
       ObservableCollection<DiagramUserHandle> UserHandles { get; set; }
       protected override void OnInitialized()
       {
         //Creating the user handle for cloning the objects
         DiagramUserHandle CloneHandle = new DiagramUserHandle()
         {
             //Name of the user handle
              Name = "clone",
             //Set pathdata for userhandle
             PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
         };
         //Add user handle to the user handle collection
         UserHandles = new ObservableCollection<DiagramUserHandle>()
         {
             CloneHandle
         };
         SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems()
         {
          //Enable user handle for selected items...
          Constraints = SelectorConstraints.UserHandle,
          UserHandles = this.UserHandles
         };
         NodeCollection = new ObservableCollection<DiagramNode>();
         DiagramNode DiagramNode = new DiagramNode()
         {
            Id = "node1",
            OffsetX = 100,
            OffsetY = 100,
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" },
          };
          NodeCollection.Add(DiagramNode);
         }
     }

    Constructors

    DiagramUserHandle()

    Represents a customizable handle that can be used to perform custom actions.

    Declaration
    public DiagramUserHandle()

    Properties

    BackgroundColor

    Defines the background color of the user handles. By default, it will be black.

    Declaration
    public string BackgroundColor { get; set; }
    Property Value
    Type Description
    System.String

    BorderColor

    Defines the border color of the user handles.

    Declaration
    public string BorderColor { get; set; }
    Property Value
    Type Description
    System.String

    BorderWidth

    Defines the border width of the user handles.

    Declaration
    public double BorderWidth { get; set; }
    Property Value
    Type Description
    System.Double

    Content

    Defines the shape information of the user handle. This property is specific to the content.

    Declaration
    public string Content { get; set; }
    Property Value
    Type Description
    System.String

    DisableConnectors

    Defines the visibility of the user handles to the Connectors.

    Declaration
    public bool DisableConnectors { get; set; }
    Property Value
    Type Description
    System.Boolean
    Remarks

    By default, this property will be false. If set true, the user handles prevent rendering for the connectors.

    DisableNodes

    Defines the visibility of the user handles to the Nodes.

    Declaration
    public bool DisableNodes { get; set; }
    Property Value
    Type Description
    System.Boolean
    Remarks

    By default, this property will be false. If set true, the user handles prevent rendering for the nodes.

    Displacement

    This property allows the user to dislocate the user handle from its original position by the given value. By default, it will be 10.

    Declaration
    public double Displacement { get; set; }
    Property Value
    Type Description
    System.Double

    HorizontalAlignment

    Defines the horizontal alignment of the user handle.

    Declaration
    public HorizontalAlignment HorizontalAlignment { get; set; }
    Property Value
    Type Description
    HorizontalAlignment
    Remarks
    The list of following options is used to defining the HorizontalAlignment of the user handle,
    1. Stretch - Stretches the diagram element throughout the selector.
    2. Left - Aligns the diagram element at the left of the selector.
    3. Right - Aligns the diagram element at the right of the selector.
    4. Center - Aligns the diagram element at the center of the selector.
    5. Auto - Aligns the diagram element based on the characteristics of the selector.
    By default, the HorizontalAlignment of the user handle will be center.

    Margin

    Specifies the space around the user handles. By default, it will be 0 from all sides.

    Declaration
    public DiagramUserHandleMargin Margin { get; set; }
    Property Value
    Type Description
    DiagramUserHandleMargin
    Examples
    //set margin for the user handle
      Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }

    Name

    Returns the unique name of the user handle.

    Declaration
    public string Name { get; set; }
    Property Value
    Type Description
    System.String
    Remarks

    user handle Name needs to be unique to use. When creating a handle, the user should not provide the same Name to other handles.

    Offset

    Gets or sets the position for the user handle.

    Declaration
    public Nullable<double> Offset { get; set; }
    Property Value
    Type Description
    System.Nullable<System.Double>
    Remarks
    Offset values range from 0 to 1.
    1. 0 represents the top left corner of the node.
    2. 0.5 represents half of the width or height.
    3. 1 represents the bottom right corner of the node.
    By default, the offset value is set to 0.

    PathColor

    Defines the path color of the user handle. By default, it will be white.

    Declaration
    public string PathColor { get; set; }
    Property Value
    Type Description
    System.String

    PathData

    Defines the shape information of the user handle. This property is specific to the Path of the user handle.

    Declaration
    public string PathData { get; set; }
    Property Value
    Type Description
    System.String
    Examples
        DiagramUserHandle cloneHandle = new DiagramUserHandle()
    {
       //Set pathdata to userhandle
       PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
     }

    Side

    Gets or sets the side of the user handle based on the given offset.

    Declaration
    public Side Side { get; set; }
    Property Value
    Type Description
    Side
    Remarks
    Users can customize the side property of the user handle. This property has the following options
    1. Top - Aligns the user handles at the top of an object.
    2. Bottom - Aligns the user handles at the bottom of an object.
    3. Left - Aligns the user handles at the left of an object
    4. Right - Aligns the user handles at the right of an object
    By default, the side property will be Top.

    Size

    Gets or sets the size of the user handle. By default, it will be 25.

    Declaration
    public double Size { get; set; }
    Property Value
    Type Description
    System.Double

    Source

    Defines the shape information of the user handle. This property is specific to the image source of the user handle.

    Declaration
    public string Source { get; set; }
    Property Value
    Type Description
    System.String
    Examples
    DiagramUserHandle CloneHandle = new DiagramUserHandle()
      {
          //Set image source to userhandle
          Source =  './download.png',
      },

    VerticalAlignment

    Defines the vertical alignment of the user handle.

    Declaration
    public VerticalAlignment VerticalAlignment { get; set; }
    Property Value
    Type Description
    VerticalAlignment
    Remarks
    ///
    The list of following options is used to defining the Horizontal Alignment of the user handle
    1. Stretch - Stretches the diagram element throughout the selector.
    2. Left - Aligns the diagram element at the left of the selector.
    3. Right - Aligns the diagram element at the right of the selector.
    4. Center - Aligns the diagram element at the center of the selector.
    5. Auto - Aligns the diagram element based on the characteristics of the selector.
    By default, the VerticalAlignment of the user handle will be center.

    Visible

    Specifies the visibility of the user handle. By default, it will be true.

    Declaration
    public bool Visible { get; set; }
    Property Value
    Type Description
    System.Boolean
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved