====== Fills and Borders ======
Many of the properties in jControls have ''Fill'' properties and ''Border'' properties.  The ''Fill'' property is used to color the interior region of the control, and the ''Border'' property is used to color the outer perimeter of the control.

===== BrushType Property =====
jControls supports 3 different fill/border brush types: ''[[#Solid]]'', ''[[#LinearGradient]]'', and ''[[#RadialGradient]]''.  Each are described in turn below.

==== Solid ====
With the ''Solid'' ''BrushType'', only ''Color1'' has an effect; all other properties are irrelevant, and hidden in the Visual Studio property grid.  

| {{.:redsolidfill.png?direct&600|}} | {{ .:fillsolidproperties.png?nolink |}} |

==== LinearGradient ====
With the ''LinearGradient'' ''Type'', the color with gradually change linearly from ''Color1'' at ''Color1Point'' to ''Color2'' at ''Color2Point''.  If ''ScaleGradient'' is ''False'', the gradient does not scale with the size of the control.

| {{ .:fillabsolutelineargradient.png?direct&600 |}} | {{ .:fillabsolutelineargradientproperties.png?nolink |}} |

==== RadialGradient ====
With the ''RadialGradient'' ''Type'', the color with gradually change radially outward from ''Color1'' at ''Color1Point'' to ''Color2'' with an x,y radius of ''Color2Point''.  In other words, ''Color1Point'' specifies the center of the radial gradient, and ''Color2Point'' specifies the x,y radius at which the gradient spreads.

| {{ .:fillabsoluteradialgradient.png?direct&600 |}} | {{ .:fillabsoluteradialgradientproperties.png?nolink |}} |

===== ScaleGradient Property =====

If ''ScaleGradient'' is ''False'', the gradient will not change with the size of the control.  But, if ''ScaleGradient'' is true, ''Color1Point'' and ''Color2Point'' are interpreted as percentages of the control's size, so the gradient will scale proportionally with the size of the control.

| {{.:redblueabsolutegradient200x200.png?direct&200|}} | {{ .:fillscalegradienttrueproperties.png?nolink |}} | The gradient travels only until point ''Color2Point'' (100,100) after which all points are ''Color2''. |

| {{.:redbluerelativegradient200x200.png?direct&200|}} | {{ .:fillscalegradientfalseproperties.png?nolink |}} | The gradient travels 100% of the width and 100% of the height; (i.e. Color2Point: 100,100 is interpreted as (100%,100%)) |


===== Alpha Blending and Transparency =====
All colors can be entered with an alpha component to provide alpha blending and transparency.  For example, typing "128, 255, 0, 0" in "Alpha, Red, Green, Blue" order would produce a 50% transparent (A=128/255 ≈ 50%) red (R=255) color.

{{https://downloads.comfiletech.com/jControls/videos/alphatransparency.mp4?484x166|}}

===== Thickness Property =====
''Border''s have an additional ''Thickness'' property used to specify the width of the perimeter to color.

|{{ .:strokethickness1.png?nolink |}}|{{ .:strokethickness1properties.png?nolink |}}|

|{{ .:strokethickness7.png?nolink |}}|{{ .:strokethickness7properties.png?nolink |}}|



===== BackColor Property =====
The ''BackColor'' property is inherited from the .Net Compact Framework's [[https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.control|Control]] class.  It colors the entire area of the control before anything else is drawn.  

Users will probably prefer to use the rich features of the ''Fill'' property to color their controls, so ''BackColor'' usually defaults to ''Color.Transparent''.

|{{ .:backcolortransparent.png?nolink |}}|{{ .:backcolortransparentproperties.png?nolink |}}|
|{{ .:backcolorblue.png?nolink |}}|{{ .backcolorblueproperties.png?nolink |}}|

The ''BackColor'' is draw to the screen before the ''BackgroundImage'' is drawn.  If your control uses a ''BackgroundImage'' and has no transparent pixels, be sure to set the ''jForm'''s ''BackColor'' property to ''Transparent'' to avoid wasting resources drawing a background, only to have it replaced by the image.