DevExpress:范围选择控件RangeControl使用

在图表类软件开发时,会遇到折线图显示范围过长的情况。RangeControl控件可以轻松地对图形显示区域进行范围选择,可以更加直观地对图线趋势、细节进行显示。

此篇为项目开发中的使用总结,DevExpress的版本为15.1,RangeControl控件绑定在了ChartControl曲线图控件上。

一、控件样式

将RangeControl控件拖入到窗体内,会出现一个新的的RangeControl控件。RangeControl控件的样式会随着绑定的控件进行显示。
在这里插入图片描述
项目中,将RangeControl(下)控件绑定在了ChartControl(上)曲线图控件上。在这里插入图片描述
DevExpress的官方说明页,将RangeControl(上)控件绑定在了SchedulerControl(下)控件上。
在这里插入图片描述

二、常用操作

1.数据绑定

单击选中RangeControl控件,在属性中找到Client,绑定ChartControl控件。项目中ChartControl的name属性为chartControl,可根据自己的开发需求绑定对应的控件。
在这里插入图片描述

2.外观属性

属性 设置
Selection Type Thumb/Flag/ThumbAndFlag
ShowLabels True/False
ShowZoomScrollBar True/False

Selection Type

使用SelectionType属性,可以指定最终用户使用鼠标选择数据范围以及是否显示指示绑定值的标志的模式。
在这里插入图片描述

ShowLabels

使用ShowLabels属性可隐藏刻度和标签,默认情况下可见。
在这里插入图片描述

ShowZoomScrollBar

用户使用鼠标滚动和缩放RangeControl的可见范围。
在这里插入图片描述

3.控件方向

通过选择Orientation的属性Vertical/Horizontal,设置RangeControl的方向为竖直还是水平。
在这里插入图片描述

4.最小间隔

默认拖入的控件存在最小的可视范围,无法继续缩小范围。在这里插入图片描述
可通过设置ChartControl中XYDiagram中的属性,将其更改为ChartGrid可以调节任意大小。注意选中的是ChartControl内圈中的XYDiagram,并非ChartControl。
在这里插入图片描述
更改后的效果:
在这里插入图片描述

三、使用效果

在这里插入图片描述