I have been looking for a simple way to allow a similar functionality to the built-in Image Viewer (Zooming in and out of an image with 2 fingers, pinch zoom / zoom out, and the floating effect, if someone gently pushes an image in one of the directions).
Initially I was trying to achieve it with the Image control, but It turned out to be extremely difficult.
I decided to go with the Webbrowser control, as it seemed to offer just what I need and it had a benefit of clipping it’s content to the parent container ( an Image control wouldn’t do that by default ).
I placed the Webbrowser control in the second Row of a 2-row parent Grid container (Its basically the default Page generated by 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>
The C# code backing the View is this:
public partial class 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));
}
}
As you may see, I set the width to 480 in the Viewport meta tag. This is the only value that is close enough to center the image so it appears naturally as if placed in an Image control (it fits within the width of the phones screen and is scaled appropriately)
I tried to set the viewport meta tag width property to ‘device-width’, but with this setting, the image reaches beyond the phones screen width upon initial load.
I also have noticed that with width set to 480, if a user taps on the Web browser for the first time, the browser centers the image a little bit, so 480 is not a perfect value. I am also concerned that this may not be the greatest solution given multiple screen sizes of other devices.
I am curious, if there is a cross-device way to center the image in the web browser control.
Reference Image:
- Left Image – What I want, and what it more or less looks like with Viewport meta tag’s width=480 (Entire image is seen)
- Right Image – What it looks like with Viewport meta tag’s width=device-width;
(A single tap is needed to zoom out and position it in the center like the left image)
It appears that there is no need for setting the meta tag at all (it just caused trouble in my case)
the html template:
does the trick