DxMarginSettings Class

Contains settings for the element’s margins.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxMarginSettings :
    DxSettingsComponent<MarginSettingsModel>

Remarks

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

DxSparkline

A component that visualizes value trends as an inline graph.

DxBarGauge

A component that visualizes data as circular bars where each bar indicates a single value.

DxBarGaugeLegendSettings

Contains settings for the Bar Gauge‘s legend.

DxLegendTitleSettings

Contains settings for the legend title.

DxTitleSettings

Contains title settings.

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