如何通过点击事件控制MapControl Pushpin文本及解决元素定位问题

我来帮你搞定这个问题～你遇到的核心问题是：在MapItemsControl的ItemTemplate里声明的控件，不能直接通过后台代码用名称访问——因为每个PointOfInterest数据项都会生成一份独立的模板实例，这些控件名称在后台是全局唯一的，根本找不到对应某一个Pushpin的那一个实例。

下面是完全满足你三个需求的实现方案，采用数据驱动的方式（这也是UWP/WinUI开发的推荐做法）：

第一步：修改数据模型，添加状态属性 #

我们需要给PointOfInterest类添加一个IsLabelVisible属性，用来控制文本标签的显示/隐藏，同时实现INotifyPropertyChanged接口，让UI能自动响应属性变化：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class PointOfInterest : INotifyPropertyChanged
{
    public string PinName { get; set; }
    public string DisplayName { get; set; }
    public Geopoint Location { get; set; }
    public Uri ImageSourceUri { get; set; }
    public Point NormalizedAnchorPoint { get; set; }

    private bool _isLabelVisible;
    public bool IsLabelVisible
    {
        get => _isLabelVisible;
        set
        {
            if (_isLabelVisible != value)
            {
                _isLabelVisible = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

第二步：修改XAML布局，绑定状态与事件 #

我们需要把文本标签的可见性绑定到IsLabelVisible属性，同时给Pushpin按钮绑定数据项到Tag属性，方便后台获取对应的POI对象；另外给MapControl添加点击事件，处理空白区域的隐藏逻辑：

<Page.Resources>
    <!-- 添加布尔值转可见性的转换器 -->
    <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
</Page.Resources>

<maps:MapControl x:Name="myMap" Loaded="MyMap_Loaded" Grid.Row="2" Tapped="MyMap_Tapped">
    <maps:MapItemsControl x:Name="MapItems">
        <maps:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <!-- 文本标签：通过绑定控制显示/隐藏 -->
                    <Border x:Name="PinText" 
                            Visibility="{Binding IsLabelVisible, Converter={StaticResource BoolToVisConverter}}"
                            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
                            Margin="0,0,0,5" 
                            Padding="10">
                        <TextBlock Text="{Binding DisplayName}" Style="{StaticResource BodyTextBlockStyle}"/>
                    </Border>
                    <!-- Pushpin按钮：绑定当前POI到Tag，方便后台获取 -->
                    <Button x:Name="mapItemIconButton" 
                            Click="mapItemIconButton_Click" 
                            Background="Transparent"
                            Tag="{Binding}">
                        <StackPanel>
                            <Image x:Name="PinImage" 
                                   Source="{Binding ImageSourceUri}" 
                                   maps:MapControl.NormalizedAnchorPoint="{Binding NormalizedAnchorPoint}" 
                                   maps:MapControl.Location="{Binding Location}">
                                <Image.Transitions>
                                    <TransitionCollection>
                                        <EntranceThemeTransition/>
                                    </TransitionCollection>
                                </Image.Transitions>
                            </Image>
                        </StackPanel>
                    </Button>
                </StackPanel>
            </DataTemplate>
        </maps:MapItemsControl.ItemTemplate>
    </maps:MapItemsControl>
</maps:MapControl>

第三步：修改后台代码，实现交互逻辑 #

我们需要保存POI列表的全局引用，然后实现三个核心逻辑：点击Pushpin切换标签状态、点击地图空白隐藏所有标签、确保同一时间只显示一个标签：

public sealed partial class Scenario3 : Page
{
    private List<PointOfInterest> _poiList; // 保存POI列表，方便全局操作

    public Scenario3()
    {
        this.InitializeComponent();
    }

    private void MyMap_Loaded(object sender, RoutedEventArgs e)
    {
        myMap.Center = MainPage.SeattleGeopoint;
        myMap.ZoomLevel = 16;
    }

    private void addXamlChildrenButton_Click(object sender, RoutedEventArgs e)
    {
        BasicGeoposition center = myMap.Center.Position;
        var pinUri = new Uri("ms-appx:///Assets/MapPin.png");
        
        _poiList = new List<PointOfInterest>() {
            new PointOfInterest() {
                PinName = "Pin1",
                DisplayName = "Place One",
                ImageSourceUri = pinUri,
                NormalizedAnchorPoint = new Point(0.5, 1),
                Location = new Geopoint(new BasicGeoposition() { Latitude = center.Latitude + 0.001, Longitude = center.Longitude - 0.001 })
            },
            new PointOfInterest() {
                PinName = "Pin2",
                DisplayName = "Place Two",
                ImageSourceUri = pinUri,
                NormalizedAnchorPoint = new Point(0.5, 1),
                Location = new Geopoint(new BasicGeoposition() { Latitude = center.Latitude + 0.001, Longitude = center.Longitude + 0.001 })
            },
            new PointOfInterest() {
                PinName = "Pin3",
                DisplayName = "Place Three",
                ImageSourceUri = pinUri,
                NormalizedAnchorPoint = new Point(0.5, 1),
                Location = new Geopoint(new BasicGeoposition() { Latitude = center.Latitude - 0.001, Longitude = center.Longitude - 0.001 })
            },
            new PointOfInterest() {
                PinName = "Pin4",
                DisplayName = "Place Four",
                ImageSourceUri = pinUri,
                NormalizedAnchorPoint = new Point(0.5, 1),
                Location = new Geopoint(new BasicGeoposition() { Latitude = center.Latitude - 0.001, Longitude = center.Longitude + 0.001 })
            }
        };
        
        MapItems.ItemsSource = _poiList;
    }

    private void mapItemIconButton_Click(object sender, RoutedEventArgs e)
    {
        // 获取当前点击的Pushpin对应的POI数据
        var button = sender as Button;
        var currentPoi = button.Tag as PointOfInterest;

        // 先隐藏所有标签，确保同一时间只显示一个
        HideAllLabels();

        // 切换当前标签的显示状态：隐藏→显示，显示→隐藏
        currentPoi.IsLabelVisible = !currentPoi.IsLabelVisible;
    }

    private void MyMap_Tapped(object sender, TappedRoutedEventArgs e)
    {
        // 点击地图空白区域时，隐藏所有标签
        HideAllLabels();
    }

    private void HideAllLabels()
    {
        if (_poiList == null) return;
        
        foreach (var poi in _poiList)
        {
            poi.IsLabelVisible = false;
        }
    }
}

方案说明 #

1. 解决控件找不到的问题：通过数据绑定替代直接操作控件，用IsLabelVisible属性控制标签显示，避免了后台查找模板内控件的麻烦。
2. 满足需求1：点击Pushpin时，先隐藏所有标签，再切换当前标签的显示状态，实现“折叠时显示”的逻辑。
3. 满足需求2：点击已显示标签的Pushpin会隐藏标签；点击地图空白区域触发MyMap_Tapped事件，直接隐藏所有标签。
4. 满足需求3：每次操作都先调用HideAllLabels方法，确保同一时间只有一个标签显示，避免重叠。

内容的提问来源于stack exchange，提问作者wbk727