RangeSelectorBackgroundImagePosition Enum

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.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:

• DxRangeSelectorBackground.ImagePosition

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:

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>