DxRangeSelectorBackground Class

Contains the Range Selector’s background settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxRangeSelectorBackground :
    DxSettingsComponent<RangeSelectorBackgroundModel>

Remarks

Add a DxRangeSelectorBackground object to the DxRangeSelector component markup to customize the component’s background area. You can apply the following customizations:

• Display an image:
• Set the background color:

To disable background customizations, set the Enabled property to false.

Background Image

Use the following properties to display an image in the Range Selector’s background:

ImageUrl

Specifies the background image URL.

ImagePosition

Specifies the background image position relative to the background area.

When you set the ImagePosition property to any value except Full, the component applies one of the preserveAspectRatio attribute values. The applied attribute value depends on the following settings:

• The ImagePosition property value.
• The component size (DxRangeSelector.Height and DxRangeSelector.Width properties).

If the specified image does not fill the entire background area, you can use the Color property to fill the remaining area.

Background Color

Use the Color property customize the Range Selector’s background color. This property is in effect in the following cases:

• The component displays a chart.
• The background image does not fill the entire background area. In this case, the Color property applies to the remaining area.

Background color settings also apply to the Range Selector’s shutters if you do not specify the DxRangeSelectorShutter.Color property.

Example

The following code snippet customizes the Range Selector’s background area:

<DxRangeSelector Width="800px"
                 Height="200px">
    <DxRangeSelectorScale StartValue="@(new DateTime(2024, 8, 29, 0, 0, 0))"
                          EndValue="@(new DateTime(2024, 8, 29, 23, 59, 59))"
                          MinorTickInterval="ChartAxisInterval.Hour"
                          TickInterval="ChartAxisInterval.Hours(2)"
                          PlaceholderHeight="20"
                          ValueType="ChartAxisDataType.DateTime">
        <DxRangeSelectorScaleLabel Visible="true">
            <DxTextFormatSettings Type="TextFormat.ShortTime" />
        </DxRangeSelectorScaleLabel>
    </DxRangeSelectorScale>
    <DxTitleSettings Text="Select a Time Period" />
    <DxRangeSelectorBackground ImageUrl="images/background.png"
                               ImagePosition="RangeSelectorBackgroundImagePosition.Center"
                               Color="#d7c2ed" />
</DxRangeSelector>

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorBackgroundModel>

DxRangeSelectorBackground