Fade-in effect issue

[George C.]

Greetings,

In order to apply fade-in effect to rad controls (if possible), a nice approach is to increase the opacity of RootElement from 0 to 1 gradually with a timer. It works just fine with most of the rad controls including radbuttons, but there is an issue when I apply this method to a rad group box.

I attached a gif file that illustrates the issue (please notice that the blue background is actually the background of radgroupbox itself, not the container form).

Changing opacity of Radgroupbox.RootElement only affects the border frame of the box, not the whole box itself (background color stays still even with RootElement.Opacity = 0 ).

 

Any suggestion to fade in a radgroupbox ?

 

Thanks in advance.

[Nadya | Tech Support Engineer]

Hello, George,

RadGroupBox takes its background color from its parent. This is why if you have a blue background on the form, the color of the GroupBoxContent is blue as well and when you make the fade-in effect you can not see it since it is the same color. If you change the color of the GroupBoxContent.FillPrimitive to another color you will be able to see the effect as demonstrated in the attached gif file. 

 public RadForm1()
 {
     InitializeComponent();

     this.BackColor = Color.SkyBlue;
     this.radGroupBox1.GroupBoxElement.Content.Fill.BackColor = Color.LightGreen;
     this.radGroupBox1.RootElement.Opacity = 0;
 }

 private void radButton1_Click(object sender, EventArgs e)
 {
     timer1.Start();
 }

 private void timer1_Tick(object sender, EventArgs e)
 {
     
     if (this.radGroupBox1.RootElement.Opacity < 1)
     {
         this.radGroupBox1.RootElement.Opacity += 0.05;
     }
     else
     {
         timer1.Stop();
     }

 }

 private void radButton2_Click(object sender, EventArgs e)
 {
     this.radGroupBox1.RootElement.Opacity = 0;
 }

Let me know if there is anything else I can help with.

Regards,
Nadya
Progress Telerik

[George C.]

Thanks for your attention,

by the way, what method would you suggest in order to fade the controls in a radgroupbox as well? Fading the box itself doesn't affect the controls in it

[Nadya | Tech Support Engineer]

Hello, George,

In order to achieve the same effect for the controls within the RadGroupBox you should iterate them and apply the same setting to them. Below is an example with RadLabels:

 public RadForm1()
 {
     InitializeComponent();
     this.BackColor = Color.SkyBlue;
     this.radGroupBox1.GroupBoxElement.Content.Fill.BackColor = Color.LightGreen;
     this.radLabel1.LabelElement.LabelFill.BackColor = Color.Yellow;
     this.radLabel1.LabelElement.LabelFill.GradientStyle = GradientStyles.Solid;
     this.radLabel2.LabelElement.LabelFill.BackColor = Color.Yellow;
     this.radLabel2.LabelElement.LabelFill.GradientStyle = GradientStyles.Solid;
     this.radGroupBox1.RootElement.Opacity = 0;
     this.radLabel1.RootElement.Opacity = 0;
     this.radLabel2.RootElement.Opacity = 0;
     
 }

 private void timer1_Tick(object sender, EventArgs e)
 {
     if (this.radGroupBox1.RootElement.Opacity < 1)
     {
         this.radGroupBox1.RootElement.Opacity += 0.05;

         foreach (RadLabel label in this.radGroupBox1.Controls)
         {
             label.RootElement.Opacity += 0.05;
             label.RootElement.Opacity += 0.05;
         }
       
     }
     else
     {
         timer1.Stop();
     }
 }

 private void radButton1_Click(object sender, EventArgs e)
 {
     timer1.Start();
 }

 private void radButton2_Click(object sender, EventArgs e)
 {
     this.radGroupBox1.RootElement.Opacity = 0;
     this.radLabel1.RootElement.Opacity = 0;
     this.radLabel2.RootElement.Opacity = 0;
 }

Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik