Skip to main content
All docs
V25.1
  • DiagramCustomShape.BackgroundImageLeft Property

    Specifies the left offset of the shape background image.

    Namespace: DevExpress.Web.ASPxDiagram

    Assembly: DevExpress.Web.ASPxDiagram.v25.1.dll

    NuGet Package: DevExpress.Web

    Declaration

    [DefaultValue(typeof(decimal), "0")]
    public decimal BackgroundImageLeft { get; set; }

    Property Value

    Type Default Description
    Decimal "0"

    A decimal number from 0 to 1.

    Remarks

    The BackgroundImageLeft property specifies the ratio of the shape background image’s left offset to the shape’s width. If the BackgroundImageLeft property is set to 0, the image’s left edge matches the shape’s left edge.

    The absolute offset is calculated by multiplying the BackgroundImageLeft value by the shape’s width.

    Online Demo

    Diagram - Custom Shapes

    Example

    <dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px">
        <SettingsToolbox>
            <Groups>
                <dx:DiagramToolboxGroup Category="Custom" CustomCategoryName="hardware" Title="Hardware" />
            </Groups>
        </SettingsToolbox>
        <CustomShapes>
            <dx:DiagramCustomShape CategoryName="hardware" Type="internet" Title="Internet" 
            BackgroundImageUrl="../Content/customshapes/shapes/internet.svg" 
            BackgroundImageLeft="0.15" BackgroundImageTop="0" BackgroundImageWidth="0.7" BackgroundImageHeight="0.7"
            DefaultWidth="0.75" DefaultHeight="0.75" DefaultText="Internet" AllowEditText="false" 
            TextLeft="0" TextTop="0.7" TextWidth="1" TextHeight="0.3">
                <ConnectionPoints>
                    <dx:DiagramShapeConnectionPoint Left="0.5" Top="0" />
                    <dx:DiagramShapeConnectionPoint Left="0.9" Top="0.5" />
                    <dx:DiagramShapeConnectionPoint Left="0.5" Top="1" />
                    <dx:DiagramShapeConnectionPoint Left="0.1" Top="0.5" />
                </ConnectionPoints>
            </dx:DiagramCustomShape>
            ...
        </CustomShapes>
    </dx:ASPxDiagram>
    

    Diagram Custom Shapes

    See Also