Map Control won't show up UWP XAML

Question

I'm trying to run a simple UWP application on my PC to test the Map Control, using the guidelines in:

https://msdn.microsoft.com/en-us/windows/uwp/maps-and-location/display-maps#get-and-set-a-maps-authentication-key

I have obtained a map key from Bing Maps Dev Center and assigned it to the map control.

However, in the designer the control is shown up with a "This element is enabled only when the application is running" message.

When I run the application, nothing is displayed on the application screen.

To check if the map is loaded, I added a handler for the Loaded event of the map to display a message on the output pane, and the message was displayed fine.

public MainPage()
{
    this.InitializeComponent();

    MapMain.Loaded += MapMain_Loaded;
}

private void MapMain_Loaded(object sender, RoutedEventArgs e)
{
    Debug.WriteLine("Map is loaded!");
}

Here is my XAML Code:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestMap"
    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"
    x:Class="TestMap.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Maps:MapControl HorizontalAlignment="Left" Margin="404,86,0,0" VerticalAlignment="Top" 
                         x:Name="MapMain"
                         MapServiceToken="<My Map Key Is Here!>"
                         ZoomInteractionMode="GestureAndControl"
                         TiltInteractionMode="GestureAndControl" CacheMode="BitmapCache" CanDrag="True"/>

    </Grid>
</Page>

Any thoughts on what could be the issue and how it can be fixed? Thanks

---

<<< UPDATE (Jan 25 2017) >>>

I changed width and height attributes of the map as per answers by @Sunteen and @Aditya. However, I only see a blank map frame, as shown in the below picture. I only see the map background.

---

<<< UPDATE (Jan 27 2017) >>>

As per Aditya's suggestion, I added my XAML code below to including the changes I made:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestMap"
    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"
    x:Class="TestMap.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Maps:MapControl HorizontalAlignment="Left" Margin="92,53,0,0" VerticalAlignment="Top" 
                         x:Name="MapMain"
                         MapServiceToken="<<<My Map Key>>>"
                         Height="400"
                         Width="400"
                         ZoomInteractionMode="GestureAndControl"
                         TiltInteractionMode="GestureAndControl" Background="#FF3BCFCF" ZoomLevel="2"/>
    </Grid>
</Page>

Answer 1

The solution for resolving the issue is easy. Set Height and Width properties for the map control then it will show.

 <Maps:MapControl
     x:Name="MapMain"
     Width="400"
     Height="400"
     Margin="404,86,0,0"
     HorizontalAlignment="Left"
     VerticalAlignment="Top"
     CacheMode="BitmapCache"
     CanDrag="True"
     TiltInteractionMode="GestureAndControl"
     ZoomInteractionMode="GestureAndControl" />

Or set the Alignment properties for the map control to Stretch, the map will show.

<Maps:MapControl
    x:Name="MapMain"        
    Margin="404,86,0,0"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    CacheMode="BitmapCache"
    CanDrag="True"
    TiltInteractionMode="GestureAndControl"
    ZoomInteractionMode="GestureAndControl" />

The reason for this may be that the map control doesn't set default Width and Height, we may need to set the control with properties such as Width, Height, MinWidth,MinHeight and so on. If we don't set these properties, we may need to stretch the map to let it show, or do not set anything to let it fit the parent container.

More details about map control please reference the official sample. More details about layout with XAML please reference this document.

Answer 2

Edit: (30 Jan 17)

Okay I should have seen this one coming, The issue not really about the layout just that the UI code was written such that it took all the focus to the UI layout and I thought that was causing the map to not show.

The reason: The map is not showing is because of the CacheMode="BitmapCache" property you're setting. Remove that and you should be able to see your map in a charming way. Now that you can see your map let's understand why is the CacheMode="BitmapCache"causing the issue,

Why the CacheMode="BitmapCache" is causing the issue:

Caching is currently disabled. The map tiles are dynamically generated. If caching was enabled and a change happened to the data it's possible that you would end up with two tiles with data that doesn't line up.

The Work around:

You should only load the map once in your application and reuse it across pages if needed to avoid the memory leak caused by the bing map.

To do so, you have to load the map on the main page, create a static variable to access the map, and then when your sub-page loads re-position & resize the map as needed.

Your final UI code for the MapControl:

<Maps:MapControl
      x:Name="MapMain"
      ZoomInteractionMode="GestureAndControl"
      TiltInteractionMode="GestureAndControl" 
      CacheMode="BitmapCache" 
      CanDrag="True"/>

---

Good Practices:

In @Sunteen's answer it would not be advised to use hard coded height and Width and using 400px of Margin would just throw your layout out of screen on smaller screen sizes. It would be advised to keep your map element adaptive to multiple screen sizes as it's a UWP app, so avoid using Margin or hard coding the Height and the Width.

What should be done:

Another way of getting your map to show using adaptive layout would be to use RowDefinitions and ColumnDefinitions to set the adaptive height and width and set the HorizontalAlignment="Stretch" VerticalAlignment="Stretch" this ways your map control will be bound to a area and would adapt itself to change in screensizes with the RowDefinitions and ColumnDefinitions. So your code would look something like below:

<Gird>
   <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <Maps:MapControl
        x:Name="MapMain"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Grid.Row="1"
        Grid.Column="1"
        CanDrag="True"
        TiltInteractionMode="GestureAndControl"
        ZoomInteractionMode="GestureAndControl" />
</Grid>

To reposition the map based on how big you want the map and how your layout is, you can,

1. Add more Row/Column Definitions or even remove a few if not needed.
2. Resize the area covered by the Row/Column definitions by changing the Height/Width respectively, when doing so please make sure you do so in the factors of "*" for eg: <RowDefinition Height="5*"/>. This ways you would work more on screen size ratios than screen size pixel (this approach is more adaptive).

For more information on adaptive layout refer My Answer Here. The question is for a windows phone 8 but the same rules would apply.