Resizing custom user control according to data in

Question

I have a webBrowser control named webBrowser1 that is added and docked as DockStyle.Full on a custom user control. The web-browser accepts some HTML text dynamically and displays it. I disabled the scroll bars of the webBrowser control. My problem is that whenever the content is somewhat lengthy, the webBrowser hides it from below. But the requirement of my project objective is that the webBrowser must not show either scroll bars or it should not hide some of the content. The content must be completely shown as it is without scrolling. That means the user control on which the webBrowser is docked must resize itself according to webBrowser's content. So, can anyone please suggest me how to achieve this? I searched all over the internet and SO but found nothing.

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)