Felix D. Felix D. - 13 days ago 8
C# Question

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 ?

Answer

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.