Size WPF Browser to its HTML-Content

Question

I want to show my Flair in a WPF Browser Control and size it to the smallest size possible.

XAML:

<Window x:Class="TestProject.MainWindow"
        [...]
        Title="MainWindow" 
        MaxHeight="500" 
        MaxWidth="500"
        Loaded="Window_Loaded"
        SizeToContent="WidthAndHeight" 
        Height="86.453" 
        Width="163.44">
<Grid>
    <WebBrowser x:Name="browser"></WebBrowser>        
</Grid>

Here is my Code-Behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private string CreateHTML()
    {
        StringBuilder builder = new StringBuilder();
        builder.AppendLine("<!DOCTYPE html>");
        builder.AppendLine("<html>");
        builder.AppendLine("<body>");
        builder.AppendLine("<a href=\"http://stackexchange.com/users/5852250\">");
        builder.AppendLine("<img src=\"http://stackexchange.com/users/flair/5852250.png?theme=dark\" width=\"208\" height=\"58\" alt=\"profile for Felix D. on Stack Exchange, a network of free, community-driven Q&amp;A sites\" title=\"profile for Felix D. on Stack Exchange, a network of free, community-driven Q&amp;A sites\">");
        builder.AppendLine("</a>");
        builder.AppendLine("</body>");
        builder.AppendLine("<html>");
        return builder.ToString();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        string htmlString = CreateHTML();            
        browser.NavigateToString(htmlString);            
    }        
}

I want the browser(to behave like SizeToContent="WidthAndHeight" for its content).

I have not found a working solution.

I embedded Microsoft.mshtml and tried to get sth. out of browser.Document but I did not make any progress so far.

Anyone done sth. similar ?

you don't need a full web browser, WPF's Image control can point to the flair directly, like this `` — Simon Mourier, Nov 25 '16 at 07:09

Reza Aghaei · Accepted Answer · 2019-10-11T04:07:45.207

5

You can set the size of browser to 0,0 before navigating and then after document load completed, you can set Width and Height of control to scrollWidth and scrollHeight of document:

private void browser_LoadCompleted(object sender, NavigationEventArgs e)
{
    browser.Width = ((dynamic)browser.Document).Body.parentElement.scrollWidth;
    browser.Height = ((dynamic)browser.Document).Body.parentElement.scrollHeight;
}
private void browser_Navigating(object sender, NavigatingCancelEventArgs e)
{
    browser.Width = 0;
    browser.Height = 0;
}

Note

1) The post is an answer to Size WPF Browser to its HTML-Content. If the concern is exactly showing the image, you can rely on an Image control as mentioned also in the first comment.

2) When showing your flair using WebBrowser control, you need to turn off scrolling by setting scroll="no" attribute for body tag. Also you need to set style=\"padding:0px;margin:0px;\" for body tag. Also remove borders of image by setting style="border:0px;" for img tag and also maybe some other html and css corrections.

3) In a windows with DPI settings set to 125% you need to multiply values by 0.8.

edited Oct 11 '19 at 04:07

answered Nov 24 '16 at 22:01

Reza Aghaei

120,393
18
203
398

1

When testing consider these notes: **1)** In a windows with DPI settings set to `120%` you need to multiply values by `0.8`. **2)** You can test it by navigating to a site like `http://www.google.com`. **3)** To test with your html, change the body tag to `builder.AppendLine("");` – Reza Aghaei Nov 24 '16 at 23:18
Did you test this ? Because I get a `Microsoft.CSharp.RuntimeBinder.RuntimeBinderException` cause the `((dynamic)WebBrowser.Document).Body` is null .... – Felix D. Nov 25 '16 at 16:39
The post is an answer to *Size WPF Browser to its HTML-Content*. If the concern is exactly showing your flair, you can rely on an `Image` control: `` as mentioned in the first comment. Also if for any reason you want to show the flair in `WebBrowser` control, you need to set `style=\"padding:0px;margin:0px;\"` and `scroll=\"no\"` for `body` tag. Also you should remove border of image and some tuning to make the content occupy less space as much as possible. – Reza Aghaei Nov 25 '16 at 16:40
Alright I got it. I placed your code in `Loaded`not `LoadCompleted`. Somehow the `Height` fits but the `Width`doesn't (Set to 3819) for the flair. But I guess I will get it to work. Thx ! – Felix D. Nov 25 '16 at 16:45
The width will work after you set `browser.Width = 0; browser.Height = 0;` in `Navigating` event. Also don't forget to correct the body: `builder.AppendLine("");` after running the code, here is the initial result which I get: [Screenshot](https://i.stack.imgur.com/CAVR5.png) – Reza Aghaei Nov 25 '16 at 16:48

Mark · Answer 2 · 2016-11-24T13:37:29.010

1

http://setmy.browsersize.com/ Does this help? This appears to be allowing you to set your browser to a set size for development purposes. I feel this might be a nudge in the right direction?

<a href='javascript:(function(w,h){
var n=window,d=document,s=n.screen;
function r(o){      
    n.resizeTo(Number(w)+o,h);
    return n.innerWidth||d.body.clientWidth;
} 
function c(t,u){
    return t>u?(t-u)>>1:0;
}
if(r(1)==r(0)) { 
    if(typeof p=="undefined"||p.closed){
        $("info").className="no_popup";
        p=n.open(n.location.href,
            "resize_popup",
            "menubar,
            toolbar,
            location,
            directories,
            status,
            resizable,
            titlebar,
            ".split(",").join("=yes,")+",
            width="+w+",height="+h+",
            left="+c(s.width,w)+",
            top="+c(s.height,h));
     } else {
            p.focus();
     }
     p.resizeTo(w,h);n=p;
}
if(w>s.width||h>s.height){
    n.moveTo(0,0);
}
})(640, 480);'>640 x 480</a>

edited Nov 24 '16 at 13:37

answered Nov 24 '16 at 13:26

Mark

436
4
18

Thanks for your efford but this seems not the solution I am looking for. It's just setting a fixed width/height for the browser. I want the browser so scale with the content. Setting a fixed size is only a solution if I can get the content dimensions. – Felix D. Nov 24 '16 at 13:35
i think there are ways of obtaining this information from JQuery - all you then need to do is pass it into the function to set the browser dimensions. – Mark Nov 24 '16 at 13:40
For instance - $(document).height() returns the height of the HTML document (as opposed to $(window).height() which returns the height of the viewport. same with .width() – Mark Nov 24 '16 at 13:43
Alright seems like that could work. But (how) can I get this into my `Browser Control` in WPF ? - Note that the html is created in code. There is no file or URL ! – Felix D. Nov 24 '16 at 13:44
There's always the possibility of writing inline javascript directly into the browser control in the same way that you are writing the HTML - you can even minify the JS to make it fit. I am sure there is a simpler way of doing this though - it call comes down to knowing what the size of the content will be before you render the window. If it really is a "flair" then you will know the size, but I am sure this was used only as an example! – Mark Nov 24 '16 at 14:00
You are right it's just an example. The flair size is fix :P I will try to include the JS. I'm just not used to it :D – Felix D. Nov 24 '16 at 14:03
Also review this question .... might help. http://stackoverflow.com/questions/15940671/wpf-how-to-auto-size-webbrowser-inside-a-popup – Mark Nov 24 '16 at 14:04

Size WPF Browser to its HTML-Content

2 Answers2

Linked