wpf 将 Dialog/WebBrowser 调整为网页宽度

Resize Dialog/WebBrowser to webpage width

提问by devfunkd

Is there a way to auto resize a window with a webbrowser control based on the initial webpage loaded?

有没有办法根据加载的初始网页使用 webbrowser 控件自动调整窗口大小？

Not having any luck with .Height or .Width properties, also tried the ActualWidth, ActualHeight ones too.

.Height 或 .Width 属性没有任何运气，也尝试了 ActualWidth、ActualHeight 属性。

Here is the XAML.

这是 XAML。

<dialog:Window x:Class="MyApplication.Widgets.Controls.DiagnosticsWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:dialog="clr-namespace:UI.Common.Dialog;assembly=UI.Common"
            xmlns:controls="clr-namespace:UI.Common.Controls;assembly=UI.Common"
            mc:Ignorable="d" 
            Height="500" Width="600" 
            ShowInTaskbar="False" 
            ResizeMode="NoResize"
            Title="{Binding Path=WindowTitle}"
            WindowStartupLocation="CenterOwner">

    <controls:DialogFrame Width="{Binding Path=WindowWidth}" Height="Auto" CloseCommand="Close">
        <WebBrowser x:Name="DiagnosticsWebBrowser" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </controls:DialogFrame>
</dialog:Window>

I tried doing the following without any luck, WPF: How to auto-size WebBrowser inside a Popup?

我尝试在没有任何运气的情况下执行以下操作， WPF：如何在弹出窗口中自动调整 WebBrowser 的大小？

Here is what I am currently getting... (Neither are resizing properly).

这是我目前得到的......（都没有正确调整大小）。

回答by adamattcha

The WPF web browser control doesn't expose the loaded page size needed in order to resize your window. The simplest solution would be to use a WinForms WebBrowser (as suggested by Noseratio), which you can embed in your WPF window using the WindowsFormsHost element:

WPF Web 浏览器控件不会公开调整窗口大小所需的加载页面大小。最简单的解决方案是使用 WinForms WebBrowser（根据 Noseratio 的建议），您可以使用 WindowsFormsHost 元素将其嵌入到 WPF 窗口中：

<Window 
    x:Class="MyApplication.Widgets.Controls.DiagnosticsWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    mc:Ignorable="d" 
    SizeToContent="WidthAndHeight"
    WindowStartupLocation="Manual">

    <WindowsFormsHost>
        <forms:WebBrowser 
            x:Name="DiagnosticsWebBrowser" 
            Width="420"
            Height="240"
            ScrollBarsEnabled="False" 
            DocumentCompleted="DiagnosticsWebBrowser_DocumentCompleted" />
    </WindowsFormsHost>
</Window>

Don't forget to add the System.Windows.Forms assembly to your project.

不要忘记将 System.Windows.Forms 程序集添加到您的项目中。

Then, in your code-behind:

然后，在您的代码隐藏中：

// Called after the document has been rendered
private void DiagnosticsWebBrowser_DocumentCompleted(object sender, System.Windows.Forms.WebBrowserDocumentCompletedEventArgs e)
    {
        // Resize the window
        int width = WebBrowser.Document.Body.ScrollRectangle.Size.Width;
        width = Math.Min(width, (int)SystemParameters.WorkArea.Width - 100);

        int height = WebBrowser.Document.Body.ScrollRectangle.Size.Height;
        height = Math.Min(height, (int)SystemParameters.WorkArea.Height - 100);

        DiagnosticsWebBrowser.Size = new System.Drawing.Size(width, height);
        UpdateLayout();

        // Re-center the window
        WindowStartupLocation = WindowStartupLocation.Manual;
        Left = (SystemParameters.WorkArea.Width - ActualWidth) / 2 + SystemParameters.WorkArea.Left;
        Top = (SystemParameters.WorkArea.Height - ActualHeight) / 2 + SystemParameters.WorkArea.Top;
    }

It's important to note that web pages don't have an "intrinsic" page size - i.e., they can use up whatever space they're given by the web browser. As a workaround, we create a WebBrowser with our preferred MINIMUM size (420x240 in the above example), then after the document is rendered we check to see if the document ended up being larger than that by looking at its ScrollRectangle.

重要的是要注意，网页没有“固有”页面大小——即，它们可以用完 Web 浏览器提供的任何空间。作为一种解决方法，我们创建了一个具有我们首选的 MINIMUM 大小（在上面的示例中为 420x240）的 WebBrowser，然后在呈现文档后，我们通过查看其 ScrollRectangle 来检查文档是否最终大于该尺寸。

A few notes: I constrain the window's size to SystemParamters.WorkArea so that if we have a really large document, we don't end up with a window that's larger than our desktop. I further offset the width and height by 100px to ensure there is also room for our window title, scrollbars, etc.

一些注意事项：我将窗口的大小限制为 SystemParamters.WorkArea，这样如果我们有一个非常大的文档，我们最终不会得到比桌面大的窗口。我进一步将宽度和高度偏移 100 像素，以确保我们的窗口标题、滚动条等也有空间。

Also note that WindowStartupLocation="CenterOwner" won't work since we're manually resizing the window after startup. Therefore, I changed WindowSTartupLocation to "Manual" and then manually center the window within the current work area.

另请注意 WindowStartupLocation="CenterOwner" 将不起作用，因为我们在启动后手动调整窗口大小。因此，我将 WindowStartupLocation 更改为“Manual”，然后手动将窗口居中放置在当前工作区中。

Finally, a person could probably get this technique to work with WPF's WebBrowser control by using some Win32 interop calls to get the browser's scroll info. Much easier to just use the WinForms control, though.

最后，通过使用一些 Win32 互操作调用来获取浏览器的滚动信息，人们可能会使用这种技术来处理 WPF 的 WebBrowser 控件。不过，仅使用 WinForms 控件要容易得多。

I hope this helps!

我希望这有帮助！

回答by greene

For WPF WebBrowser I set a constant width and then calculate height, so:

对于 WPF WebBrowser，我设置了一个恒定的宽度，然后计算高度，所以：

1. Set SizeToContentto "Height"and a constant width to the window.
2. Add reference to Microsoft.mshtml
3. Use the code below on WebBrowser LoadCompleted:
   

   
   var webBrowser = (WebBrowser)sender;
   var doc = (IHTMLDocument2)webBrowser.Document;
   var height = ((IHTMLElement2)doc.body).scrollHeight;
   webBrowser.Height = Math.Min(height, (int)SystemParameters.WorkArea.Height - 100);
   

1. 设置SizeToContent为"Height"窗口的恒定宽度。
2. 添加参考 Microsoft.mshtml
3. 在 WebBrowser 上使用以下代码LoadCompleted：
   

   
   var webBrowser = (WebBrowser)sender;
   var doc = (IHTMLDocument2)webBrowser.Document;
   var height = ((IHTMLElement2)doc.body).scrollHeight;
   webBrowser.Height = Math.Min(height, (int)SystemParameters.WorkArea.Height - 100);