Change overlap order in a MapControl

Question

I need to add some elements to a MapControl, for example:

<Maps:MapControl HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Loaded="MapControl_Loaded" x:Name="mymap">
    <Rectangle x:Name="r1" Width="100" Height="100" Fill="Red"/>
    <Rectangle x:Name="r2" Width="20" Height="20" Fill="Green"/>
    <Rectangle x:Name="r3" Width="20" Height="20" Fill="Blue"/>
    <Rectangle x:Name="r4" Width="20" Height="20" Fill="Yellow"/>
    <Rectangle x:Name="r5" Width="20" Height="20" Fill="Purple"/>
</Maps:MapControl>

I set the position of rectangles via code:

        MapControl.SetLocation(r1, new Geopoint(new BasicGeoposition() {
            Latitude = 45.6593049969524,
            Longitude = 8.97672694176435
        }));
        MapControl.SetNormalizedAnchorPoint(r1, new Point(0.5, 0.5));
        MapControl.SetLocation(r2, new Geopoint(new BasicGeoposition()
        {
            Latitude = 45.6592821981758,
            Longitude = 8.97627767175436
        }));
        MapControl.SetNormalizedAnchorPoint(r2, new Point(0.5, 0.5));
        MapControl.SetLocation(r3, new Geopoint(new BasicGeoposition()
        {
            Latitude = 45.6589662004262,
            Longitude = 8.97650314494967
        }));
        MapControl.SetNormalizedAnchorPoint(r3, new Point(0.5, 0.5));
        MapControl.SetLocation(r4, new Geopoint(new BasicGeoposition()
        {
            Latitude = 45.6604913715273,
            Longitude = 8.97657556459308
        }));
        MapControl.SetNormalizedAnchorPoint(r4, new Point(0.5, 0.5));
        MapControl.SetLocation(r5, new Geopoint(new BasicGeoposition()
        {
            Latitude = 45.6580915488303,
            Longitude = 8.97816779091954
        }));

The rectangles are rendered from first (r1) to the last (r5), so r5 overlaps the others, r4 overlaps r3,r2,r1, etc...

Now I need to add another rectangle (r6), but I want r6 under r1:

    Rectangle r6 = new Rectangle();
    r6.Width = 70;
    r6.Height = 70;
    r6.Fill = new SolidColorBrush(Colors.Coral);
    mymap.Children.Insert(0, r6);
    MapControl.SetLocation(r6, new Geopoint(new BasicGeoposition()
    {
        Latitude = 45.6594054121524,
        Longitude = 8.97751081734896
    }));
    MapControl.SetNormalizedAnchorPoint(r6, new Point(0.5, 0.5));

I use "mymap.Children.Insert(0, r6);" instead "Children.Add" to place r6 in first position, but it doesn't works, it's rendered as if it was the last element.

I tried to use Canvas.SetZIndex, but it doesn't works on MapControl.

So the question is, how can I add r6 to a MapControl and render it as the first element?

What's the root? Is it Canvas? Oh and it would be Canvas.Zindex, not .SetZindex — Chris W., Sep 28 '16 at 13:46
The root is MapControl, not Canvas, so ZIndex doesn't works. Canvas.Zindex is used in xaml, in c# code you must use Canvas.setZIndex(element,value) — Stefano Balzarotti, Sep 28 '16 at 13:55
@StefanoBalzarotti It might probably work better with [this control](https://xamlmapcontrol.codeplex.com/) — Clemens, Sep 29 '16 at 11:51

score 3 · Accepted Answer · answered Sep 29 '16 at 08:26

The render order depends on when the control is added to MapControl. Although you inserted rectangle(r6) in first position but it's added at last, so it's rendered at first. To change the render order of the XAML controls in MapControl, we need to remove all controls in MapControl.Children and re-add them in the right order again like following:

private void myMap_Loaded(object sender, RoutedEventArgs e)
{
    //create a list to save the controls already in MapControl
    var originalChildren = new List<DependencyObject>();
    originalChildren = myMap.Children.ToList();

    //clear the controls
    myMap.Children.Clear();

    Rectangle r6 = new Rectangle();
    r6.Width = 70;
    r6.Height = 70;
    r6.Fill = new SolidColorBrush(Colors.Coral);

    //re-add into MapControl
    originalChildren.Insert(0, r6);

    foreach (var item in originalChildren)
    {
        myMap.Children.Add(item);
    }

    MapControl.SetLocation(r1, new Geopoint(new BasicGeoposition()
    {
        Latitude = 45.6593049969524,
        Longitude = 8.97672694176435
    }));
    MapControl.SetNormalizedAnchorPoint(r1, new Point(0.5, 0.5));
    MapControl.SetLocation(r2, new Geopoint(new BasicGeoposition()
    {
        Latitude = 45.6592821981758,
        Longitude = 8.97627767175436
    }));
    MapControl.SetNormalizedAnchorPoint(r2, new Point(0.5, 0.5));
    MapControl.SetLocation(r3, new Geopoint(new BasicGeoposition()
    {
        Latitude = 45.6589662004262,
        Longitude = 8.97650314494967
    }));
    MapControl.SetNormalizedAnchorPoint(r3, new Point(0.5, 0.5));
    MapControl.SetLocation(r4, new Geopoint(new BasicGeoposition()
    {
        Latitude = 45.6604913715273,
        Longitude = 8.97657556459308
    }));
    MapControl.SetNormalizedAnchorPoint(r4, new Point(0.5, 0.5));
    MapControl.SetLocation(r5, new Geopoint(new BasicGeoposition()
    {
        Latitude = 45.6580915488303,
        Longitude = 8.97816779091954
    }));

    MapControl.SetLocation(r6, new Geopoint(new BasicGeoposition()
    {
        Latitude = 45.6594054121524,
        Longitude = 8.97751081734896
    }));
    MapControl.SetNormalizedAnchorPoint(r6, new Point(0.5, 0.5));
}

I was hoping there was a cleaner solution, but it works. – Stefano Balzarotti Sep 29 '16 at 09:04 — Stefano Balzarotti, Sep 29 '16 at 09:04

Change overlap order in a MapControl

1 Answers1