none
How can I eliminate flickering in a WebBrowser control on a black background? RRS feed

  • Question

  • Hi all :)

    My application targets the .NET Framework 2.0 and I have a WebBrowser control on a black form.  The form loads with the WebBrowser control initially hidden.  Before displaying the form, it loads an HTML document with a black background and light-colored text from the hard drive.  The WebBrowser control is made visible in its OnDocumentCompleted event handler and only if an HTML document with a black background is detected, thus keeping the WebBrowser control hidden until the HTML document has finished loading.  This is done in an attempt to hide the initial white background of the WebBrowser control, but it works only partially.  There is still an element of flickering when a large HTML document is loaded.

    I tried setting the WebBrowser's style attributes and overloading OnPaintBackground, but to no avail.

    Here is the code block of my webbrowser component that is derived from System.Windows.Forms.WebBrowser:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Diagnostics;
    using System.Text;
    using System.Windows.Forms;
    using System.Drawing;
    using System.Threading;
    
    namespace TestApp
    {
        public partial class BlackWebBrowser : WebBrowser
        {
            public BlackWebBrowser()
                : base()
            {
                InitializeComponent();
                this.SetStyle(ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, true);
                this.UpdateStyles();
            }
    
            public BlackWebBrowser(IContainer container)
                //: base()
            {
                container.Add(this);
    
                InitializeComponent();
                this.SetStyle(ControlStyles.UserPaint | ControlStyles.AllPaintingInWmPaint, true);
                this.UpdateStyles();
            }
    
            protected override void OnNavigating(WebBrowserNavigatingEventArgs e)
            {
                base.OnNavigating(e);
                this.Hide();
            }
    
            protected override void OnDocumentCompleted(WebBrowserDocumentCompletedEventArgs e)
            {
                base.OnDocumentCompleted(e);
                if (this.Document.BackColor == Color.FromArgb(0, 0, 0))
                    this.Show();
            }
    
            protected override void OnPaintBackground(PaintEventArgs pevent)
            {
                pevent.Graphics.Clear(Color.Black);
            }
        }
    }
    


    How can I eliminate the flickering?

     


    • Edited by Ledigimate_ Friday, October 14, 2011 9:09 AM part of the code block was missing
    Friday, October 14, 2011 8:59 AM

All replies

  • protected override void OnDocumentCompleted(WebBrowserDocumentCompletedEventArgs e)
    {

        base.OnDocumentCompleted(e);

        if (this.Document.BackColor == Color.FromArgb(0, 0, 0))
             this.Show();

      }

    Hi,

    You have set the if conditions here. so, only if the background color of the document is black, then show itsself.

    If I misundertand, please show me the way on how to test it and put your code here. I will be appreciate to help you! :)

    Best Regards


    Neddy Ren [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, October 18, 2011 8:51 AM
  • You understood correctly.

    I noticed that it flickers with both large and small HTML documents.

    If you want to test my code anyway, you can do the following:

    1. Using Visual C#, create a new Windows Forms Application project, targeting the .NET Framework 2.0, and name it TestApp.
    2. In Form1's design view, set Form1's properties as follows:

      BackColor: Black
      WindowState: Maximized

    3. In the Solution Explorer, right-click the project and add a new component.  Name it BlackWebBrowser.
    4. In the Solution Explorer, click on BlackWebBrowser.cs and click "View Code".
    5. Delete everything in the code window
    6. Copy and paste the code block from the original post into the code window.
    7. Build the solution, but don't run it yet.
    8. Go to Form1's design view and drag a BlackWebBrowser control onto the form from the toolbox.
    9. Set blackWebBrowser1's properties as follows:

      Dock: None
      Location: 0, 50
      Size: 1000, 700
      Visible: False

    10. Drag two button controls onto the form from the toolbox and place them above the BlackWebBrowser control.
    11. Set button1's properties as follows:

      BackColor: ButtonFace
      Text: Large doc

    12. Set button2's properties as follows:

      BackColor: ButtonFace
      Text: Small doc

    13. Double-click button1 and copy and paste the following code into the button1_Click event handler:

      blackWebBrowser1.Navigate(Application.StartupPath + @"\large.mht");
      


    14. Go to Form1's design view, double-click button2 and copy and paste the following code into the button2_Click event handler:

      blackWebBrowser1.Navigate(Application.StartupPath + @"\small.mht");
      


    15. Rebuild the solution, but don't run it yet.
    16. In Solution Explorer, right-click the project and choose "Open Folder in Windows Explorer"
    17. Navigate to the "Debug" folder in the "bin" folder.  Keep this window open.
    18. Open the following SkyDrive page in your browser and download the two files you see there, saving them on the desktop:

      https://skydrive.live.com/?cid=896EDCC6DA29991C&id=896EDCC6DA29991C%21130


    19. Move the two downloaded files to the Debug folder you left open in step 17.
    20. Run the project.

    You will see how it flickers every time it loads a new document.

    • Edited by Ledigimate_ Tuesday, October 18, 2011 9:53 PM
    Tuesday, October 18, 2011 9:29 PM
  • Hi Ledigimate,

    Welcome to the MSDN Forum.

    Thank you for your detailed workthrough on how to demonstrate it.

    I have done your projects with both on Windows7[Visual Studio 2008 sp1] and Windows XP[Visual Studio 2005]. But I can't find its flickers when open the two mht files with the Custom WebBrowser.

    only One scenario is:

    When load the mht file, it may take 1 or 2 seconds to load the file and shows in the Custom WebBrowser. I think it is normal that when you navigate the mht file/uri to the webBrowser, the WebBrowser will let the delegate to load all the downloaded html code. If the code are too many, the job for the webBrowser should be taken more times.

    On the other hand, if the network is not good enough, the user will need to wait much time for downloading.

    If it is not the scenario, please feel free to let me know.

    Best Regards


    Neddy Ren [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, October 20, 2011 3:03 AM
  • Thank you, Neddy.

    I hope you understood what I mean why "flickering", but just in case, I'll try to explain here what I mean.

    The "flickering" I'm referring to is a white flash I see just before the contents of the mht file appear on the screen.  If I comment out the line of code in the OnNavigating event handler that hides the custom webbrowser, like this:

    protected override void OnNavigating(WebBrowserNavigatingEventArgs e)
    {
        base.OnNavigating(e);
        // this.Hide();
    }
    
    
    

    then I see the white flash for a few milliseconds longer.  If I uncomment it again, I still see the white flash, but only for a very short moment.  It's that white flash I'm talking about.


    • Edited by Ledigimate_ Thursday, October 20, 2011 7:54 PM
    Thursday, October 20, 2011 7:53 PM
  • WebBrowser control shows a blank white page when navigating to another page, the duration of the blank page depends on the load speed/network speed/size of target document, etc.

    As you mentioned, use this.Hide() in the OnNavigating method will reduce the flash interval. To decrease the interval more, you may put  this.Hide() before base.OnNavigating(e) statement;

    Another alternative is to put hide the WebBrowser control immediately after user click button of main form, something like:

     

            private void button1_Click(object sender, EventArgs e)

            {

                blackWebBrowser1.Visible = false;

                blackWebBrowser1.Navigate(Application.StartupPath + @"\large.mht");

            }

     


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread.

    Regards,
    Eric Yang
    Microsoft Online Community Support
    Monday, December 5, 2011 10:04 AM
  • > WebBrowser control on a black form. The form loads with the WebBrowser control initially hidden. [...]  The WebBrowser control is made visible in its OnDocumentCompleted event handler and only if an HTML document with a black background is detected [...] There is still an element of flickering when a large HTML document is loaded.



    take a look at the following example. it works without any flickering.

    using System.Drawing;
    using System.Windows.Forms;
    
    namespace WindowsFormsApplication9
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                var p = new Panel { BackColor = Color.Black, Dock = DockStyle.Fill, Parent = this };
                var b = new WebBrowser { Parent = p, Dock = DockStyle.Fill, Visible = false };
                b.Navigating += (s, e) => b.Visible = false;
                b.DocumentCompleted += (s, e) =>
                {
                    if(b.ReadyState == WebBrowserReadyState.Complete 
                        && b.Document.BackColor == Color.FromArgb(0, 0, 0))
                        b.Visible = true;
                };
                this.Size = new Size(800, 500);
                this.Menu = new MainMenu();
                this.Menu.MenuItems.Add("Load", (s, e) => b.Navigate(Application.StartupPath + "\\large.mht"));
            }
        }
    }
    
    
     

    • Proposed as answer by Malobukv Sunday, December 25, 2011 4:03 PM
    Tuesday, December 6, 2011 2:56 AM
  • Hi,

    Perhaps :

    add in register and for your "file.exe" a key DWORD

    \HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

    --> for IE11 = 0x00002af9

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace Windows { public partial class Form1 : Form { public Form1() { InitializeComponent(); BackColor = Color.Black; webBrowser1.Visible = false; webBrowser1.Navigate("https://social.msdn.microsoft.com/"); webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser1_DocumentCompleted); } private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { // Use this way to decide if the whole page document has been completely downloaded. if (e.Url == webBrowser1.Document.Url) { MessageBox.Show("Top page been loaded."); webBrowser1.Visible = true; } } } }



    Saturday, November 30, 2019 12:11 AM