Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

RangeSelectorBackgroundImagePosition Enum

Lists image positions relative to the Range Selector’s background area.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public enum RangeSelectorBackgroundImagePosition

#Members

Name Description
Center

Centers the image horizontally and vertically.

CenterBottom

Centers the image horizontally and aligns it to the area’s bottom edge.

CenterTop

Centers the image horizontally and aligns it to the area’s top edge.

Full

Scales the image to fill the entire background area.

LeftBottom

Aligns the image to the area’s bottom left corner.

LeftCenter

Centers the image vertically and aligns it to the area’s left edge.

LeftTop

Aligns the image to the area’s top left corner.

RightBottom

Aligns the image to the area’s bottom right corner.

RightCenter

Centers the image vertically and aligns it to the area’s right edge.

RightTop

Aligns the image to the area’s top right corner.

#Related API Members

The following properties accept/return RangeSelectorBackgroundImagePosition values:

#Remarks

Use the ImagePosition property to position the image relative to the Range Selector‘s background area.

The following code snippet applies a background image and centers it both horizontally and vertically:

Range Selector - Background Customization

Razor
<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>
See Also