CODEWITHSUNDEEP
c#htmlwpfwebbrowser-control
Felix D.
Felix D.

Reputation: 5093

Size WPF Browser to its HTML-Content

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 ?

Upvotes: 1

Views: 7160

Answers (2)

Reza Aghaei
Reza Aghaei

Reputation: 125197

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.

Upvotes: 6

Mark
Mark

Reputation: 466

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>

Upvotes: 1

Related Questions