ComponentOne Gauges for WinForms
Gauges for WinForms Task-Based Help / Creating a Face Plate / Creating a More Complex Face
In This Topic
    Creating a More Complex Face
    In This Topic

    The Border property of all FaceShapes is nice and simple. We can create a more professional-looking beveled edge to our gauge by adding a couple shapes on top of one another and using gradients for a lighting effect. For this example we will have a total of three Ellipses in our FaceShapes collection.


    FaceShapes collection
    1. Click the ellipsis button next to the Gauges property in the Properties window. The C1Gauge.Gauges Collection Editor dialog box opens.
    2. Click the ellipsis button next to the FaceShapes property. The C1RadialGauge.FaceShapes Collection Editor opens.
    3. Click Add and select C1GaugeEllipse. The first ellipse will be the bottom-most.
    4. Expand Filling and set the Color property to White, Color2 property to Black, and BrushType to Gradient. We need to make the bottom-most ellipse a bit bigger so we can see it when others are on top. To do this, set the Width and Height properties to -1.08. Note that a value of -1 means 100% of the region. Values less than -1 will increase the size proportionally. Positive values denote explicit sizes in pixels.
    5. Expand Border and set the LineStyle property to None.
    6. Click Add and select C1GaugeEllipse. The second ellipse will be slightly smaller than the bottom.
    7. Set its Width and Height values to -1.02.
    8. Expand Filling and set the Color property to Black, Color2 property to White, and BrushType to Gradient.
    9. Expand Border and set the LineStyle property to None.
    10. Click Add and select C1GaugeEllipse. The third ellipse will act as our face plate directly beneath the scale and pointer. We will keep its Width and Height at -1 (the default of 100%).
    11. Set the Color property to DarkGray, Color2 property to DimGray and BrushType to Gradient.
    12. Expand Gradient and set Direction to RadialInner.
    13. Expand Border and set the LineStyle property to None.
    See Also