Is it possible to click element inside NativeViewHost?

How-to Discussions
1

I would like to display a MapView and at its bottom - layered over the map - I would like to place a panel with a couple of buttons that the user may click and update the map accordingly. I read that “we can also layer native Controls over each other and form heirarchies”, but up to now I did not manage to make an element clickable.

For example, the following code should move the panel upwards when clicked. This happens only if the panel is placed outside NativeViewHost, but not when it’s inside NativeViewHost. I’m missing something or this may not be done?

<NativeViewHost>
    <Panel Alignment="Bottom" Padding="15" Color="#0007">
         <Clicked>
              <Move Y="-50" Duration="1" Easing="BackOut" />
         </Clicked>
    </Panel>
       
    <MapView Latitude="45.64953" Longitude="13.77682" Zoom="15">
         <MapMarker Latitude="45.64953" Longitude="13.77682" />
    </MapView>
 </NativeViewHost>
2

Hi Enrico,

you are doing everything right. There is a known issue where a MapView would swallow all clicks that happen on top of it. I’ve now linked the internal issue to this forum post and you’ll get notified when it’s solved.

Meanwhile, please check if wrapping the Panel in a GraphicsView helps:

<NativeViewHost>
    <GraphicsView>
        <Panel Alignment="Bottom" Padding="15" Color="#0007">
             <Clicked>
                  <Move Y="-50" Duration="1" Easing="BackOut" />
             </Clicked>
        </Panel>
    </GraphicsView>

    <MapView Latitude="45.64953" Longitude="13.77682" Zoom="15">
         <MapMarker Latitude="45.64953" Longitude="13.77682" />
    </MapView>
 </NativeViewHost>
3

There’s also this hack if all else fails.

4

Thank you for the prompt answer.

Using <GraphicsView> prevented the map to be diplayed (blank screen), but the hack you
indicated me worked fine.