Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Apply Shadow Effects

Shadow effects visually enhance and add depth to a property on your gauge, giving the property a 3D appearance.

This topic assumes that you already created a Radial gauge. For information on how to create a Radial gauge, see Getting Started with WebGauge.

You can apply a shadow effect to a property on your gauge:

When you save and run your application after completing the following steps, your gauge should look similar to the gauge below.

Finished radial gauge showing the shadow effects.

To apply a shadow effect to the Range property of your Radial gauge using the Gauge Designer:

  1. In the Gauge Explorer or the interactive preview area, select the property to which you want to apply the shadow effect.

  2. In the Effects tab of the Properties panel, select Solid from the Type drop-down list of the Shadow Brush pane.

  3. Click the Details the drop-down arrow.

  4. The color picker appears. On the left-hand side, click Web, then select the Silver color.

  5. When you are finished specifying the color, click anywhere in the Shadow Brush pane.

  6. You can see the shadow effect applied to the Range property of your gauge in the interactive preview area.

To apply a shadow effect to the Range property of your Radial gauge in at design time:

  1. In the left-hand pane of the Gauges collection editor, click Radial Gauge.

  2. Locate the Scales property and click the ellipsis button (…) to launch the Scales collection editor.

  3. Locate the Ranges property and click the ellipsis button (…​) to launch the Ranges collection editor.

  4. Locate and expand the Shadow property.

  5. Locate the BrushElement property.

  6. From the BrushElement drop-down list, select Solid Fill. This will create a new Solid Fill BrushElement.

  7. Expand the newly created BrushElement property, and locate the Color property.

  8. Set the Color property to Silver.

  9. Set the Angle property to 45 and the Depth property to 5.

To apply a shadow effect to the Range property of your Radial gauge using code:

  1. Instantiate the following classes.

In Visual Basic:

Dim mySolidFillBrushElement As New SolidFillBrushElement()
Dim myRadialGauge As RadialGauge = Me.UltraGauge1.Gauges(0)
Dim myRange As RadialGaugeRange = myRadialGauge.Scales(0).Ranges(0)

In C#:

SolidFillBrushElement mySolidFillBrushElement = new SolidFillBrushElement();
RadialGauge myRadialGauge = this.ultraGauge1.Gauges[0] as RadialGauge;
RadialGaugeRange myRange = myRadialGauge.Scales[0].Ranges[0];

  1. Set the Color property to Silver.

In Visual Basic:

mySolidFillBrushElement.Color = System.Drawing.Color.Silver
myRange.Shadow.BrushElement = mySolidFillBrushElement

In C#:

mySolidFillBrushElement.Color = System.Drawing.Color.Silver;
myRange.Shadow.BrushElement = mySolidFillBrushElement;