Я искал простой способ, позволяющий использовать функциональность, аналогичную встроенной программе просмотра изображений (увеличение и уменьшение изображения двумя пальцами, увеличение / уменьшение масштаба и плавный эффект, если кто-то мягко нажимаетизображение в одном из направлений).
Изначально я пытался добиться этого с помощью элемента управления изображением, но это оказалось чрезвычайно сложным.
Я решил использовать элемент управления веб-браузера, поскольку он, казалось, предлагал именно то, что мне нужно, и у него было преимущество, заключающееся в отсечении его содержимого в родительский контейнер (элемент управления 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));
}
}
Как видите, я установил ширину 480 в метатеге Viewport.Это единственное значение, которое достаточно близко для центрирования изображения, поэтому оно выглядит естественно, как если бы оно было помещено в элемент управления изображением (оно вписывается в ширину экрана телефона и масштабируется соответствующим образом)
Я попытался установитьСвойство ширины метатега viewport для 'device-width', но с этой настройкой изображение выходит за пределы ширины экрана телефона при начальной загрузке.
Я также заметил, что с шириной, установленной на 480, если пользователь нажимаетв веб-браузере впервые браузер немного центрирует изображение, поэтому 480 - не идеальное значение.Я также обеспокоен тем, что это может быть не самым лучшим решением с учетом нескольких размеров экрана других устройств.
Мне любопытно, есть ли способ с несколькими устройствами для центрирования изображения в элементе управления веб-браузера.
Справочное изображение:
- Левое изображение - то, что я хочу, и как оно более или менее выглядит с шириной мета-тега Viewport = 480 (все изображениевидно)
- Правое изображение - как это выглядит с метатегом Viewport's width = device-width;(Чтобы уменьшить масштаб изображения и расположить его в центре, как на левом изображении, требуется один тап)