I've noticed that whenever you have a WebView on your screen, it will be the top-most element of the UI. Is there a way to set a z-index?
There is no way to set z-index or anything similar, WebView is always on top of the XAML ("Airspace" issue). You have to hide web view if new content completely hides WebView or use WebViewBrush control.
http://blogs.msdn.com/b/wsdevsol/archive/2012/10/18/nine-things-you-need-to-know-about-webview.aspx#AN2
http://blogs.msdn.com/b/priozersk/archive/2012/08/13/how-to-display-charms-on-a-top-of-the-webview.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webviewbrush.aspx
From https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.aspx:
Note The "airspace problem" has been fixed starting with Windows 8.1.
Related
In my app i have a SplitView and set the content as Frame for each page. Each page contains its own CommandBar. This works without issue. Now i am creating VisualStates for a mobile view. In it i want to hide the PlitView in the closed state (inline). But now i need a way to add only the "HamburgerButton" (in my case a RadioButton), on the top, for opening the inline SplitView. I have done it also, but the "HamburgerButton" is overlapping each pages Text on the CommandBar. So what is the best solution, create only one CommandBar on the MainPage (where my SplitView is) and bind the content, or create a CommandBar for each Page?
Best regards
I think creating one CommandBar in the MainPage and binding the content may requires more work. Don't forget that you may need to bind the Primary and Secondary Buttons too.
If you want to use a CommandBar in each page and one HamburgerMenu in MainPage, you can try this method.
Create a separate top Row in the Grid for the CommandBar to occupy.
Horizontally stack a transparent Rectangle of width equal to your "HamburgerButton" along with the CommandBar and place it in the above created row.
Create VisualStates to trigger on Phone and set the visibility of the Rectangle accordingly to shift the CommandBar to the right.
Check out Template10 PageHeader Control (Search for "VisualStateNarrow" and "Spacer" in particular). If you are not particular about developing these boilerplate code yourselves, check out Template10. It has many helpful controls developed by the community. Please pardon me if you already knew about this.
You can creat the Page TOP bar and in MainPage use the splitview.
I'm having tons of issues trying to integrate Microsoft's WebView in my WinRT application and one of them is the following. I want to display the WebView and its content (which comes from a local offline server but that works like a charm) and I don't want the user to be able to click around ; basically completely disable user input on this WebView.
There is no IsEnabled property on this control so I tried:
Catching the many Pressed-like events and setting the Handled property of the event object to false in each one of the handlers
Catching the GotFocus event of the WebView to set the focus on another control immediately
Putting the WebView in a ContentControl, then set the IsEnabled property of the ContentControl to false
Obviously, none of these workarounds did work so I'm facing a brickwall here. Maybe some of you can help find a solution?
More details if that can help: the web page that is loaded contains an HTML5 canvas where the user can draw things (like in Microsoft Paint). There are also links (ahref). I dont want the user to be able to draw on this canvas, and I don't want them to be able to click on these links as well!
Thanks
Hi you can use a if the content is not animated then you can use a Rectangle instead of the WebView and in the rectangle you use a WebViewBrush, this actually take the webview and render it's content as an image on the rectangle. since it is an image no interaction is available on the rectangle, but if you have animation then you will lose them.
Generally this trick is used to show content onto the webview.
I have a scrollviewer which has a gridview as content.
In the datatemplate of the grid view, there is a 2 column grid.
In the first column there is a flipview and in the second a webview.
One gridviewitem take all the screen. When I scroll, the webview make an effect. It's like the webview is not fixed and does not scroll at the same time as the other elements.
Do you know why? Can I remove this effect?
Thank you
(I develop in C#/XAML)
The WebView can be difficult to work. To solve your problem, take a look at the WebViewBrush to render the content of your WebView onto a Rectangle that will behave better. Use WebViewBrush when scrolling and also to prevent the WebView from remaining in the foreground when it is supposed to be covered by an overlay but the WebView remains at the highest position in the z-order.
I have a WebView that I want to fade in after loading the page, I've tested fading out/in other elements but this is not working with control. Is there any way to get this visual effect to work with WebView?
WebView is implemented in a different way from most of the other elements. It is drawn in its own window even though it is mixed with your other XAML elements.
That' means that you cant' do certain thing with WebView
No transparency (which means no fading either).
Can't overlay another element over the Webvew
-
I have a web view which loads html content in a page.How its back ground can set to transparent.I set the html background transparent.
Try this:
<WebView DefaultBackgroundColor="Transparent"/>
To my knowledge that's not possible since this an actual HTML page you are rendering inside the Webview.
The webview does not derive from Control and because of this, it does not support the same templating possibilities as if you we using a control that derived from Control.
Also since browsers can't have a transparent website, the website will appear white per default.
This may not directly relate to your question however I think it's still important to know when using the Webview. There is some important remarks from the documentation on MSDN concerning UI and rendering:
WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through the SourceName property. WebViewBrush does not have this overlay limitation.
If you want to display an interactive WebView that only occasionally has overlapping content (such as a drop-down list or app bar), you can temporarily hide the WebView control when necessary, replacing it with an element using a WebViewBrush fill. Then, when the overlapping content is no longer present, you can display the original WebView again. For more info, see the WebView control sample.
For more information see the full documentation.
They have fixed it in Windows Universal App.
If you set DefaultBackgroundColor to Transparent
and
body, html {
background:transparent;
}
you will get what you want