如何在 MapControl 中动态使用具有多个引脚的多个自定义弹出窗口

Question

I'm trying to add custom text to the title of my custom Popup but can't seem to find the correct way to find the control itself dynamically from the main page of my project. How can this be achieved?

Expected result

Current result

MainPage.cs

public sealed partial class MainPage: Page
 {
     public MainPage()
     {
         this.InitializeComponent();


         TabView tabView = mainPage.MyTabs;

         var tab1 = new TabViewItem { Header = "Tab 1"

         tabView.SelectedItem = tab1;


         var mapPage= new MapPage();

         tab1.Content = mapPage;


         var MyLandmarks = new List<MapElement>();

         BasicGeoposition snPosition = new BasicGeoposition { Latitude = 51.120005, Longitude = -0.1000001 };
         Geopoint snPoint = new Geopoint(snPosition);

         var spaceNeedleIcon = new MapIcon
         {
             Location = snPoint,
             NormalizedAnchorPoint = new Point(0.5, 1.0),
             ZIndex = 0,
             Title = "Space Needle",
             Image = mapPushpinStreamReference
         };

         BasicGeoposition snPosition2 = new BasicGeoposition { Latitude = 51.000000, Longitude = -0.100000 };
         Geopoint snPoint2 = new Geopoint(snPosition2);


         var spaceNeedleIcon2 = new MapIcon
         {
             Location = snPoint2,
             NormalizedAnchorPoint = new Point(0.5, 1.0),
             ZIndex = 0,
             Title = "Space N",
             Image = mapPushpinStreamReference
         };

         MyLandmarks.Add(spaceNeedleIcon);
         MyLandmarks.Add(spaceNeedleIcon2);

         var LandmarksLayer = new MapElementsLayer
         {
             ZIndex = 1,
             MapElements = MyLandmarks
         };

         pageMap.theMapControl.Layers.Add(LandmarksLayer);


         // Specify location of MapView centre.
         BasicGeoposition cityPosition = new BasicGeoposition() { Latitude 25.0, Longitude = -0.1 };
         var cityCenter = new Geopoint(cityPosition);

         // Set MapView centre
         pageMap.theMapControl.Center = cityCenter;
     }
 }

MapPage.xaml

     <Page
     x:Class="MyApp.MapPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:MyApp"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
     mc:Ignorable="d">
    
     <Grid x:Name="MyGrid">
         <Grid.RowDefinitions>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
    
         <Maps:MapControl
             Grid.Row="0"
             x:Name="MyMapControl"  
             MapServiceToken="[token]"
             ZoomLevel="8"
             MapElementClick="MyMapControl_MapElementClick">
    
             <Popup x:Name="PushpinPopup" IsLightDismissEnabled="True">
                 <Grid Background="Black">
                     <ScrollViewer>
                         <StackPanel Orientation="Vertical">
                             <TextBlock Text="{x:Bind PopupTitle, Mode=OneWay}" />
                             <Button x:Name="DescriptionButton" Content="Description"/>
                         </StackPanel>
                     </ScrollViewer>
                 </Grid>
             </Popup>
         </Maps:MapControl>
     </Grid>
 </Page>

MapPage.cs

 public sealed partial class MapPage: Page
 {
     public MapControl theMapControl { get; set; }

     public PageMap()
     {
         this.InitializeComponent();

         theMapControl = MyMapControl;
     }

     public static readonly DependencyProperty PopupTitleProperty =
         DependencyProperty.Register("PopupTitle", typeof(string),
             typeof(Popup),
             new PropertyMetadata(""));

     public static readonly DependencyProperty PushpinPopupSubtitleProperty =
         DependencyProperty.Register("PushpinPopupSubtitle", typeof(string),
             typeof(Popup),
             new PropertyMetadata(""));

     public string PopupTitle
     {
         get => GetValue(PopupTitleProperty).ToString();
         set { SetValue(PopupTitleProperty, value); }
     }

     private void MyMapControl_MapElementClick(MapControl sender, MapElementClickEventArgs args)
     {
         Point point = args.Position;
         PushpinPopup.IsOpen = true;
     }
 }

MainPage.xaml

<Page
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <CommandBar Grid.Row="0">
            ...
        </CommandBar>

        <Frame Name="MainFrame" Grid.Row="1"/>
    </Grid>
</Page>

Answer 1

How to use multiple custom popup with multiple pins dynamically in MapControl

For the requirement, you could move the popup into usercontrol and make tile and subtitle property.

Getting which MapIcon with MapIcon's tag where in the MapElementClick event. Then pass the title and subtitle value to UserControl 's title and subtitle property then show the popup.

MapIcon myClickedIcon = args.MapElements.FirstOrDefault(x => x.Tag.ToString() == "tag") as MapIcon;