Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 91519

Adding Google Map to MasterDetailPage causes rendering issues

$
0
0

I have the following MainActivity.cs class:

Xamarin.Forms.Forms.Init(this, bundle);
Xamarin.FormsMaps.Init(this, bundle);
FormsAppCompatActivity.ToolbarResource = Resource.Layout.toolbar;
FormsAppCompatActivity.TabLayoutResource = Resource.Layout.tabs;
ViewerApplication a = new ViewerApplication();
App = a;

ViewerApplication.cs class:

public class ViewerApplication : Application, IMapApplication, IJobApplication
{
    // The root page of your application
    this.MainPage = new MapManagerPage();
}

MapManagerPage.xaml:

<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage
     xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     xmlns:app="clr-namespace:Synchronoss.Platform.Gui.Forms.Views;assembly=Synchronoss.Platform.Gui.Forms" 
     x:Class="ROAMviewer.Views.MapManagerPage">
    <MasterDetailPage.Resources>
        <ResourceDictionary>
            <FileImageSource x:Key="EntitiesIcon" File="searchtoolbar.png" />
            <FileImageSource x:Key="FieldJobsIcon" File="browserwindowstoolbar.png" />
            <FileImageSource x:Key="PlacesIcon" File="maptoolbar.png" />
            <FileImageSource x:Key="LayersIcon" File="layers2toolbar.png" />
        </ResourceDictionary>
    </MasterDetailPage.Resources>
    <MasterDetailPage.Master>
        <TabbedPage x:Name="Tabs" Title="Detail">
            <TabbedPage.Children>
                <NavigationPage Title="Features" Icon="{StaticResource EntitiesIcon}">
                    <x:Arguments>
                        <app:EntityPage x:Name="EntityPage" Title="Search" Icon="{StaticResource EntitiesIcon}" />
                    </x:Arguments>
                </NavigationPage>
                <NavigationPage Title="Field Jobs" Icon="{StaticResource FieldJobsIcon}">
                    <x:Arguments>
                        <app:FieldJobsPage x:Name="FieldJobsPage" Title="Field Jobs" Icon="{StaticResource FieldJobsIcon}" />
                    </x:Arguments>
                </NavigationPage>
                <NavigationPage Title="Places" Icon="{StaticResource PlacesIcon}">
                    <x:Arguments>
                        <app:PlacesPage x:Name="PlacesPage" Title="Places" Icon="{StaticResource PlacesIcon}" />
                    </x:Arguments>
                </NavigationPage>
                <NavigationPage  Title="Layers" Icon="{StaticResource LayersIcon}">
                    <x:Arguments>
                        <app:LayerPage x:Name="LayerPage" Title="Layers" Icon="{StaticResource LayersIcon}" />
                    </x:Arguments>
                </NavigationPage>
            </TabbedPage.Children>
        </TabbedPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage Title="Map">
            <x:Arguments>
                <app:MapPage Title="Map" />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

MapPage.xaml (which is the MasterDetailPage.Detail):

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Platform.Gui.Forms.Views.MapPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <FileImageSource x:Key="SettingsIcon" File="geartoolbar.png"/>
            <FileImageSource x:Key="LocateIcon" File="locationtoolbar.png"/>
            <FileImageSource x:Key="HelpButton" File="questiontoolbar.png"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="SettingsButton" Icon="{StaticResource SettingsIcon}" Order="Default"/>
        <ToolbarItem x:Name="LocateButton" Icon="{StaticResource LocateIcon}" Order="Default"/>
        <ToolbarItem x:Name="HelpButton" Icon="{StaticResource HelpButton}" Order="Default"/>
    </ContentPage.ToolbarItems> 
</ContentPage>

MapPage.xaml.cs class (this is how I'm rendering the map):

DroidMap map = new DroidMap(MapSpan.FromCenterAndRadius(new Position(-37.814107, 144.814107), Distance.FromMiles(0.3)))
{
    IsShowingUser = true,
    HeightRequest = 100,
    WidthRequest = 960,
    VerticalOptions = LayoutOptions.FillAndExpand
};
Content = _droidMap;

This is what happens if I don't load the Google Map (all the controls and the ListView work properly - see image below this one):

image

ListView controls work properly without the map loaded:

image

And then this is what happens when I do load the map (notice the search bar appearing over the map? That's not the only problem):

image

When the map is loaded none of the ListView controls work at all in Master, it also throws exceptions when I move around in that section. See the video below:

image

Notice in the video that I can't scroll the map below that strangely rendered search control (almost as if there's a transparent area below that doesn't allow clicks).

Any help would be appreciated as to how to fix this issue. I've tried setting the DroidMap to a StackLayout rather than Content and it has the same issue as well as playing around with Horizontal and Vertical options.

To add to this there's a problem where the ContentPage.ToolbarItems don't appear in Landscape in the MapPage.xaml. They appear fine when in Portrait though as you can see here (this is regardless of whether the map has been loaded or not):

image

These ContentPage.ToolbarItems don't appear in Landscape but appear fine in Portrait:

image

NOTE: These rendering issues occur on the device and in the Xamarin Android Player.

Here's an update:

When I move the controls around in MapManagerPage.xaml it renders them on the map (for example I've moved the search bar and placed the ListView in place of that and it's rendering in the same place):

image


Viewing all articles
Browse latest Browse all 91519

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>