WP7 web瀏覽器控件打開居中的圖像

我一直在尋找一種簡單的方式，以允許類似的功能內置的圖像查看器（放大和縮小有2個手指的圖像的，捏放大/縮小，並且浮動效果，如果有人輕輕地按下其中一個方向的圖像）。WP7 web瀏覽器控件打開居中的圖像

最初我試圖用Image控件來實現它，但事實證明這是非常困難的。

我決定去Webbrowser控件，因爲它似乎提供了我所需要的，並且它具有將內容剪裁到父容器（Image控件默認不會那樣）的好處。

我置於web瀏覽器控件中的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。這是唯一足夠接近圖像居中的值，因此它看起來很自然就好像置於圖像控件中一樣（它適合在手機屏幕的寬度內並適當縮放）

我試圖設置視口元標籤寬度屬性設置爲「設備寬度」，但使用此設置，圖像在初始加載時會超出電話屏幕寬度。

我也注意到，與寬度設置爲480，如果用戶點擊Web瀏覽器的第一次，在瀏覽器爲中心的圖像一點點，所以480不是一個完美的價值。我還擔心，鑑於其他設備的多屏尺寸，這可能不是最好的解決方案。

我很好奇，如果有一個跨設備的方式來中心的圖像在網頁瀏覽器控制。

參考圖片：

enter image description here

左圖片 - 我想要什麼，以及它或多或少看起來像與視口元標記的寬度= 480（整個圖像中看到的）
權圖像 - Viewport元標記的寬度=設備寬度; （需要一個單一的水龍頭，以縮小與它像左圖像的中心位置）

來源

2011-12-30 zyash

你可以嘗試使用CSS居中圖像（第二個例子：http://css-tricks.com/quick-css-trick-如何到中心-AN-對象恰好-內式CENTE r /） – keyboardP 2011-12-30 15:04:55

謝謝。我將研究一些CSS技術。雖然有一個問題 - 他們中的大多數都假定我知道圖像的大小。我在這裏沒有。我可能會利用JavaScript，但如果這會導致圖像在頁面加載後跳到正確的位置，那麼這是一個禁忌。 :( – zyash 2011-12-30 15:19:35

不知道它會是什麼樣子，但有一種方法是用另一個控件（'加載屏幕'或其他東西？）隱藏WebBrowser控件，然後在WebBrowser完全加載時隱藏新的控件，這樣，你可以在用戶不知道的情況下做所有的調整，並且只顯示最終結果 – keyboardP 2011-12-30 15:22:30

看來，沒有必要在所有設置meta標籤（它只是帶來了麻煩在我的情況）

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>

的伎倆

來源

2011-12-30 18:14:05 zyash

WP7 web瀏覽器控件打開居中的圖像

回答

相關問題