WebView에서 작동하는 Metro에서 AppBar를 만들려면 어떻게해야합니까?

Question

그래서 C# Metro 앱에서 정상적인 AppBar를 사용할 수있게되었지만 문제는 html 페이지를 표시하는 데 앱이 필요하다는 것입니다. 페이지 너비와 높이의 100 %를 차지하는 WebView를 만들면 오른쪽 클릭과 가장자리 스 와이프에서 AppBar가 더 이상 나타나지 않습니다. AppBar이 그러한 WebView를 제자리에서 사용할 수있는 방법이 있습니까?

--Resolved--

내가 와이프를 감지 할 수 있도록 웹보기 주위에 1 픽셀의 경계를 추가 한 일을 결국 무엇

. WebView에 포함 된 내용이 시간이 지남에 따라 동적으로 변경되므로 WebViewBrush가 제대로 작동하지 않습니다. 대신 AppBar가 열렸을 때 WebView의 크기를 축소 한 다음 닫을 때 확장했습니다.

Answer 1

필립의 답변을 훔치려 고하지는 않지만 질문에 완전히 대답하기 위해서는 몇 가지 세부 사항이 필요하다고 생각합니다.

전체 화면을 실행하는 WebView를 사용하는 경우에도 오른쪽 클릭 또는 스 와이프를하면 AppBar 자체가 표시됩니다. AppBar.Opened 이벤트를 구독하여이를 증명할 수 있습니다. 흥미로운 점은 AppBar가 어딘지 모르게 어둡게 보이고 자동으로 닫힙니다. 자체가 닫히지 않더라도 WebView에서 가려져 있기 때문에 볼 수 없습니다.

필립은 AppBar가 열려있는 동안 WebView를 숨기고 WebViewBrush를 사용하는 것에 대해 올바른 생각을 가졌습니다. 당신은 여기에서하고의 좋은 예를 찾을 수 있습니다

웹보기와 WebViewBrush 사이에 교환하는 경우에 대해서는

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webviewbrush.aspx

, 내가 AppBar.Opened에 그것을하고 AppBar.Closed에 역 단순히 것입니다. AppBar는 가볍게 닫습니다. 즉 클라이언트 영역 밖에서 아무 곳이나 누르기 만하면 닫힙니다.

마지막 조언 하나 : 내 테스트에서 스 와이프 제스처가 가끔 삼키는 것 같았습니다. 그 문제는 WebView의 위쪽과 아래쪽에 1 픽셀 경계선을 배치 할 때 사라지는 것처럼 보였습니다. 귀하의 마일리지가 다를 수 있습니다.

Answer 2

XAML UI를 맨 위에 표시하는 동안 WebView를 숨기고 대신 WebViewBrush를 사용해야합니다.

Answer 3

위에서 제안한 것처럼 1px 경계선은 AppBar에 대해 상단/하단 스 와이프가 적용되도록 보장합니다. 그러나 @matthieu와 마찬가지로 마우스와 마우스 오른쪽 버튼을 클릭 할 때 AppBar가 안정적으로 열리는 데 문제가있었습니다. 나는 국경이 방법을 적용하면

<Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20"> 
    <Grid> 
     <WebView x:Name="contentView" Source="http://www.contoso.com"/> 
     <Rectangle x:Name="contentViewRect"/> 
    </Grid> 
</Border> 

는 AppBar도 안정적으로 열립니다

문제는 MSDN reference for AppBar.Closed에서 알 수 있듯이 나는 웹보기에 피어로 XAML 요소보다는 같은 부모를 포함이었다 마우스로

마지막으로주의해야 할 점은 BorderBrush="Transparent"을 사용하면 잘 작동하므로 못생긴 테두리를 실제로 볼 필요가 없다는 것입니다. 최종 XAML은 다음과 같습니다.

<Border BorderThickness="0,1,0,1" BorderBrush="Transparent"> 
    <Grid> 
     <WebView x:Name="WebView"></WebView> 
     <Rectangle x:Name="RectWebViewBrush"></Rectangle> 
    </Grid> 
</Border>