wp7 webbrowser 컨트롤이 중심 이미지 열기

비슷한 기능을 내장 이미지 뷰어에 허용하는 간단한 방법을 찾고있었습니다. (손가락 두 개로 이미지 확대/축소, 핀치 확대/축소, 누군가가 부드럽게 하나의 방향으로 이미지를 밀면 떠 다니는 효과).wp7 webbrowser 컨트롤이 중심 이미지 열기

처음에는 Image 컨트롤로 구현하려고했지만 매우 어려웠습니다.

웹 브라우저 컨트롤을 사용하기로 결정했습니다. 필요한 항목 만 제공하는 것으로 보였으므로 부모 컨테이너에 내용을 클리핑하는 이점이 있습니다 (이미지 컨트롤은 기본적으로 그렇게하지 않을 것입니다).

나는

<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# 코드는 이것이다 (그것의 기본적으로 기본 페이지가 비주얼 스튜디오에 의해 생성) 2 행 부모 Grid 컨테이너의 두 번째 행에서 WebBrowser 컨트롤을 배치

공공 부분 클래스 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으로 설정했습니다. 이 값은 이미지를 가운데에 맞출 수있는 유일한 값으로, 이미지 컨트롤에 배치 된 것처럼 자연스럽게 표시됩니다 (폰 화면의 너비에 맞고 적절하게 조정됩니다).

뷰포트 메타를 설정하려고했습니다. 태그 너비 속성을 'device-width'로 설정하지만이 설정을 사용하면 초기로드시 이미지가 휴대 전화 화면 너비를 초과합니다.

너비를 480으로 설정 한 경우 사용자가 처음으로 웹 브라우저를 두드리면 브라우저가 이미지의 중심을 약간 잡아서 480이 완벽한 값이 아님을 알았습니다. 또한 다른 장치의 여러 화면 크기를 고려할 때 이것이 가장 좋은 솔루션이 아닐 수도 있습니다.

웹 브라우저 컨트롤에서 이미지의 중심을 정할 수있는 교차 장치 방식이 있다면 궁금합니다.

참조 이미지 :

enter image description here

왼쪽 이미지 - 내가 원하는 무엇, 그것은 더 많거나 적은 외모 뷰포트 메타 태그의 폭과 같은 480 (전체 이미지를 볼 수 있습니다) 어떤
오른쪽 이미지 - 뷰포트 메타 태그의 width = device-width; 는

출처

2011-12-30 zyash

당신 수 이미지를 (중앙에 CSS를 사용하려고 두 번째 예 : http://css-tricks.com/quick-css-trick- 어떻게 중심에 - 객체 - 정확히 - 중심에 - r /) – keyboardP

감사합니다.나는 CSS 기법을 조사 할 것이다. 문제가 있습니다. 대부분 이미지의 크기를 미리 알고 있다고 가정합니다. 여기서는 그렇지 않습니다. 아마 자바 스크립트를 활용할 수는 있지만 이미지가 페이지로드 후 올바른 위치로 '점프'하게되면 no-no가됩니다. : – zyash

어떻게 될지 모르지만, 한 가지 방법은 다른 컨트롤 ('화면 불러 오기'등)을 사용하여 WebBrowser 컨트롤을 숨긴 다음 WebBrowser가 완전히로드되었을 때 새 컨트롤을 숨기는 것입니다. 사용자가 알지 못하는 사이에 모든 조정 작업을 수행하고 최종 결과 만 표시 할 수 있습니다. – keyboardP

(단지 내 경우에는 문제가 발생) 모두에서 메타 태그를 설정할 필요가없는 것으로 보인다 (하나의 탭이 축소 왼쪽 이미지처럼 중앙에 위치하기 위해 필요)

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 webbrowser 컨트롤이 중심 이미지 열기

답변

관련 문제