height/width based on html content

[schmitch]

currently it would be great to actually fit a webview into a specific template, so that the html height/width will be set as the height of the webview.

this would enable to use native wpf scrollbars for a nice looking webview.

example, we have the following code:

<Grid Width="{Binding ElementName=ArticleFields, Path=ActualWidth}">
<wpf:WebView  Width="Auto" Height="CalculatedHeight" VerticalAlignment="Stretch"/>
</Grid>

while we try to get the CalculatedHeight based on the rendered document. it would be easier if the webview would support that nativly since it knows the inner document size.

AB#25254454

[david-risney]

Thanks for the feedback!

This feature is difficult to do generically because web content can change in response to changing the viewport. Various web pages have infinite scrolling where when you get to the bottom of the page they load in more content via script. We can still look into the feature its just not something we could recommend generically - you would have to know the content you're loading in the webview doesn't try to change its layout or content when changing the viewport.

[ukandrewc]

This is easy enough to do on DOMDocumentComplete

WebView2.ExecuteScript("document.body.clientHeight", Sub(r)
  Height = r.ResultAsJson
End Sub
)

[JakeRadMSFT]

+1 for resize.

When we re-size ourselves there is a flicker.

[icnocop]

document.body.clientHeight did not work for me.

This worked for me:
CSS:

/* hide scrollbars in WebView2 */
body::-webkit-scrollbar {
  display: none;
}

public async Task ResizeToContentAsync()
{
    var script = "document.body.children[0].getBoundingClientRect().height;";
    var heightString = await webView.ExecuteScriptAsync(script);
    if (int.TryParse(heightString, out int height))
    {
        this.Height = height;
    }
}

It's based on the stack overflow answer here:
https://stackoverflow.com/a/74564310/90287

Thank you.