DxMarginSettings Class

Contains settings for the element’s margins.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxMarginSettings :
    DxSettingsComponent<MarginSettingsModel>

Remarks

Use DxMarginSettings objects to customize margin settings for the following components:

• DxSparkline
• DxBarGauge
• DxSankey
• DxBarGaugeLegendSettings
• DxLegendTitleSettings
• DxTitleSettings

The DxMarginSettings component allows you to configure Top, Right, Bottom, and Left margins.

Example

The following code snippet sets margins for DxSparkline:

Razor

<DxSparkline Data="@DataSource"
             CssClass="myCssClass"
             Type="SparklineType.Bar"
             ArgumentFieldName="Month"
             ValueFieldName="VisitorCount"
             Height="50px"
             Width="200px">
    <DxMarginSettings Top="10" Right="20" Bottom="10" Left="20"/>
</DxSparkline>

@code {
    IEnumerable<SparklineDataPoint> DataSource = Enumerable.Empty<SparklineDataPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

DataSource

public List<SparklineDataPoint> GenerateData() {
    return new List<SparklineDataPoint>() {
            new SparklineDataPoint( 01, 2132),
            new SparklineDataPoint( 02, 2103),
            new SparklineDataPoint( 03, 2460),
            new SparklineDataPoint( 04, 2152),
            new SparklineDataPoint( 05, 2062),
            new SparklineDataPoint( 06, 1934),
            new SparklineDataPoint( 07, 2112),
            new SparklineDataPoint( 08, 1967),
            new SparklineDataPoint( 09, 2009),
            new SparklineDataPoint( 10, 2087),
            new SparklineDataPoint( 11, 2112),
            new SparklineDataPoint( 12, 2038),
        };
}
public class SparklineDataPoint {
    public int Month { get; set; }
    public int? VisitorCount { get; set; }
    public SparklineDataPoint(int month, int? visitorCount) {
        Month = month;
        VisitorCount = visitorCount;
    }
}

CSS

.myCssClass .dxbl-widget-container {
    border: 1px solid black;
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.MarginSettingsModel>

DxMarginSettings