UWP MapControl inW WPF app using XAML Islands

Question

I have included a MapControl in my WPF Core application using these instructions. I can correctly display the map but the problem is when I try to place any other interface element on top of the map. I have tried many ways but the map always overlays any other element I place on top of it, and therefore does not display. For example:

<Window x:Class="WpfMapControl.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfMapControl"
    xmlns:controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
    mc:Ignorable="d"
    Title="MainWindow" Height="400" Width="400">
<Grid>
    <controls:MapControl Grid.Column="1"
                x:Name="mapControl"/>
    <Rectangle Width="100" Height="100" Fill="Red"></Rectangle>
</Grid>

This should look like this:

But the result is this:

How can I place any other element on top of the MapControl?

Answer 1

How can I place any other element on top of the MapControl?

Short answer: You can't.

Just like a Windows Forms control in a WindowsFormsHost, a WindowsXamlHost is hosted in a separate HWND that is always drawn on top of the WPF elements.

From the docs:

A hosted Windows Forms control is drawn in a separate HWND, so it is always drawn on top of WPF elements.