DxRangeSelectorShutter Class

Contains color settings for the Range Selector‘s shutters.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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.

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 additional information.

Razor
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();
    }
}

csharp

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;
    }
}

Implements

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorShutterModel> DxRangeSelectorShutter