Map control -- popup is shown behind pin in UWP

Question

i created a sample UWP application with a map and bind ItemsSource to locations. When i click any location i need to show a TextBlock with clicked pin info, but the TextBlock is going behind the pins.

Can someone please look into this and let me know what i am doing wrong here please.

sample project can be downloaded from https://1drv.ms/u/s!AiRUJ-H3vDEwgYgbI3nhZ-lvU8EZKg?e=6qPu4C and screen shot is attached for reference.

score 0 · Answer 1 · answered Aug 26 '20 at 13:36

popup is shown behind pin in UWP

I'm afraid you can't set the custom xaml elements on top of map, because currently, it does not provide such zindex poperty. So for this scenario, we suggest place the TextBlock in the MapItemsControl's DataTemplate, and give it left top value that to make sure the pin element will not covered.

<map:MapControl
    x:Name="myMap"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch">
    <map:MapItemsControl ItemsSource="{x:Bind ViewModel.Things}">
        <map:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Canvas map:MapControl.Location="{Binding Location}">
                        <Path
                            Margin="0"
                            Data="M14-32h-28v27h8l6 5 6-5h8z"
                            Fill="HotPink"
                            IsHitTestVisible="True"
                            Stroke="Black"
                            StrokeThickness="2">
                            <interactivity:Interaction.Behaviors>
                                <core:EventTriggerBehavior EventName="Tapped">
                                    <core:InvokeCommandAction Command="{Binding SelectMeCommand, Mode=OneWay}" />
                                </core:EventTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </Path>
                        <Grid
                            Canvas.Left="16"
                            Canvas.Top="-40"
                            Width="300"
                            Height="30"
                            Background="Blue"
                            Canvas.ZIndex="0"
                            Visibility="{Binding Avaiable}">
                            <TextBlock Text="{Binding Name, Mode=OneWay}" />
                        </Grid>
                    </Canvas>
                </Grid>
            </DataTemplate>
        </map:MapItemsControl.ItemTemplate>
    </map:MapItemsControl>
    <map:MapElementsLayer />

ViewModel

public class MainViewModel : BaseViewModel
{
    public MainViewModel()
    {
        Things = new ObservableCollection<Thing>
        {

            new Thing("Place One", 17.4947934, 78.3996441, SelectMe),
            new Thing("Place Two", 17.3616, 78.4747, SelectMe),
            new Thing("Place Three", 17.4375, 78.4482, SelectMe),
            new Thing("Place Four", 17.3930, 78.4730, SelectMe)
        };
    }

    public ObservableCollection<Thing> Things { get; }

    private Thing _selectedThing;

    public Thing SelectedThing { get => _selectedThing; private set => SetProperty(ref _selectedThing, value); }
    private Thing previousThing;
    private void SelectMe(Thing thing)
    {
        if (previousThing != null)
        {
            previousThing.Avaiable = false;
        }

        if (thing != null)
        {
            thing.Avaiable = true;
            previousThing = thing;
        }
    }
}

public class Thing : BaseViewModel
{
    public Thing(string name, double latitude, double longitude, Action<Thing> selector)
    {
        Name = name;
        Location = new Geopoint(new BasicGeoposition { Latitude = latitude, Longitude = longitude });
        SelectMeCommand = new RelayCommand(() => selector(this));
    }

    public string Name { get; set; }
    public Geopoint Location { get; set; }
    public ICommand SelectMeCommand { get; }
    private bool _avaiable;
    public bool Avaiable
    {
        get => _avaiable;

        set => SetProperty(ref _avaiable, value);

    }
}

Pins will be set dynamically, hence i can't give left top value that to make sure the pin element will not covered. this solution proposed will not solve the problem :( . — Pramod, Aug 26 '20 at 15:32
Above code could set the pin detail dynamically, I have make sample [here](https://github.com/ZhuMingHao/MapBug). pleas try it. — Nico Zhu, Aug 26 '20 at 17:48
As an alternative, for simple things like pushpins, it's strongly recommended to use a MapIcon rather than a pinned XAML element. MapIcons will be drawn as part of the map canvas. Things like a popup are best done in XAML which will always be above the map canvas, so changing your pushpins to a MapIcon should work best for your scenario. — Duncan Lawler, Aug 26 '20 at 18:02

Map control -- popup is shown behind pin in UWP

1 Answers1