地图控件-弹出窗口显示在UWP的图钉后面

问题描述

我用地图创建了一个示例UWP应用程序，并将ItemsSource绑定到位置。当我单击任何位置时，我需要显示一个带有单击的图钉信息的TextBlock，但该TextBlock位于图钉的后面。

有人可以调查一下，请让我知道我在做什么错。

可以从https://1drv.ms/u/s!AiRUJ-H3vDEwgYgbI3nhZ-lvU8EZKg?e=6qPu4C下载示例项目，并附上屏幕截图以供参考。

解决方法

弹出窗口显示在UWP的图钉后面

恐怕您不能在地图顶部设置自定义xaml元素，因为当前它不提供这种zindex弹出式菜单。因此，对于这种情况，我们建议将TextBlock放置在MapItemsControl的DataTemplate中，并为其设置左上角的值，以确保不覆盖pin元素。

<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,new Thing("Place Three",17.4375,78.4482,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);

    }
}