Alpha Blended Rectangle over text

Question

Hi

 

We have a requirement to show text fading in from the top of the screen.

To do this, I placed a Filled rectangle on top of the views and set the top colours to #000000FF

I then set the bottom colours to #00000000

In the designer, I could see the text 'fading in' from the top as expecting.

Press F7 - the gradiant vanishes. 

The rectangle is on top of a Attributed Text View.

As soon as I press F7 or run this view, the opacity vanishes. It seems like it's just using the 'color' and not anything else.

I just tried this with a blank project:

By changing the colours I can get the effect I want, but running it or pressing F7 gets the result on the right.

Am I missing something or doing something wrong?

After debugging:

I appear to have found the issue here:

The 'Color' property is set to the value set in the designer last, and this clears the gradient. (So the corners are set, followed by Color)

// The color does not change -> Nothing to do.
if (( value == pure ColorTL ) && 
    ( value == pure ColorTR ) &&
    ( value == pure ColorBL ) &&
    ( value == pure ColorBR ))
  return;

As this gets called last and this conditional is FALSE as the corners are different colours to the value passed in.

This means this gets called:

pure ColorTL = value;
pure ColorTR = value;
pure ColorBL = value;
pure ColorBR = value;

Hence the corner colours are reset and the gradient doesn't get shown. I guess this means I'll have to set the gradient in code rather than rely on the design time property setting?

(This is using 9.20)

Answer 1

Hello,

with the properties ColorTL..ColorBR you have the possibility to specify the color values for each corner individually. In this way you create gradients. These properties store in fact the real color values for the view.

Additionally, there is a convenience property Color. Changing this property modifies implicitly all the individual corner color values. As such this property is used when you want the view to be shown with a solid (not gradient) color. This property modifies thus the above mentioned properties ColorTL..ColorBR .

Consequently, the properties may be used exclusively. Either you specify a single, global color for the complete view in the convenience property Color or you specify individual colors for a gradient in the 4 properties ColorTL..ColorBR.

In your application case, I suppose, you have initialized both the global property Color and the individual properties ColorTL..ColorBR. In such case the property Color (depending on the order in which the operations are executed) may overrides the individual values stored previously in the properties ColorTL..ColorBR.

To solve the problem, remove the initialization of the property Color. How to do this is explained in the section Restore the default or inherited value.

Does it solve the problem?

Best regards

Paul Banach

Comments

Thanks!

 

I had already fixed it with a workaround, but I much prefer your solution (Right click, restore default.) :-)