Resizing custom user control according to data in the webBrowser control docked in it

Question

I have a webBrowser control named webBrowser1 that is added and docked as DockStyle.Full on a custom user control. The web-browser ac

Answer 1

You can get the current size of HTML window via WebBrowser.Document.Window.Size and resize the container control accordingly. Depending on how your WebBrowser control content receives dynamic updates, you'd probably need to do this after each update. You could also try WebBrowser.Document.Body.ScrollRectangle if Document.Window.Size doesn't grow in the expected way.

[EDITED] The following code works for me (IE10):

private void Form1_Load(object sender, EventArgs e)
{
    this.BackColor = System.Drawing.Color.DarkGray;
    this.webBrowser.ScrollBarsEnabled = false;
    this.webBrowser.Dock = DockStyle.None;
    this.webBrowser.Location = new System.Drawing.Point(0, 0);
    this.webBrowser.Size = new System.Drawing.Size(320, 200);
    DownloadAsync("http://www.example.com").ContinueWith((task) =>
    {
        var html = task.Result;
        MessageBox.Show(String.Format(
            "WebBrowser.Size: {0}, Document.Window.Size: {1}, Document.Body.ScrollRectangle: {2}\n\n{3}",
            this.webBrowser.Size,
            this.webBrowser.Document.Window.Size,
            this.webBrowser.Document.Body.ScrollRectangle.Size,
            html));
        this.webBrowser.Size = this.webBrowser.Document.Body.ScrollRectangle.Size;
    }, TaskScheduler.FromCurrentSynchronizationContext());
}

async Task<string> DownloadAsync(string url)
{
    TaskCompletionSource<bool> onloadTcs = new TaskCompletionSource<bool>();
    WebBrowserDocumentCompletedEventHandler handler = null;

    handler = delegate
    {
        this.webBrowser.DocumentCompleted -= handler;

        // attach to subscribe to DOM onload event
        this.webBrowser.Document.Window.AttachEventHandler("onload", delegate
        {
            // each navigation has its own TaskCompletionSource
            if (onloadTcs.Task.IsCompleted)
                return; // this should not be happening
            // signal the completion of the page loading
            onloadTcs.SetResult(true);
        });
    };

    // register DocumentCompleted handler
    this.webBrowser.DocumentCompleted += handler;

    // Navigate to url
    this.webBrowser.Navigate(url);

    // continue upon onload
    await onloadTcs.Task;

    // the document has been fully loaded, can access DOM here

    // return the current HTML snapshot
    return ((dynamic)this.webBrowser.Document.DomDocument).documentElement.outerHTML.ToString();
}

Answer 2

To resize your usercontrol you first need to get the size needed by the content. This can be achived with TextRender.MeasureText, like so:

public static int GetContentHeight(string content, Control contentHolder, Font contentFont)
{     
    Font font = (contentFont != null) ? contentFont : contentHolder.Font;
    Size sz = new Size(contentHolder.Width, int.MaxValue);
    int padding = 3;
    int borders = contentHolder.Height - contentHolder.ClientSize.Height;
    TextFormatFlags flags = TextFormatFlags.WordBreak;
    sz = TextRenderer.MeasureText(content, contentHolder.Font, sz, flags);
    int cHeight = sz.Height + borders + padding;

    return cHeight;             
}

In your case it's a bit more tricky, as the text contains HTML-tags wich needs to be filtered away, to get the correct height.. I belive this can be achived with RegEx or a simple algo wich removes all content between < and > from a string.. You may also have to create special handlig for some HTML-tags (I.E Lists)