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!

It is very easy to use map in the Universal Windows Platform but first of all you need to register at Bing Maps Portal to obtain a token. After this you can add the following XAML code to your code:

<Maps:MapControl x:Name="MyMap" Margin="0" MapServiceToken="[YOUR TOKEN HERE]" ZoomLevel="7" ZoomInteractionMode="GestureAndControl" IsTextScaleFactorEnabled="False"/>

To add MapIcon to your Map Control, use this code:

var location = new BasicGeoposition() { Latitude = 36.778259, Longitude = -119.417931 };
MapIcon icon = new MapIcon { Location = new Geopoint(location), NormalizedAnchorPoint = new Point(0.5, 0.5), ZIndex = 0, Title = "My Office" };

The above code will add the default MapIcon to your Map Control

To show a customized icon, set the Image property of the MapIcon like this:

icon.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/Images/icon.png"));

And finally, add the MapIcon to the MapElements of your Map Control

MyMap.MapElements.Add(icon);
MyMap.Center = new Geopoint(location);

The result look like this:

Nice and Easy!

Watch out for part 2 of this article to learn how to add custom controls to your Map Control.

Kindly drop your comment or feedback, I’ll be glad to hear from you.

For Universal Apps, the new APIs require you to use await MessageDialog().ShowAsync() (in Windows.UI.Popups) to bring it into line with Win 8.1.

var dialog = new MessageDialog("Your message here");
await dialog.ShowAsync();

The above code produces the result shown below:

You can go ahead to add your custom commands such as:

dialog.Title = "Delete?";
dialog.Commands.Add(new UICommand { Label = "Yes", Id = 0 });
dialog.Commands.Add(new UICommand { Label = "No", Id = 1 });

The above implementation of message box cannot be customized to fit into your theme without really getting your hands dirty and if you don’t mind you can go ahead.

A cheap way to quickly display a custom message box in your app is to use the ContentDialog in the Universal Windows template.

ContentDialog class represents a dialog box that can be customized to contain checkboxes, hyperlinks, buttons and any other XAML content. Read more here.

To add ContentDialog, Right-Click on your root project folder, Add -> New Item -> ContentDialog, give it a name and add to your project.

Then you have this:

Your XAML code will look like this:

<ContentDialog
x:Class="CustomMessageBox.MessageDisplay"
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"
Title="TITLE"
PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick">

<Grid>
</Grid>
</ContentDialog>

The next thing is to remove the following part from your XAML code:

PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick"

The trick here starts by removing the default buttons and adding your own buttons (“OK” & “Cancel”) to the ContentDialog. You can style these buttons as you like and use labels apart from “OK” & “Cancel”.

<Grid>
<StackPanel Orientation="Horizontal">
<Button x:Name="OkBtn" Content="OK"></Button>
<Button x:Name="CancelBtn" Content="Cancel" Margin="10,0,0,0"></Button>
</StackPanel>
</Grid>

Next, we want to handle the click events of our buttons, this is where we will set the result of the dialog. The click events of your buttons should look like this:

 public sealed partial class MessageDisplay : ContentDialog
 {
 public MessageDisplay(string message, string title)
 {
 this.InitializeComponent();

 this.Message = message;
 this.MessageTitle = title.ToUpper();
 this.DataContext = this;
 }

 public string Message { get; set; }
 public string MessageTitle { get; set; }

 public ContentDialogResult DiagResult { get; set; }


 private void OkBtn_Click(object sender, RoutedEventArgs e)
 {
 DiagResult = ContentDialogResult.Primary;
 this.Hide();
 }

 private void CancelBtn_Click(object sender, RoutedEventArgs e)
 {
 DiagResult = ContentDialogResult.Secondary;
 this.Hide();
 }

 private void ContentDialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
 {
 }

 private void ContentDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
 {
 }
 
 }

In the above code:

1. We have 3 properties to hold the message to be displayed (Message), the title of the message box (MessageTitle) and the result of the dialog (DiagResult)
2. When the user clicks OK, we set the result of the dialog to ContentDialogResult.Primary
3. When the user clicks Cancel, we set the result of the dialog to ContentDialogResult.Secondary

Lastly, We need to show the message box that we’ve just created. We’ll do that like this:

MessageDisplay md = new MessageDisplay("This is to test how the message box displays", "Testing");

md.Closing += (s, args) =>
{
if(md.DiagResult == ContentDialogResult.Primary)
{
//Do something here if the user clicks the "OK" button
}
};

await md.ShowAsync();

The result look like this:

If you feel stuck, you can download my code files here.

In conclusion, you can extend the ContentDialog to suit other purposes such as a login view or other information collection views. If you have any comment or you know a better way to create a custom message box and the use of ContentDialog, kindly drop a comment below. HAPPY CODING!