GaugeControl 数字时钟，温度计，仪表盘

https://documentation.devexpress.com/#WindowsForms/CustomDocument18217

This topic will guide you through the main terms, concepts and mechanics used in WinForms Gauges.

You will learn about the common workflow for creating gauges from scratch, starting with picking the gauge type and concluding with detailed elements customization.  conclude with以..结束

This lesson will use the gauges illustrated in the figure below as an example of the final result for the steps listed under the figure.

Note:

Depending on the complexity of your desired gauge, there are two options available to you:

the use of pre-defined gauge presets or the creation of a completely new gauge from the ground up.

This topic will guide you through the first approach.

For the second option, see the Creating a Gauge from Scratch topic.

Selecting The Gauge Type

The first step is to clarify which gauge type you need. There are three gauge types.

1. Analog Gauges - traditional scale-based gauges. This group consists of two separate gauge types - circular and linear gauges.
2. Digital Gauges - gauges imitating LED info panels.
3. State Indicator Gauges - simple gauges that display images of specific shapes that change depending on the gauge state.

To learn more about gauge types, refer to the Gauge Types topic.

For this example, you will need circular gauges.

Selecting the Gauge Preset

DevExpress WinForms Gauges possess持有 a powerful and easy-to use tool that instantly creates a gauge of the desired type - the Preset Manager.

Whenever you need to create a new gauge - check the available presets first, since the gauge you are looking for may already have been created by DevExpress.

By default, this manager is automatically shown each time you drop a new GaugeControl onto the form.

Most similar to our desired gauge presets are Ignis or Haze.

Pick the Ignis preset and click load.

The Preset Manager will warn you that this action will completely destroy your current gauges layout and create a new one.

Bear in mind记住 that if you have multiple gauges within a single GaugeControl, using the Preset Manager will replace all of them at once with the selected preset.

In this case, use the Gauge Styles and Style Manager instead - it affects only one gauge at a time rather than the entire GaugeControl, and changes the appearance of gauge elements without affecting your gauge layout.

Customizing Gauge Elements

The selected Ignis preset differs from what we need in this example: it has only one circle instead of two, no text labels, images, etc.

This can be easily fixed since gauges are not solid objects.

Instead, each gauge is a set of elements, each with its own appearances and settings.

To see the list of available elements, see the Visual Elements topic.

• The light-gray circle in the Ignis preset is its scale that ranges gauge values from minimal to maximal.

It is represented by an object of the ArcScaleComponent class.

The orange bar on the scale is the range bar that indicates the current value.

To modify any gauge element, select it at design time, and either use the Visual Studio's properties window, or invoke the element's smart-tag and call the Gauge Designer as shown below.

• The default Ignis scale is a rounded line, but for this example we need a complete circle.

You can fix it by setting its ArcScale.EndAngle property to 90.

Refer to the Coordinate System article for more details.

Also, set the ArcScaleRangeBar.RoundedCaps property to false to make range bar's edges flat.

https://documentation.devexpress.com/#WindowsForms/CustomDocument18220

关于角度的说明：

起始90度，结束306度:从90度开始按照递增来显示

起始90度，结束-54度:从90度开始按照递减来显示

Adding and Removing Gauge Elements

For the purpose of this example, you will need two scales with two range bars linked to them.

You already have the first, outer scale.

To add new gauge elements, do one of the following.

方法1:

Select the gauge and click the required menu item within its smart-tag (see the following figure).

For instance, in this example you could click the 'Add Scale' and 'Add RangeBar' items.

This method is fast but has a minor drawback缺点: all newly created elements appear with their default settings.

Here, in this example, you would probably want to add a scale and range bar that look exactly like the previously customized items.

To do so, use the second approach below.

方法2:

Invoke the Gauge Designer and clone the required elements.

This will duplicate your existing scale and range bar, so you will only need to modify their sizes and start angles.

After a slight modification (see the code below), you will get the layout illustrated on the following figure.

//Default Range Bar 
arcScaleRangeBarComponent1.StartOffset = 87F;
arcScaleRangeBarComponent1.EndOffset = 0F;
//Cloned scale 
//半径用来调整环的大小
arcScaleComponent2.RadiusX = 80F;
arcScaleComponent2.RadiusY = 80F;
//角度用来调整环的范围
arcScaleComponent2.StartAngle = 90F;
arcScaleComponent2.EndAngle = 306F;
//Cloned Range Bar 
arcScaleRangeBarComponent2.ArcScale = arcScaleComponent2;
arcScaleRangeBarComponent2.StartOffset = 68F;
arcScaleRangeBarComponent2.EndOffset = 0F;

关于offset的说明https://documentation.devexpress.com/#CoreLibraries/DevExpressXtraGaugesCoreModelBaseRangeBar_StartOffsettopic

StartOffset:   Gets or sets the offset of the range bar's nearest arc from the scale center (in case of an arc scale) or the offset of the range bar's left edge from the scale axis (in case of a linear scale).

EndOffset:     Gets or sets the offset of the range bar's most distant arc from the scale arc (in case of an arc scale) or the offset of the range bar's right edge from the scale axis (in case of a linear scale).

假如圆的半径是100，那么StartOffset=80，EndOffset=10。最后形成的圆环，就是80-90之间的

StartOffset=90，EndOffset=9 ；那么圆环是在90到91之间

StartOffset=90，EndOffset=1；那么圆环在90-99之间

StartOffset=90，EndOffset=0；那么圆环在90-100之间

下图绿色区域的内环和外环对应

Values. Gauge Data

Images, Labels, State Indicators
Customizing Gauge Appearance
Applying Gauge Animation

BaseRangeBar.AnchorValue

https://documentation.devexpress.com/#CoreLibraries/DevExpressXtraGaugesCoreModelBaseRangeBar_AnchorValuetopic

Gets or sets the start value of the range.

Reamarks

The range bar's start value is specified by the AnchorValue property.

By default, the end value is specified by the scale's current value (ArcScale.Value or LinearScale.Value). To specify a custom end value, call the LockValue method.

分段控制刻度的颜色

https://documentation.devexpress.com/#CoreLibraries/DevExpressXtraGaugesCoreModelArcScale_Rangestopic

颜色渐变

https://www.devexpress.com/Support/Center/Question/Details/T170750

https://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.lineargradientbrush(v=vs.110).aspx

GradientStop

GradientStopCollection

http://www.cnblogs.com/chucklu/p/6382025.html

三等分,起点和终点，按照水平或垂直来定，并且相差2。调试的时候，先确保目标区域被多段覆盖，然后逐渐调整起点和终点的坐标，最终确保只有一段覆盖

ArcScaleMarkerComponent

ArcScaleMarker.ShapeOffset

https://documentation.devexpress.com/#CoreLibraries/DevExpressXtraGaugesCoreModelArcScaleMarker_ShapeOffsettopic

ArcScaleMarker.ShapeType  控制marker的形状

ArcScaleMarker.ShapeScale 控制marker的大小

使用效果:

设置刻度的颜色

this.arcScaleMarkerComponent1.Shader = new StyleShader() { StyleColor1 = Color.Yellow, StyleColor2 = Color.Yellow };

关于shader的说明，可以参看https://documentation.devexpress.com/WindowsForms/CustomDocument18236.aspx

如何让circularGauge最大程度地占据gaugeControl

拖动gaugeControl到控件之后，删除其他自带的控件。在右侧的属性栏找到Gauges属性，点开collection，然后add一个circularGauge

如何让arcScaleComponent1最大程度地占据circularGauge1

用一个现成的控件样式就可以实现，待测试

在界面上选中gauge，然后stylemanager