How to fill up background with mapview

How-to Discussions
1

Hey Guys, I have been battling with this for hours now. I am trying to implement an interface like that of the uber app. Basically what I want to achieve is a layout with a map at the background that I can interact with, and a card with only some of its parts showing at the bottom. When I scroll up this card, it fills up the entire screen.

So far I’ve only been able to achieve one of two scenarios. Either I can interact with the map and not the card, or I can interact with both, but the card cannot be scrolled to top.

Please guys, any useful ideas will be appreciated

Here’s the code I currently have

<App Background="#efefef">
	<DockPanel>
		<StatusBarBackground Dock="Top" Background="#000000" />
		<NativeViewHost>
			<ScrollView>
				<ScrollingAnimation From="0" To="400">
					<Scale Target="Panel" Factor="1.09" />
					<Change Panel.CornerRadius="0" />
				</ScrollingAnimation>	
				<StackPanel ItemSpacing="20" ZOffset="10">
					<Panel ux:Class="Tab" Margin="0">
						<string ux:Property="Text" />
						<Text Value="{ReadProperty Text}" FontSize="12" Color="#000" Alignment="Center" />
					</Panel>
					<Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>
					<Rectangle Height="400" />
					<Rectangle
						ux:Name="Panel"
						Margin="15" 
						MinHeight="700" 
						CornerRadius="4"
					>
						<Shadow ux:Name="PanelShadow" Angle="90" Distance="5" Size="16" Color="#0005" />
						<SolidColor Color="#fff" />

						<StackPanel ux:Name="content">
							<Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="2" Width="25" Color="Black">
								<LayoutAnimation>
									<Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
								</LayoutAnimation>
							</Rectangle>

							<Grid ux:Name="Tabs" ColumnCount="3" Height="50" Margin="0,0,0,10">
									<Panel ux:Name="page1Tab">
											<Tab Text="NEW">
													<Clicked>
															<Set navigation.Active="page1" />
													</Clicked>
											</Tab>
									</Panel>
									<Panel ux:Name="page2Tab">
											<Tab Text="REQUESTS">
													<Clicked>
															<Set navigation.Active="page2" />
													</Clicked>
											</Tab>
									</Panel>
									<Panel ux:Name="page3Tab">
											<Tab Text="MANAGE">
													<Clicked>
															<Set navigation.Active="page3" />
													</Clicked>
											</Tab>
									</Panel>
							</Grid>

							<PageControl ux:Name="navigation">
									<Page ux:Name="page1">
											<WhileActive Threshold="0.5">
													<Set indicator.LayoutMaster="page1Tab" />
											</WhileActive>
											<WelcomeText>Welcome to Page 1</WelcomeText>
									</Page>
									<Page ux:Name="page2" Background="#abb7b7">
											<WhileActive Threshold="0.5">
													<Set indicator.LayoutMaster="page2Tab" />
											</WhileActive>
											<WelcomeText>Welcome to Page 2</WelcomeText>
									</Page>
									<Page ux:Name="page3" Background="#f2f1ef">
											<WhileActive Threshold="0.5">
													<Set indicator.LayoutMaster="page3Tab" />
											</WhileActive>
											<WelcomeText>Welcome to Page 3</WelcomeText>
									</Page>
							</PageControl>
						</StackPanel>
					</Rectangle>
				</StackPanel>
			</ScrollView>

			<MapView Latitude="59.911567" Longitude="10.741030" Zoom="10">
				<MapMarker Latitude="59.911567" Longitude="10.741030" Label="Fuse HQ"/>
			</MapView>
		</NativeViewHost>

		<BottomBarBackground Dock="Bottom" />
	</DockPanel>
</App>
2

Hi Raymond.

As it was explained on Slack community, MapView is greedy on Android. In this post you can read about a known workaround to the problem.

Applied to your code then, it should go something like the following. Instead of using a ScrollView, I’d suggest you to go with Swiped, too:

<App Background="#efefef">

    <Button ux:Class="DummyButton" Color="#fff0" />

    <DockPanel>
        <StatusBarBackground Dock="Top" Background="#000000" />
        <BottomBarBackground Dock="Bottom" />
        
        <NativeViewHost>
            <DummyButton>
                <Panel ux:Name="expandedPlaceholder" />
                <Panel ux:Name="collapsedPlaceholder" Height="80" Alignment="Bottom">
                    <Panel ux:Name="overlay" Background="#18f">
                        <LayoutAnimation>
                            <Move RelativeTo="PositionChange" Vector="1" Duration="0.24" Easing="CircularOut" />
                            <Resize RelativeTo="SizeChange" Vector="1" Duration="0.24" Easing="CircularOut" />
                        </LayoutAnimation>
                            <SwipeGesture ux:Name="swipedUp" Direction="Up" Length="48" />
                            <SwipeGesture ux:Name="swipedDown" Direction="Down" Length="48" />
                            <Swiped Source="swipedUp">
                                <Set overlay.LayoutMaster="expandedPlaceholder" />
                            </Swiped>
                            <Swiped Source="swipedDown">
                                <Set overlay.LayoutMaster="collapsedPlaceholder" />
                            </Swiped>
                    </Panel>
                </Panel>
            </DummyButton>

            <MapView Latitude="59.911567" Longitude="10.741030" Zoom="10">
                <MapMarker Latitude="59.911567" Longitude="10.741030" Label="Fuse HQ"/>
            </MapView>
        </NativeViewHost>

    </DockPanel>
</App>