ToolTipsFactory

Object Model - Additional Properties - BackgroundGradientFocus

Gets or sets a value that specifies the center of the linear color gradient for the tooltip background.

[Visual Basic]
Public Property BackgroundGradientFocus As Single
[C#]
public Single BackgroundGradientFocus {get; set;}

Property Value

Any value in the range from  0 to 1.

Overridable

Layout-file

Property of
AnimationTT ImageTT SingleLineTT MultiLineTT

Description

A value from 0 through 1 that specifies the center of the gradient. This value is only significant for layouts where Background=LinearGradient and BackgroundGradientShape <> GradientShape.Linear. Linear gradients with BackgroundGradientShape <> GradientShape.Linear use only the first two colors from the BackgroundGradientColors-array, where BackgroundGradientColors(0) represents the starting color and BackgroundGradientColors(1) the ending color.

The BackgroundGradientFocus is the point where the gradient is composed only of the ending color. The BackgroundGradientFocus represents a location as a proportion of the distance along the gradient line. The gradient falls off to the starting color based on either a bell curve shape (as in a normal distribution curve) or a triangular curve shape to both sides. In other words, the ending color can be imagined as the peak of a symmetrical curve and the starting color as the valleys on both sides of that curve. 

The concept of the gradient focus is easier to understand with some rendered examples, as provided by the following table. In the samples we use BackgroundGradientMode=Horizontal, which makes the gradient flow from left to right. In this horizontal setting, the focus position also ranges from Left=0 to Right=1:

 
BackgroundGradient settings Result Description
With focus=0 we get the pure ending color (Blue) on the far left side of the border. From there the gradient falls off to the right until it becomes pure starting color (SpringGreen). (The left side of the curve is outside the bounds of the tooltip.)
As this sample shows, setting the focus=0.25 makes the pure ending color (the blue peak) move more to the right. Now also a part of the left slope becomes visible.
As expected, the ending color (the blue peak of the curve) is now exactly in the middle of the tooltip and the gradient falls symmetrically off to both sides until it becomes the pure starting color (SpringGreen) at the left and right edges of the tooltip.
With the focus on the opposite side as in the first sample, we now get into view only the left slope of the curve, with the starting color (SpringGreen) on the right and the ending color (Blue) on the left side of the tooltip.

 

With other BackgroundGradientModes then Horizontal, the focus axis has to be rotated accordingly. For BackgroundGradientMode=Vertical it runs from the top to the bottom of the tooltip (rotate the gradient in the samples 90° clockwise). For BackgroundGradientMode=ForwardDiagonal it runs from the upper left to the lower right corner of the tooltip (rotate the gradient in the samples 45° clockwise). With BackgroundGradientMode=BackwardDiagonal the focus axis runs from the upper right to the lower left corner.

If specified at the component-level for a tooltip component (i.e. by defining the BackgroundGradientFocus directly for the component), the assigned focus position will become the default BackgroundGradientFocus for the tooltips of all controls on the same form:

'Assign a new linear gradient focus position to the tooltip component

Me.MultiLine.GetMultiLineToolTip(Panel1).BackgroundGradientFocus = 0.5

This default BackgroundGradientFocus can be overridden for each control through the Override-property provided to all controls on the same form by the tooltip component (see "The Override-Property").

If the override-value for the BackgroundGradientFocus has to be set or changed at runtime for the tooltip of a specific control, code like the following is needed:

'Assign a new linear gradient focus position to the override-object for Panel1

Me.MultiLine.GetMultiLineToolTip(Panel1).Override _

.BackgroundOverride.BackgroundGradientFocus = 0.75

Example 1

This statements define a linear gradient background at the component level. The individual colors of the BackgroundGradientColors-property are changed and a triangular BackgroundGradientShape with the a centered focus is set:

'define a linear gradient background for the tooltips

'provided by the component (MultiLine).

Me.MultiLine.Background = BackgroundStyle.LinearGradient

Me.MultiLine.BackgroundGradientMode = LinearGradientMode.Horizontal

'assign the start-color...

Me.MultiLine.BackgroundGradientColors(0) = Color.OrangeRed 

'...and the end-color for the gradient.

Me.MultiLine.BackgroundGradientColors(1) = Color.Blue

'set the gradient shape...

Me.MultiLine.BackgroundGradientShape = GradientShape.Triangular

'...and it's focus position.

Me.MultiLine.BackgroundGradientFocus = 0.5