NativeViewHost / WebView - Can ZOffset be Controlled?

How-to Discussions
1

Wondering if anyone has had any luck combining the Edge Navigator (a hamburger menu for example) and a native Web View page. I’ve tried playing with ZOffsets tonight, but they don’t seem to affect the WebView, which appears over the top of everything. I don’t want to “squish it down” - I’d rather the hamburger menu simply be layered ontop.

2

Hi!

Fuse renders its UI with OpenGL and when using NativeViewHost you are basically just putting a native view ontop the OpenGL view. Which means that the WebView wont be composited with the fuse UI.

But there is an undocumented workaround :slight_smile: You can set RenderToTexture="true" on NativeViewHost and it will render and composit the native view through a texture. This feature is undocumented because its not done and when using it the NativeUI wont respond to user input and invalidation is not predictable.

But I think its perfect for your usecase since you are probably not going to interact with the webview when interacting the the EdgeNavigator so you can just toggle it on and of like this for example:

<DockPanel>
    <EdgeNavigation />
    <Panel Width="150" Background="#0F0" Edge="Left" Alignment="Left">
        <WhileActive Threshold="0.01">
            <Change _nativeViewHost.RenderToTexture="true" />
        </WhileActive>
    </Panel>
    <Panel Background="#F00">
        <NativeViewHost ux:Name="_nativeViewHost" RenderToTexture="false">
            <WebView />
        </NativeViewHost>
    </Panel>
</DockPanel>

Let me know if you have any further questions :slight_smile:

3

Vegard Strand Lende wrote: But there is an undocumented workaround :slight_smile: You can set RenderToTexture="true" on NativeViewHost and it will render and composit the native view through a texture.

I tried your workaround and got error: “_nativeViewHost.RenderToTexture is not a valid property path”.

There’s something else I’m missing?

4

Hi!

What version of fuse are you running? Please try this in the new release (0.12), you can find it here :slight_smile:

5

Hi, Thanks!

No error after the Upgrade but the NativeView just disappears instead of render through a texture.

6

Hi!

The <NativeViewHost> is a layer on top of the graphcis. However, you can put more stuff inside the NativeViewHost, panels, rectangles etc. E.g.

<NativeViewHost>
    <Panel>
        <Text>I'm on top of the WebView!</Text>
        <WebView />
    </Panel>
</NativeViewHost>

Strange that RenderToTexture simply disappears in 0.12. We’d love a complete test case for that issue.

7

porto.bernardo@gmail.com wrote:

Hi, Thanks!

No error after the Upgrade but the NativeView just disappears instead of render through a texture.

I tried the RenderToTexture method and it did work in local and Android preview mode. But after building to final android apks, it turn out not work that webview still got to top layer and overlayed the side menu. My fuse is 0.12.4, quite fresh, and on Windows 8.1 target to Android, and I did upgrade Android SDK before building.

Finnaly, I added a translating animation to the NativeViewHost to move it to right when opening the side menu in edge navigation. This way worked.

8

Hi!

Thanks for posting. From what you are saying, it did not work for you towertop? Keep in mind when setting RenderToTexture to true we havent implemented proper invalidation, so if you set it to true before the webpage has loaded it might end up not rendering.

Try toggeling RenderToTexture when the webpage is loaded

Let me know if you have any further questions