调整WP8 WebBrowser高度以适应内容

时间:2014-03-07 06:58:51

标签: c# wpf windows-phone-8 webbrowser-control autoresize

我有webbrowser控件,我在哪里显示内容。

以下是代码:

<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>

在.CS文件中;

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

这里的内容是:

  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";

但是我已经搜索了这个问题并找到了很多帖子但是没有一个对我有用:

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/

如何解决这个问题?

修改

确定完整的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>

4 个答案:

答案 0 :(得分:4)

要完成这项工作,您的HTML必须以JavaScript结尾,这将通知WebBrowser有关文档大小的信息。

您提供的代码缺少此脚本,因此不会处理任何脚本,也不会触发webBrowser1_ScriptNotify

Here at CodeProject显示了它的外观。

修改

我已经与它争吵了一段时间,并且发现渲染的Html的大小并不那么简单(对我来说 - 我是一个完整的JavaScript新手,所以也许你会有更好的知识)。

您可以在html中定义<script>,然后在最后运行它或在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>";

然后在导航以下事件后应更改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]);
}

答案 1 :(得分:0)

你找到了这个http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/吗?适合我。

确保IsScriptEnabled设置为true,订阅ScriptNotify事件

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());
}

并把他放在你的html主体的末尾(文章做的有点不同,在身体的最后为我工作)

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

确保你有一个div id =&#34;内容,并且调试消息可以写入输出。

答案 2 :(得分:0)

尝试使用此脚本

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

答案 3 :(得分:0)

要从webview获取高度,可以使用

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

<{1}}和body.onload

中的

以下是处理滚动和调整大小的AdaptativeWebview的完整示例