Управление картой не будет отображаться в UWP XAML

Я пытаюсь запустить простое приложение UWP на моем ПК для тестирования элемента управления картой, используя инструкции в:

https://msdn.microsoft.com/en-us/windows/uwp/maps-and-location/display-maps

Я получил ключ карты в Центре разработки Bing Maps и назначил его элементу управления картой.

Однако в конструкторе элемент управления отображается с сообщением "Этот элемент активен только при запущенном приложении".

Когда я запускаю приложение, на экране приложения ничего не отображается.

Чтобы проверить, загружена ли карта, я добавил обработчик для события Loaded карты, чтобы отобразить сообщение на панели вывода, и сообщение отображалось нормально.

public MainPage()
{
    this.InitializeComponent();

    MapMain.Loaded += MapMain_Loaded;
}

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

Вот мой код XAML:

<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>

Любые мысли о том, что может быть проблема и как это можно исправить? Спасибо

<<< ОБНОВЛЕНИЕ (25 января 2017 г.) >>>

Я изменил атрибуты ширины и высоты карты согласно ответам @Sunteen и @Aditya. Однако я вижу только пустой фрейм карты, как показано на рисунке ниже. Я вижу только фон карты.

<<< ОБНОВЛЕНИЕ (27 января 2017 г.) >>>

В соответствии с предложением Aditya, я добавил свой XAML-код ниже, чтобы включить сделанные мной изменения:

<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>
Источник

2 ответа

Решение

Изменить: (30 января 17)

Ладно, я должен был увидеть это, Вопрос не совсем о layout просто код пользовательского интерфейса был написан так, что все внимание уделялось макету пользовательского интерфейса, и я подумал, что это заставляет карту не отображаться.

Причина: карта не отображается из-за CacheMode="BitmapCache" свойство вы устанавливаете. Удалите это, и вы сможете увидеть свою карту очаровательно. Теперь, когда вы видите свою карту, давайте разберемся, почему CacheMode="BitmapCache" вызывая проблему,

Почему CacheMode="BitmapCache" вызывает проблему:

Кеширование в данный момент отключено. Плитки карты генерируются динамически. Если было включено кэширование и произошло изменение данных, возможно, вы получите две плитки с данными, которые не выстраиваются в линию.

Работа вокруг:

Вы должны загружать карту только один раз в свое приложение и повторно использовать ее на страницах, если это необходимо, чтобы избежать утечки памяти, вызванной картой bing.

Для этого вам нужно загрузить карту на главной странице, создать статическую переменную для доступа к карте, а затем, когда ваша подстраница загрузится, изменить положение и изменить размер карты по мере необходимости.

Ваш окончательный код пользовательского интерфейса для MapControl:

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

Хорошая практика:

В ответе @Sunteen не рекомендуется использовать жестко закодированные height а также Width и используя 400px из Margin бы просто выкинуть макет из экрана на экран меньшего размера. Рекомендуется сохранять адаптивность вашего элемента карты к разным размерам экрана, так как это UWP приложение, поэтому избегайте использования Margin или трудно кодировать Height и Width,

Что нужно сделать:

Другим способом отображения вашей карты с использованием адаптивного макета будет использование RowDefinitions а также ColumnDefinitions установить адаптивную высоту и ширину и установить HorizontalAlignment="Stretch" VerticalAlignment="Stretch" таким образом, элемент управления вашей карты будет привязан к области и адаптируется к изменениям размеров экрана с помощью RowDefinitions а также ColumnDefinitions, Итак, ваш код будет выглядеть примерно так:

<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>

Чтобы изменить положение карты в зависимости от размера карты и размера макета, вы можете:

  1. Добавьте больше определений строк / столбцов или даже удалите несколько, если не нужно.
  2. Измените размер области, охватываемой определениями строк / столбцов, изменив соответственно высоту / ширину, при этом убедитесь, что вы делаете это в коэффициентах "*", например: <RowDefinition Height="5*"/>, Таким образом, вы будете больше работать с соотношениями размеров экрана, чем с размерами экрана в пикселях (этот подход более адаптивный).

Для получения дополнительной информации об адаптивном макете см. Мой ответ здесь. Вопрос для Windows Phone 8, но применяются те же правила.

Источник

Решение проблемы легко. Задавать Height а также Width свойства для элемента управления карты, то он покажет.

 <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" />

Или установите Alignment свойства для элемента управления карты в Stretch, карта покажет.

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

Причиной этого может быть то, что элемент управления картой не устанавливает значение по умолчанию Width а также Height нам может понадобиться установить элемент управления с такими свойствами, как Width, Height, MinWidth, MinHeight и так далее. Если мы не устанавливаем эти свойства, нам может потребоваться растянуть карту, чтобы показать ее, или не устанавливать что-либо, чтобы она соответствовала родительскому контейнеру.

Более подробную информацию о контроле карты, пожалуйста, обратитесь к официальному образцу. Более подробную информацию о макете с XAML, пожалуйста, обратитесь к этому документу.

Источник
Другие вопросы по тегам