1. Home
  2. Forum
  3. WinForms
  4. How to use image with transparent background in SplashPanel

How to use image with transparent background in SplashPanel

In our SplashPanel we would like to display a PNG image that has a transparent background (with rounded corners and a drop shadow) but it displays the default background color in the transparent bits. It also chops off the bottom of the image. (see snapshot below).

How can we get it to NOT display the gray background? I've tried adjusting the BackgroundColor and Transparent settings of the SplashPanel and SplashControl but can't get it to display as desired. Also, why is it chopping off the bottom?

Sample code attached.
Thanks!



Attachment: SplashTest3_9213be56.zip

10 Replies 1 reply marked as answer
VR Vijayalakshmi Roopkumar Syncfusion Team March 28, 2021 05:12 AM UTC

Hi Dean 
 
Thank you for using Syncfusion Products. 
 
We have checked the reported behavior with Splash Panel and observe that the panel is with dark background and also bottom radius is get cropped at the bottom at the runtime. We are currently validating this behavior and let you know the details on the 29th March, 20201. 
 
We appreciate your patience until then. 
 
Regards, 
Vijayalakshmi VR 


EM Elakkiya Muthukumarasamy Syncfusion Team March 29, 2021 10:48 AM UTC

Hi Deanwiles, 

Thanks for your patience. 

Query1: How can we get it to NOT display the gray background 

We have checked your query and we would like to let you know that the issue occurred due to the image file itself has grey background (shadow for the image) by default. It will work properly if we remove the shadow from the image. 

Provided Image: 

 


Modified image: 

 
Need to set the proper image without background. 
 
Query2: Why is it chopping off the bottom 
 
We have checked the reported query “The bottom of the image is trimmed in SplashPanel” and logged a bug report on this. The patch for this fix is expected to be available on 12th April 2021. You can track the status of the issue using the feedback link below.  


We appreciate your patience until then. 

Regards, 
Elakkiya 


DE deanwiles March 29, 2021 08:19 PM UTC

Thank you for your reply. 

Let me clarify what I meant about the background color/transparency. For my SplashPanel I would like to display an image with rounded corners (not a full rectangle).

Attached is a simpler image with no background color in the corners (it uses the transparent alpha channel in a PNG file). Change the SplashPanel1 to use this file and you will see that the corners are displayed as the windows dialog color instead of being transparent.



Instead I would like it to look like this, where anything that existed behind the SplashPanel corners would be visible. Is that possible?


Attachment: SplashBackground2_6ff47c5a.zip

EM Elakkiya Muthukumarasamy Syncfusion Team March 30, 2021 02:38 PM UTC

Hi Dean, 
 
Greetings from Syncfusion. 
 
We have checked the reported query “SplashPanel BackColor property not working properly” and logged a bug report on this. The patch for this fix is expected to be available on 20th April 2021. You can track the status of the issue using the feedback link below.  
 
 
We appreciate your patience until then. 
 
Regards, 
Elakkiya 


EM Elakkiya Muthukumarasamy Syncfusion Team March 30, 2021 04:06 PM UTC

Hi Dean, 
 
Please ignore the previous update. 
 
We have checked the reported query “SplashPanel BackColor property not working properly” and we would like to let you know that when we are setting  the Backcolor as transparent for SplashPanel background image, the form Backcolor should set as default. So, you can customize the splashpanel background using backcolor property to fill the white space. Currently, the backcolor property wasn’t working properly, so we have logged a bug report on this. The patch for this fix is expected to be available on 20th April 2021. You can track the status of the issue using the feedback link below.  
 
 
We appreciate your patience until then. 
 
Regards, 
Elakkiya 


EM Elakkiya Muthukumarasamy Syncfusion Team April 13, 2021 12:35 PM UTC

Hi dean, 
    
Thanks for your patience.           
 
Query : The bottom of the image is trimmed in SplashPanel Scheduled                              
   
The reported issue” The bottom of the image is trimmed in SplashPanel” has been fixed.  
 
This patch which can be download from the below links.   
    
Recommended approach - exe will perform automatic configuration.    
    
Please find the patch setup from below location:    
Patch link :    
Please find the patch assemblies alone from below location:    
 
    
Assemblies Link:    
    
Nuget link:     
   
    
Assembly Version: 19.1.0.54   
    
Installation Directions:    
This patch should replace the files "Syncfusion.Tools.Windows” under the following folder.    
$system drive:\ Files\Syncfusion\Essential Studio\$Version # \precompiledassemblies\$Version#\[TargetFramework]    
Eg : $system drive:\Program Files\Syncfusion\Essential Studio\19.1.0.54\precompiledassemblies\19.1.0.54\4.6    
    
To automatically run the Assembly Manager, please check the Run assembly manager checkbox option while installing the patch. If this option is unchecked, the patch will replace the assemblies in precompiled assemblies’ folder only. Then, you must manually copy and paste them to the preferred location or you must run the Syncfusion Assembly Manager application (available from the Syncfusion Dashboard, installed as a shortcut in the Application menu) to re-install assemblies.    
    
    
Disclaimer:    
Please note that we have created this patch for version 19.1.0.54 specifically to resolve the issue reported in this incident. If you have received other patches for the same version for other products, please apply all patches in the order received.  Please let us know, if you are using any other Syncfusion version, we will provide patch in your version. 
 
Query: SplashPanel BackColor property not working properly 
 
As update earlier we will update you the fix on 20th April 2021. 
    
Regards,    
Elakkiya 


VR Vijayalakshmi Roopkumar Syncfusion Team April 20, 2021 10:14 AM UTC

Hi Dean,    
   
Thanks for your patience.  
  
The reported issue has been fixed with SplashPanel and included in the patch which can be download from the below links.  
   
Recommended approach - exe will perform automatic configuration.   
   
Please find the patch setup from below location:   
   
Patch link :   
Please find the patch assemblies alone from below location:   
   
 
  
 
  
  
Assembly Version: 19.1.0.54 
   
Installation Directions:   
This patch should replace the files "Syncfusion.Tools.Windows” under the following folder.   
$system drive:\ Files\Syncfusion\Essential Studio\$Version # \precompiledassemblies\$Version#\[TargetFramework]   
Eg : $system drive:\Program Files\Syncfusion\Essential Studio\19.1.0.54\precompiledassemblies\19.1.0.54\4.6   
   
To automatically run the Assembly Manager, please check the Run assembly manager checkbox option while installing the patch. If this option is unchecked, the patch will replace the assemblies in precompiled assemblies’ folder only. Then, you must manually copy and paste them to the preferred location or you must run the Syncfusion Assembly Manager application (available from the Syncfusion Dashboard, installed as a shortcut in the Application menu) to re-install assemblies.   
   
   
Disclaimer:   
Please note that we have created this patch for version 19.1.0.54 specifically to resolve the issue reported in this incident. If you have received other patches for the same version for other products, please apply all patches in the order received.  Please let us know, if you are using any other Syncfusion version, we will provide patch in your version.   
 
Note:  When we give Transparent color as BackColor property, it won’t work , since it takes the Form color as default. So we need to set other color as  BackColor in SplashPanel. 
 
   
Regards,   
Vijayalakshmi VR 


DE deanwiles May 1, 2021 12:11 AM UTC

Thank you for the patch. This seems to resolve the issue where the bottom of the image is trimmed.

Regarding this response about SplashPanel BackColor property not working properly:

     "When we give Transparent color as BackColor property, it won’t work , since it takes the Form color as default. So we need to set other color as  BackColor in SplashPanel."

Does that mean there is no way to use a splash panel with rounded corners such that the corners are transparent?

VR Vijayalakshmi Roopkumar Syncfusion Team May 3, 2021 12:53 PM UTC

Hi Dean

Thank you for your update.

We are currently checking the possibility related to TransParent Backcolor for SplashPanel and update you the complete details on 4th May, 2021.

Please let us know if you need any further assistance on thus.

Regards,
Vijayalakshmi VR

VR Vijayalakshmi Roopkumar Syncfusion Team May 4, 2021 11:20 AM UTC

Hi  Dean, 
 
Thank you for your update. 
 
Query:  Does that mean there is no way to use a splash panel with rounded corners such that the corners are transparent? 
 
 
On further analysis, we could able to achieve your requirement to have rounded corner in SplashPanel using the following code: 
 
 
Code:[C#] 
 
 
private void SplashForm_Paint(object sender, PaintEventArgs e) 
        {​​​​​​​ 
            //Rounded rectangle corder radius. The radius must be less than 10. 
            int radius = 5; 
            e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; 
            GraphicsUnit unit = GraphicsUnit.Pixel; 
            RectangleF rect1 = this.splashPanel1.BackgroundImage.GetBounds(ref unit); 
            //RectangleF rect1 = this.splashPanel1.SplashForm.Bounds; 
            Rectangle rect = new Rectangle((int)rect1.X + 10, 
                                           (int)rect1.Y + 10, 
                                           (int)this.splashPanel1.Bounds.Width - 35, 
                                           (int)rect1.Height - 10); 
            this.splashPanel1.SplashForm.Region = new Region(GetRoundedRect(rect, radius)); 
        }​​​​​​​ 
 
 
 
private GraphicsPath GetRoundedRect(Rectangle bounds, int radius) 
        {​​​​​​​ 
            int diameter = radius * 2; 
            Size size = new Size(diameter, diameter); 
            Rectangle arc = new Rectangle(bounds.Location, size); 
            GraphicsPath path = new GraphicsPath(); 
 
 
            if (radius == 0) 
            {​​​​​​​ 
                path.AddRectangle(bounds); 
                return path; 
            }​​​​​​​ 
 
 
            // top left arc   
            path.AddArc(arc, 180, 90); 
            // top right arc   
            arc.X = bounds.Right - diameter; 
            path.AddArc(arc, 270, 90); 
            // bottom right arc   
            arc.Y = bounds.Bottom - diameter; 
            path.AddArc(arc, 0, 90); 
            // bottom left arc  
            arc.X = bounds.Left; 
            path.AddArc(arc, 90, 90); 
            path.CloseFigure(); 
            return path; 
        }​​​​​​​ 
 
 
 
 
 
 
Please try this solution and let us know if it meets your requirement. 
 
Regards, 
Vijayalakshmi VR 


Marked as answer
Loader.
Up arrow icon