c#wpfwindows-phone-8webbrowser-controlautoresize

Reputation: 6128

Resizing WP8 WebBrowser Height to Fit Content

i have webbrowser control where i am displaying the content.

Here is the code :

<Grid MinHeight="80"
              Grid.Row="2"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
            <phone:WebBrowser Name="webBrowser1"
                              Height="Auto"
                              IsScriptEnabled="True"
                              ScriptNotify="webBrowser1_ScriptNotify"
                              HorizontalAlignment="Stretch" 
                              VerticalAlignment="Stretch"
                              VerticalContentAlignment="Center" 
                              HorizontalContentAlignment="Center" 
                              Foreground="Black" Width="Auto"></phone:WebBrowser>
        </Grid>

In .CS file;

   webBrowser1.NavigateToString("<html><head></head><body bgcolor=#d5e1f3><p style=font-family:arial><font size=3><center>" + content + "</center></font></p></body></html>");

here content is:

  string content = "Which word in the following sentence is the subject?<I>Paris is beautiful during Spring.</I>Which word in the following sentence is the subject Which word in the following sentence is the subject Which word in the following sentence is the subject";

But i have searched for this issue and found many posts but none of them works for me:

1) Vertical stretch WebBrowser to fit content inside

2) http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/

3) http://social.msdn.microsoft.com/Forums/wpapps/en-US/232eb27e-5a40-4725-a1dd-f68379dc76b7/webbrowser-sizing-to-fit-content?forum=wpdevelop

4) http://i.nt.ro/how-do-you-resize-a-webbrowser-control-to-fit-on-a-html-element/

How to solve this issue ?

EDIT

Ok the complete XAMl:

<phone:PhoneApplicationPage
    x:Class="POCBase.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Name="AppName" Text="" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Name="PageName" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid MinHeight="80" 
              Grid.Row="1"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.20*"></ColumnDefinition>
                <ColumnDefinition Width="0.80*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Height="60" 
                   Width="60"
                   Grid.Column="0"
                   Margin="0,0,20,0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Right"></Image>
            <TextBlock Text="Addition Rule "
                       Name="Inilinetext"
                       FontSize="32"
                       Grid.Column="1"
                       TextWrapping="Wrap"
                       Padding="10,0,0,0"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Left"
                       TextAlignment="Left"></TextBlock>
        </Grid>
        <Grid MinHeight="80"
              Grid.Row="2"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
            <phone:WebBrowser Name="webBrowser1"
                              Height="Auto"
                              IsScriptEnabled="True"
                              ScriptNotify="webBrowser1_ScriptNotify"
                              HorizontalAlignment="Stretch" 
                              VerticalAlignment="Stretch"
                              VerticalContentAlignment="Center" 
                              HorizontalContentAlignment="Center" 
                              Foreground="Black" Width="Auto"></phone:WebBrowser>
        </Grid>

        <Grid MinHeight="80" 
              Grid.Row="3"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.20*"></ColumnDefinition>
                <ColumnDefinition Width="0.80*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Height="60" 
                   Width="60"
                   Grid.Column="0"
                   Margin="0,0,20,0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Right"></Image>
            <TextBlock Text="Addition Rule "
                       FontSize="32"
                       Grid.Column="1"
                       TextWrapping="Wrap"
                       Padding="10,0,0,0"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Left"
                       TextAlignment="Left"></TextBlock>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

Upvotes: 5

Answers (4)

Ouadie

Reputation: 13185

To get the height from the webview, you can use

window.external.notify("rendered_height=document.getElementById('yourId').offsetHeight")

in body.onload and body.onresize

Here is a complete example of an AdaptativeWebview that handle scroll and resize

Upvotes: 0

R.Titov

Reputation: 3293

Try to use this script

<script type="text/javascript">
window.onload = function () {
    var elem = document.getElementById('content');
    window.external.Notify(elem.scrollHeight + '');
}
</script>

Upvotes: 0

Romasz

Reputation: 29792

To make this work your HTML must end with JavaScript which will inform the WebBrowser about document Size.

The code you have provided lacks this script, so no script is processed and webBrowser1_ScriptNotify is not fired.

Here at CodeProject is shown how it can look like.

EDIT

I've fought with it for a little while and finding Size of rendered Html is not so simple (for me - I'm a complete newbie in JavaScript, so maybe you will have better knowledge).

You can define your <script> in html, then at the end run it or define in body onLoad:

string content = @"Which word in the following sentence is the subject?<I>Paris is beautiful during Spring.</I>Which word in the following sentence is the subject Which word in the following sentence is the subject Which word in the following sentence is the subject";

string newHtmlString = @"<head></head><body bgcolor=#d5e1f3    
      onLoad=""window.external.notify('rendered_height='+document.getElementById('content').offsetHeight);"">
      <div id='content'><p style=font-family:arial><font size=3><center>";

newHtmlString += content + @"</center></p></div></body>";

Then after Navigating the following event should change your WebBrowser.Height:

private void webBrowser1_ScriptNotify(object sender, NotifyEventArgs e)
{
   string[] valuePair = e.Value.Split('=');
   if (valuePair != null && valuePair[0] == "rendered_height")
      webBrowser1.Height = double.Parse(valuePair[1]);
}

Upvotes: 4

Igor Kulman

Reputation: 16361

Have you found this http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/? Works for me.

Make sure IsScriptEnabled is set to true, subscribe to the ScriptNotify event

protected void WebBrowser_ScriptNotify(object sender, NotifyEventArgs e)
{
    Debug.WriteLine("called");
    WebBrowser thisBrowser = (WebBrowser)sender;
    int height = Convert.ToInt32(e.Value);
    double newHeight = height * 1.5;

    thisBrowser.Height = newHeight;
    Debug.WriteLine(newHeight.ToString());
}

and put his at the end of your html body (the articles does it a bit differently, works for me at the end of the body)

<script type="text/javascript">
    var elem = document.getElementById('content');
    window.external.Notify(elem.scrollHeight + '');    
</script>

And make sure you have a div id="content and that the debug messages get writtent to the output.

Upvotes: 0

Resizing WP8 WebBrowser Height to Fit Content

Answers (4)

Related Questions