# Gauge Borders and Filling

Easily and quickly add border, fill a shape, and use a gradient color to create a custom gauge in your application. See more demos, documentation, and samples here.

## Content



All gauge elements, except text labels and images, have the following properties in the Appearance category: **Border** ([C1GaugeBorder](/componentone/docs/win/online-gauges/)), **Filling** ([C1GaugeFilling](/componentone/docs/win/online-gauges/)), **Gradient** ([C1GaugeGradient](/componentone/docs/win/online-gauges/)).

Border specifies the color, thickness, and style of the pen that draws the element border. The default border color is the same as **ForeColor** of the owner [C1Gauge](/componentone/docs/win/online-gauges/) control. To hide the border set its **C1GaugeBorder.LineStyle** property to None. To display a semitransparent border specify the value of alpha when setting the **C1GaugeBorder.Color** property, for example: "128, 0, 0, 0".

The **Filling** property specifies how to draw the interior. [BrushType](/componentone/docs/win/online-gauges/) is the main property of the [C1GaugeFilling](/componentone/docs/win/online-gauges/) class. The filling color is defined by a pair of properties: [Color](/componentone/docs/win/online-gauges/) and [Opacity](/componentone/docs/win/online-gauges/). Some brushes use the second pair of color properties as well: [Color2](/componentone/docs/win/online-gauges/), [Opacity2](/componentone/docs/win/online-gauges/). You may switch these pairs using the [SwapColors](/componentone/docs/win/online-gauges/) property. The following are possible values for the BrushType property:

*   **None** – the element has no filling.
*   **SolidColor** – the element is filled with a single color specified by the **Color** property. If this property is empty, the **BackColor** property of the owner C1Gauge control is used instead.
*   **Hatch** – fills the element with one of the predefined hatch styles (selected by the [HatchStyle](/componentone/docs/win/online-gauges/) property) using a foreground color (Color) and a background color (Color2).
*   **Texture** – fills the interior of an element using an image provided in the **C1GaugeFilling.TextureImage** property. The wrap mode for the texture brush is specified by the **C1GaugeFilling.WrapMode** property.
*   **Gradient** – the interior is filled with a gradient that is defined by the **Gradient** property (see below).

The **Gradient** property provides a few settings for drawing a gradient. The **C1GaugeGradient.Direction** property sets the direction of the gradient orientation line, such as Vertical, Radial, and so on. The **RadialInner** value draws the gradient that is inscribed into the owner element. The **RadialOuter** value draws the circumscribed gradient. The **C1GaugeGradient.Falloff** property allows using the bell-shaped or triangular gradient effects. The **C1GaugeGradient.TranslateX** and **C1GaugeGradient.TranslateY** properties allow moving the area filled with the gradient by the specified relative amount, and then the **C1GaugeGradient.ScaleX** and **C1GaugeGradient.ScaleY** properties scale this area, if necessary.

If several elements have similar borders, fillings, or gradients you can create the common templates that can be shared between several objects. Both **C1Gauge** and **C1GaugeBase** classes have the special collections of common items: **CommonBorders**, **CommonFillings**, and **CommonGradients**. Each common item, such as a **CommonBorder** and **CommonFilling**, has the **Name** property. If this property is not empty you can choose the specified name from the drop-down list that opens for the **Border**, **Filling**, and **Gradient** properties of various gauge elements. To reference a common item from code, you should assign the item name to the following properties: **C1GaugeBorder.CommonBorderName**, **C1GaugeFilling.CommonFillingName**, **C1GaugeGradient.CommonGradientName**.

## See Also

[Custom Pointers and Mark Shapes](/componentone/docs/win/online-gauges/workingwithgaugesfor/custompointersandmar)