In my previous article, I explained how you can add MapIcon to your Map Control. In this article, I will be explaining how you can add Custom XAML control as MapIcon to your Map Control.
In order to display custom XAML on your map, you will make use of the MapItemsControl. MapItemsControl holds a collection of XAML controls to be displayed on a MapControl.
So let’s start!
Let us create a user control called CustomXAMLControl
to contain our custom XAML view which looks like this
with the following code:
<UserControl
x:Class="CustomMessageBox.CustomXAMLControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomMessageBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="50"
d:DesignWidth="100">
<Grid>
<Path Data="M1.69014,2.53521 L1.69014,39.7185 L43.0987,39.7185 L49.6661,50.3334 L56.6192,39.7189 L98.8717,39.7189 L98.8717,0.000216 z" Fill="#FFF4F4F5" Margin="1.19,-0.5,0.627,-0.833" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
</Grid>
</UserControl>
Next, in our MainPage.xaml we will add a MapItemsControl to our map and set the DataTemplate to contain our custom XAML
<Maps:MapControl x:Name="MyMap" Margin="0" d:LayoutOverrides="Height" MapServiceToken="[YOUR TOKEN HERE]" ZoomLevel="7" ZoomInteractionMode="GestureAndControl" IsTextScaleFactorEnabled="False">
<Maps:MapItemsControl x:Name="mapItems">
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<local:CustomXAMLControl Maps:MapControl.Location="{Binding Location}"
Width="100" Height="50" RenderTransformOrigin="0.5,0.5">
<local:CustomXAMLControl.RenderTransform>
<CompositeTransform TranslateX="{Binding Composite.TranslateX}"
TranslateY="{Binding Composite.TranslateY}"
Rotation="{Binding Composite.Rotation}"/>
</local:CustomXAMLControl.RenderTransform>
</local:CustomXAMLControl>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>
In the above code, we set the Maps:MapControl.Location
attached property of the CustomXAMLControl
to a value that will be supplied during binding and we also declare the RenderTransform property to control the display on the Map
Now, we nee a class model to handle data binding for the MapItemsControl. So let’s embed a class as follows:
public class MyIcons
{
public Geopoint Location { get; set; }
public CompositeTransform Composite { get; set; }
}
and the in the MainPage.xaml.cs, let us declare a method that will return a list of MyIcons
private List<MyIcons> InitInterestPoints(BasicGeoposition location, double rotation, double tranX, double transY)
{
List<MyIcons> icons = new List<MyIcons>();
icons.Add(new MyIcons
{
Location = new Geopoint(location),
Composite = new CompositeTransform
{
TranslateX = tranX,
TranslateY = transY,
Rotation = rotation
},
});
return icons;
}
Lastly, let us initialize our MapItemsControl and set the location
var location = new BasicGeoposition() { Latitude = 36.778259, Longitude = -119.417931 };
mapItems.ItemsSource = InitInterestPoints(location, 25, -50, -25);
The final result is:
If you have any question or feedback, kindly drop a comment below. HAPPY CODING!