DxRangeSelectorShutter Class

In This Article

Declaration

Remarks

Implements

Inheritance

Contains color settings for the Range Selector‘s shutters.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

public class DxRangeSelectorShutter :
    DxSettingsComponent<RangeSelectorShutterModel>

#Remarks

Shutters cover unselected ranges on the Range Selector‘s scale. Add a DxRangeSelectorShutter object to the DxRangeSelector component markup co configure shutter color settings.

Range Selector - Shutters

You can customize the shutter color and opacity. These properties affect the Range Selector’s appearance in the following cases:

The component displays a chart.
The component displays a background image.

If you leave the Color property unspecified, the Range Selector component colorizes shutters based on the DxRangeSelectorBackground.Color property value. Refer to the DxRangeSelectorBackground class description for more information.

DataSource
Razor

<DxRangeSelector Width="800px"
                 Height="200px"
                 Data="@Data"
                 ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
    <DxRangeSelectorChart>
        <DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
                          ValueField="@((PopulationPoint s) => s.Value)" />
    </DxRangeSelectorChart>
    <DxRangeSelectorShutter Color="powderblue"
                            Opacity="0.6" />
</DxRangeSelector>

@code {
    List<PopulationPoint> Data;
    protected override void OnInitialized() {
        Data = GetData();
    }
}

public List<PopulationPoint> GetData() {
    var result = new List<PopulationPoint>(14);
    result.Add(new PopulationPoint("India", 1428627663));
    result.Add(new PopulationPoint("China", 1425671352));
    result.Add(new PopulationPoint("United States", 339996563));
    result.Add(new PopulationPoint("Indonesia", 277534122));
    result.Add(new PopulationPoint("Pakistan", 240485658));
    result.Add(new PopulationPoint("Nigeria", 223804632));
    result.Add(new PopulationPoint("Brazil", 216422446));
    result.Add(new PopulationPoint("Bangladesh", 172954319));
    result.Add(new PopulationPoint("Russia", 144444359));
    result.Add(new PopulationPoint("Mexico", 128455567));
    result.Add(new PopulationPoint("Ethiopia", 126527060));
    result.Add(new PopulationPoint("Japan", 123294513));
    result.Add(new PopulationPoint("Philippines", 117337368));
    result.Add(new PopulationPoint("Egypt", 112716598));
    return result;
}

public class PopulationPoint {
    public string Country { get; set; }
    public long Value { get; set; }
    public PopulationPoint(string country, long value) {
        Country = country;
        Value = value;
    }
}