Get NativeViewHost / MapView to render behind status bar

How-to Discussions
1

I have this basic map code

<App>
	<NativeViewHost Padding="0,0,0,0" Margin="0,0,0,0">
	    <MapView  Latitude="59.911567" Longitude="10.741030" Zoom="10">
	        <MapMarker Latitude="59.911567" Longitude="10.741030" Label="Fuse HQ"/>
	    </MapView>
	</NativeViewHost>
</App>

But now matter what i do, it always renders below the status bar which i though only happens when you put ux in a ClientPanel

file
W0mJqez0srtG-image-1493512365467.jpg720×1280

2

Wrote some more code

<App>
    <NativeViewHost Padding="0,0,0,0" Margin="0,0,0,0">
			<DockPanel>
				<Panel Dock="Top" Height="60" Color="#ff0000" Padding="20,20,20,20" Width="90%">
					<Text Font="Light">Test text</Text>
				</Panel>				
			</DockPanel>

		    <MapView  Latitude="59.911567" Longitude="10.741030" Zoom="10" ShowMyLocation="True">
		        <MapMarker Latitude="59.911567" Longitude="10.741030" Label="Fuse HQ"/>
		    </MapView>
    </NativeViewHost>
</App>

Realized there’s some sort of view clipping going because the Red panel clearly renders behind the status bar but is clipped.

this might be a viewport issue…

file
g326tHocJAH1-image-1493540017801.jpg720×1280

3

Hi Samuel,

you could give StatusBarConfig a go and see if setting a transparent or hidden status bar helps resolve the issue.

4

Setting the status bar visible to False causes this

	<Android.StatusBarConfig IsVisible="False" />
	<Panel>		
		<NativeViewHost>
			<DockPanel>
				<Panel Dock="Top" Height="60" Color="#ffffff" Padding="20,20,20,20" Width="90%">
					<Text Font="Light">Test text</Text>
				</Panel>				
			</DockPanel>

		    <MapView  Latitude="59.911567" Longitude="10.741030" Zoom="10" ShowMyLocation="True">
		        <MapMarker Latitude="59.911567" Longitude="10.741030" Label="Fuse HQ"/>
		    </MapView>
		</NativeViewHost>		
	</Panel>

Dunno how to set it to transparent, and i actually need the bar to be visible.

on a side note, it did push the panel downward.

file
AVzz48aDVAG8-image-1493541073395.jpg720×1280

5

You can set it to transparent by adding a Color property with 0 alpha on it. Like so:

<Android.StatusBarConfig IsVisible="True" Color="#fff0" />
6

Back to the same issue

file
lY9NeVmL1S54-image-1493541855810.jpg720×1280

Though when i put the nativeview in a panel and set the bg of that panel to red,
it looks like this

<App >
	<Panel Color="#ff0000">
		<Android.StatusBarConfig IsVisible="True" Color="#fff0"/>
		<NativeViewHost>
			<DockPanel>
				<Panel Dock="Top" Height="60" Color="#ffffff" Padding="20,20,20,20" Width="90%">
					<Text >Test text</Text>
				</Panel>				
			</DockPanel>

		    <MapView  Latitude="59.911567" Longitude="10.741030" Zoom="10" ShowMyLocation="True">
		        <MapMarker Latitude="59.911567" Longitude="10.741030" Label="Fuse HQ"/>
		    </MapView>
		</NativeViewHost>    
</Panel>		
</App>

This suggests it’s a positioning issue?

file
e3Oi6cXgi1yG-image-1493541956374.jpg720×1280

7

Hmm, interesting. You might try to play around with negative margins.

I do, however, suspect that this might be a device-specific issue. What hardware are we looking at?

Also, I will need to get more eyes on this, but that will only happen next week.

8

Huawei honor 8…

I do have another android device somewhere in the house.
let me get it and install the preview app there

As for your eyeballs, much appreciated and will wait since this just an aesthetic issue