How to add Z-Index to XAML controls in Windows 10 MapControl

Question

1 it was quite easy to add pushpins and whatever you liked to several layers, clear those layers and you could make sure that some items where in front of others. With Windows 10, that control is gone, and replaced by a control with half the things I really need but, with 3D and scenes (things that I don´t use)

My First attempt was, ok, MapPolygon has ZIndex because it inherits from MapElement and implements

internal interface IMapElement
{
    System.Boolean Visible { get; set; }
    System.Int32 ZIndex { get; set; }
}

Great, lets implement that in my UserControl, so the map control knows how to draw each element. SURPRISE! that interface is internal, you cannot do anything but stare at it.

Second attampet, maybe they use a canvas to draw the elements, and Canvas has a ZIndex, let´s well, needless to say it didn´t work

pin.SetValue(Canvas.ZIndexProperty);

Can anybody please tell me if there is anything like layers in the UWP MapControl or if there is a way to tell that MapControl in which index to draw the items?

Regards.

Nope I didn´t. you just have to do tricks like adding elements after ordering in some way. — Fritjof Berggren, May 29 '16 at 22:33

score 2 · Answer 1 · answered Jun 13 '16 at 10:34

I am not sure whether it solves your problem but definitely it solved my issue and it could be helpful for other people as well.

public class MapControl : DependencyObject
{

    #region Dependency properties

    public static readonly DependencyProperty ZIndexProperty = DependencyProperty.RegisterAttached("ZIndex", typeof(int), typeof(MapControl), new PropertyMetadata(0, OnZIndexChanged));

    #endregion


    #region Methods

    public static int GetZIndex(DependencyObject obj)
    {
        return (int)obj.GetValue(ZIndexProperty);
    }

    private static void OnZIndexChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ContentControl us = d as ContentControl;

        if (us != null)
        {
            // returns null if it is not loaded yet
            // returns 'DependencyObject' of type 'MapOverlayPresenter'
            var parent = VisualTreeHelper.GetParent(us);

            if (parent != null)
            {
                parent.SetValue(Canvas.ZIndexProperty, e.NewValue);
            }
        }
    }

    public static void SetZIndex(DependencyObject obj, int value)
    {
        obj.SetValue(ZIndexProperty, value);
    }

    #endregion

}

Namespaces

xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"
xmlns:mapHelper="using:yournamespace"

Control

<maps:MapControl>
    <maps:MapItemsControl ItemsSource="...">
        <maps:MapItemsControl.ItemTemplate>
            <DataTemplate x:DataType="...">
                <YourTemplate mapHelper:MapControl.ZIndex="{x:Bind ZIndex, Mode=OneWay}" />
            </DataTemplate>
        </maps:MapItemsControl.ItemTemplate>
    </maps:MapItemsControl>
</maps:MapControl>

I had the same issue and I solved it by following your answer but with a few changes. In my case `YourTemplate` was a `StackPanel` so in order for the above code to work I had to remove the `ContentControl us = d as ContentControl;` because it always casted it to null. So I removed the outer if statement and everything worked as expected. Thank you. — Cosmin, Jul 07 '16 at 18:33

score 0 · Answer 2 · answered Mar 30 '16 at 04:49

Can't you do this declaratively? Consider the following XAML:

<maps:MapControl x:Name="myMap" HorizontalAlignment="Left">
  <maps:MapItemsControl x:Name="MapItems" ItemsSource="{Binding}">
    <maps:MapItemsControl.ItemTemplate>
      <DataTemplate>
        <Button x:Name="MapItemButton" Background="Transparent">
          <StackPanel>
            <Border Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
              <TextBlock Text="{Binding Title}"/>
            </Border>
            <Image Source="{Binding ImageSourceUri}" maps:MapControl.Location="{Binding Location}">
              <Image.Transitions>
                <TransitionCollection>
                  <EntranceThemeTransition/>
                </TransitionCollection>
              </Image.Transitions>
            </Image>
          </StackPanel>
        </Button>
      </DataTemplate>
    </maps:MapItemsControl.ItemTemplate>
  </maps:MapItemsControl>
</maps:MapControl>

Here, I'm basically binding images (mapelements) directly to the map's location using regular XAML features. Use grid layers, stackpanels and whatnots to control what goes on top, what goes under etc. You can also construct this via codebehind of course.

I know I can apply a datatemplate to the controls now but what I wanted is if I have 50 elements and if I click in the 25th element, bring it to the front changing the ZIndex property easily. — Fritjof Berggren, Mar 30 '16 at 18:31

How to add Z-Index to XAML controls in Windows 10 MapControl

2 Answers2