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.
- Analog Gauges - traditional scale-based gauges. This group consists of two separate gauge types - circular and linear gauges.
- Digital Gauges - gauges imitating LED info panels.
- 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;
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
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://www.devexpress.com/Support/Center/Question/Details/T170750
https://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.lineargradientbrush(v=vs.110).aspx
http://www.cnblogs.com/chucklu/p/6382025.html
三等分,起點和終點，按照水平或垂直來定，並且相差2。調試的時候，先確保目標區域被多段覆蓋，然后逐漸調整起點和終點的坐標，最終確保只有一段覆蓋
ArcScaleMarkerComponent
ArcScaleMarker.ShapeOffset
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