Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 693
Goofy Avatar asked Oct 01 '22 09:10

Goofy


1 Answers

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]);
}
like image 77
Romasz Avatar answered Oct 12 '22 23:10

Romasz