DxRangeSelectorScale.PlaceholderHeight Property

Reserves an area for the scale and its visual elements (labels and markers).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public int PlaceholderHeight { get; set; }

Property Value

Type	Description
Int32	The area in pixels.

Remarks

Use the PlaceholderHeight property to reserve an area for the scale, its labels and markers, and an empty space between labels and markers.

You may use the PlaceholderHeight property value to calculate the background‘s height as follows:

backgroundHeight = componentHeight - sliderMarkerHeight - scaleHeight, where:

• componentHeight equals DxRangeSelector.Height.
• sliderMarkerHeight equals DxRangeSelectorSliderMarker.PlaceholderHeight.
• scaleHeight equals DxRangeSelectorScale.PlaceholderHeight.

The following code snippet changes the content area height for the Range Selector’s scale:

<DxRangeSelector Width="1100px"
                 Height="200px"
                 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))"
                          TickInterval="ChartAxisInterval.Week"
                          MinorTickInterval="ChartAxisInterval.Day"
                          MinRange="ChartAxisInterval.Week"
                          MaxRange="ChartAxisInterval.Month"
                          ValueType="ChartAxisDataType.DateTime"
                          PlaceholderHeight="45">
        <DxRangeSelectorScaleMarker>
            <DxRangeSelectorScaleMarkerLabel>
                <DxTextFormatSettings Type="TextFormat.MonthAndYear" />
            </DxRangeSelectorScaleMarkerLabel>
        </DxRangeSelectorScaleMarker>
    </DxRangeSelectorScale>
    <DxRangeSelectorSliderMarker>
        <DxTextFormatSettings Type="TextFormat.MonthAndDay" />
    </DxRangeSelectorSliderMarker>
</DxRangeSelector>