Question

我一直在寻找一种简单的方法来允许类似于内置图像查看器的功能（用两根手指放大和缩小图像，缩放缩放/缩小和浮动效果，如果有人轻轻推动其中一个方向的图像。）

最初我试图用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>

支持View的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浏览器控件中心。

参考图片：

enter image description here

左图 - 我想要什么，以及Viewport元标记的宽度= 480（看到整个图像）或多或少的样子
右图 - 使用Viewport元标记的宽度=设备宽度时的样子; （需要单击一下以将其缩小并将其放置在中心，如左图所示）

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

诀窍

wp7 webbrowser控件打开一个居中的图像

1 个答案: