wp7 webbrowser 控件打开居中的图像答案

【问题标题】：wp7 webbrowser control opening a centered imagewp7 webbrowser 控件打开居中的图像
【发布时间】：2011-12-30 14:59:09
【问题描述】：

我一直在寻找一种简单的方法来实现与内置图像查看器类似的功能（用两根手指放大和缩小图像、捏拉缩放/缩小以及浮动效果，如果有人轻轻推动一个方向的图像）。

最初我试图通过 Image 控件来实现它，但结果非常困难。

我决定使用 Webbrowser 控件，因为它似乎提供了我所需要的东西，而且它的好处是可以将其内容剪切到父容器（默认情况下 Image 控件不会这样做）。

我将 Webbrowser 控件放置在 2 行父 Grid 容器的第二行（它基本上是 Visual Studio 生成的默认页面）

<Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <toolkit:PerformanceProgressBar x:Name="ProgressBar" IsIndeterminate="True" />
            <phone:WebBrowser Visibility="Collapsed" x:Name="BrowserWindow" IsScriptEnabled="True" />
</Grid>

支持视图的 C# 代码是这样的：

公共部分类 ItemDetailView : PhoneApplicationPage {

public static string HtmlTemplate =
    @"<!doctype html>
      <html>
        <head>
        <meta name='viewport' content='initial-scale=0.1,minimum-scale=0.1,user-scalable=yes,width=480' />
        <title></title>
        <script type='text/javascript'>
        function imageLoadFailed() {{
            window.external.notify('ImageLoadFailed');
        }}
        </script>
        </head>
        <body style='margin:0; padding:0; width:100%; background-color: {0};'>
        <div style='margin:0 auto;'><img onerror='imageLoadFailed()' src='{1}' alt='' /></div>
        </body>
      </html>";


public ItemDetailView() {
    InitializeComponent();
    this.BrowserWindow.LoadCompleted += (s, e) => {
        this.ProgressBar.IsIndeterminate = false;
        this.BrowserWindow.Visibility = Visibility.Visible;
    };

    this.BrowserWindow.ScriptNotify += (s, e) => {
        if (e.Value == "ImageLoadFailed") {
            MessageBox.Show("Image failed to load");
        }
    };
}

public ItemDetailViewModel VM {
    get {
        return this.DataContext as ItemDetailViewModel
    }
}

public bool IsBackgroundBlack() {
    return Visibility.Visible == (Visibility)Resources["PhoneDarkThemeVisibility"];
}
protected override void OnNavigatedTo(NavigationEventArgs e) {
    base.OnNavigatedTo(e);
    App app = App.Current as App;
    this.VM.Item = app.CurrentItem;

    string css = "";
    if (this.IsBackgroundBlack()) {
        css = "black";
    }
    else {
        css = "white";
    }
    this.BrowserWindow.NavigateToString(string.Format(ItemDetailView.HtmlTemplate, css, app.CurrentItem.Url));

}

}

如您所见，我在 Viewport 元标记中将宽度设置为 480。这是唯一一个足够接近图像居中的值，因此它看起来很自然，就像放置在图像控件中一样（它适合手机屏幕的宽度并适当缩放）

我尝试将视口元标记宽度属性设置为“设备宽度”，但使用此设置，图像在初始加载时超出手机屏幕宽度。

我还注意到，当宽度设置为 480 时，如果用户第一次点击 Web 浏览器，浏览器会使图像居中一点，因此 480 并不是一个完美的值。我还担心，考虑到其他设备的多种屏幕尺寸，这可能不是最好的解决方案。

我很好奇，是否有一种跨设备的方式将图像置于 Web 浏览器控件的中心。

参考图片：

左图 - 我想要的，以及 Viewport 元标记的宽度 = 480 时它或多或少的样子（可以看到整个图像）
右图 - Viewport 元标记的宽度=设备宽度；（需要单击一下来缩小并像左图一样将其定位在中心）

【问题讨论】：

您可以尝试使用 CSS 将图像居中（第二个示例：css-tricks.com/…）
谢谢。我将研究一些 CSS 技术。但是有一个问题 - 他们中的大多数人都认为我预先知道图像的大小。这里我没有。我可能可以利用 JavaScript，但如果这会导致图像在页面加载后“跳”到正确的位置，那么这是不行的。 :(
不确定它会是什么样子，但一种解决方法是用另一个控件（“加载屏幕”或其他东西？）隐藏 WebBrowser 控件，然后在 WebBrowser 完全完成时隐藏新控件加载。这样，您就可以在用户不知情的情况下进行所有调整，只向他们展示最终结果。
嗯，这实际上是我已经在做的事情了。好的，在这种情况下，某些 JavaScript 可能没那么糟糕。我会看看我能做到什么。

标签： windows-phone-7

【解决方案1】：

似乎根本不需要设置元标记（在我的情况下它只是造成了麻烦）

html 模板：

<!doctype html>
              <html>
                <head>
                <title></title>
                <script type='text/javascript'>
                function imageLoadFailed() {
                    window.external.notify('ImageLoadFailed');
                }
                </script>
                </head>
                <body style='background-color: {0};'>
                <img width='100%' onerror='imageLoadFailed()' src='{1}' alt='' /></div>
                </body>
              </html>

成功了

【讨论】：