DxRangeSelectorScaleMarker Class

Contains settings for scale markers.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxRangeSelectorScaleMarker :
    DxComplexSettingsComponent<DxRangeSelectorScaleMarker, RangeSelectorScaleMarkerModel>,
    IModelProvider<RangeSelectorScaleMarkerLabelModel>

Remarks

Scale markers accompany the scale axis that displays DateTime values. A scale marker consists of a separator and label.

Add a DxRangeSelectorScaleMarker object to the DxRangeSelectorScale component markup to configure settings of scale markers in DxRangeSelector.

Show Nested Component Structure

• DxRangeSelector
  • DxRangeSelectorScale
    • DxRangeSelectorScaleMarker
      • DxRangeSelectorScaleMarkerLabel
        • DxTextFormatSettings

The DxRangeSelectorScaleMarker component allows you to specify the following properties at the component level:

Visible

Specifies whether scale markers are visible. Set this property to false to hide scale markers.

SeparatorHeight

Specifies the height of scale marker separators.

IndentFromScaleLabel

Specifies the vertical indent between scale markers and scale labels.

LabelLeftIndent | LabelTopIndent

Position scale marker labels relative to corresponding separators.

You can also add a DxRangeSelectorScaleMarkerLabel object to the DxRangeSelectorScaleMarker component markup to customize format settings of scale marker labels.

Example

The following code snippet configures scale markers and their labels:

<DxRangeSelector Width="1000px"
                 Height="400px"
                 SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
                 SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
    <DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
                          EndValue="@(new DateTime(2024, 6, 1))"
                          MinorTickInterval="ChartAxisInterval.Day"
                          TickInterval="ChartAxisInterval.Week"
                          MaxRange="ChartAxisInterval.Month"
                          MinRange="ChartAxisInterval.Week"
                          ValueType="ChartAxisDataType.DateTime">
        <DxRangeSelectorScaleMarker IndentFromScaleLabel="0"
                                    LabelLeftIndent="25"
                                    LabelTopIndent="20"
                                    SeparatorHeight="50">
            <DxRangeSelectorScaleMarkerLabel>
                <DxTextFormatSettings Type="TextFormat.MonthAndYear" />
            </DxRangeSelectorScaleMarkerLabel>
        </DxRangeSelectorScaleMarker>
    </DxRangeSelectorScale>
    <DxRangeSelectorSliderMarker>
        <DxTextFormatSettings Type="TextFormat.MonthAndDay" />
    </DxRangeSelectorSliderMarker>
</DxRangeSelector>

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorScaleMarkerModel>

DxComplexSettingsComponent<DxRangeSelectorScaleMarker, DevExpress.Blazor.Internal.RangeSelectorScaleMarkerModel>

DxRangeSelectorScaleMarker