CODEWITHSUNDEEP
c#.netwpfuser-controlswebbrowser-control
Gustavo Gonçalves
Gustavo Gonçalves

Reputation: 529

Resize body of a WebBrowser as UserControl

I am developing a screen, and this screen I have a grid. Within this grid, I have a UserControl WebBrowser. I'm using this component to display XML formatted and syntax is highlighted (with color). The text to be displayed is done via Binding, so that the component is a UserControl, as was done for the same modifications accepted Binding (since the original does not accept content via Binding). But I'm experiencing the following problem: when the user resizes the screen of the program at a certain point, the body of the WebBrowser beyond the boundaries of the grid, making the screen is strange at the bottom of the Grid. I tested with other components, and this problem does not occur.

Behold my UserControl:

<UserControl x: Class = "Geraes.Library.Core.GUI.WPF.Controls.XmlBrowserControl" 
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
x: Name = "thisControl">
   <Grid Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
     <WebBrowser Name="WebBrowser" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
   </ Grid>
</ UserControl>

And here, how I use it:

<ct:XmlBrowserControl XmlDoc="{Binding ContentString}" Grid.Row="1" />

Again, I can't understand why this is happening, since other components works as well inside this grid.

Another thing: we're using WebBrowser because until this moment, it's the best component to show a XML formatted and with syntax-colour. But if you know another one than its better and easy to use, i'm accepting suggestions. Any help is welcome.

Best regards, Gustavo.

Upvotes: 0

Views: 1540

Answers (1)

ScaryBob
ScaryBob

Reputation: 56

I was having a similar problem using the webbrowser control, in the end I switched to using awesomium and have found it much nicer to use.

I wanted to size the content of the webbrowser (or webcontrol) to fit content without scroll bars so I could use the scrollbars of the containing element (in my case a grid). I also started with a custom control but then switched to adding the the binding source as an attached property instead and setting the sizes and visibility once the content had loaded. I my case I was using you localing stored html string, but you could use a uri instead

using System;
using System.Windows;
using Awesomium.Windows.Controls;
using Awesomium.Core;

namespace utilities
{

    public class WebBrowserHelper {

        public static readonly DependencyProperty BodyProperty =
            DependencyProperty.RegisterAttached("Body", typeof (string), typeof(WebBrowserHelper), new PropertyMetadata(OnBodyChanged));

        public static string GetBody(DependencyObject dependencyObject) {
            return (string) dependencyObject.GetValue(BodyProperty);
        }

        public static void SetBody(DependencyObject dependencyObject, string body) {
            dependencyObject.SetValue(BodyProperty, body);
        }

        private static void ScrollDataReceivedDelegate(object sender, ScrollDataEventArgs e)
        {
            var webControl = (Awesomium.Windows.Controls.WebControl) sender;
            webControl.Height = e.ScrollData.ContentHeight;
            webControl.Width = e.ScrollData.ContentWidth;
            webControl.Visibility = Visibility.Visible;
        }

        private static void OnBodyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
            var webControl = (Awesomium.Windows.Controls.WebControl) d;
            webControl.LoadHTML((string)e.NewValue);
            webControl.ScrollDataReceived += new ScrollDataReceivedEventHandler(ScrollDataReceivedDelegate);
            webControl.LoadCompleted += delegate {
                webControl.RequestScrollData();
            };
        }
    }
}

And the namespaces:

xmlns:utilities="clr-namespace:utilities;assembly=utilities"
xmlns:awesome="clr-namespace:Awesomium.Windows.Controls;assembly=Awesomium.Windows.Controls"

And the xaml:

<awesome:WebControl 
    HorizontalAlignment="Left" 
    Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualWidth}" 
    Height="1" 
    utilities:WebBrowserHelper.Body="{Binding html}" 
    Visibility="Collapsed" />

Upvotes: 1

Related Questions