Mapping in Xamarin.Forms?

Question

Does anyone know if it is possible to create a list of scrollable maps (with scrolling) using Xamarin.Forms ? We need it to display the same on iOS and Android. It is also necessary to adjust properties such as shadow (slightly raise each map)

Answer 1

Why not use a frame? I am placed inside in a listview, a frame with a grid. and do something similar to get the map style you like.

public class CardView : Frame { public CardView() { if (Device.OS == TargetPlatform.iOS) { HasShadow = false; OutlineColor = Color.Transparent; BackgroundColor = Color.Transparent; } if (Device.OS == TargetPlatform.Android) { HasShadow = true; OutlineColor = Color.Transparent; BackgroundColor = Color.Transparent; } } } 

Answer 2

Here is the nugget: https://github.com/tiger4589/Xamarin.Forms-CardView

Map control in Xamarin. From. Install it only in your general project and use the following import on your xaml page:

 xmlns:cardView="clr-namespace:CardView;assembly=CardView" 

Just use the control in the viewcell of your list.

Example screenshot: each card is a line in the list

The following code is an example of using the above control:

 <ListView x:Name="listView" Margin="0,8,0,0" HasUnevenRows="True" ItemTapped="Handle_ItemTapped" ItemsSource="{Binding HouseholdDetail}" SeparatorVisibility="None"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Padding="8,8,8,8" Orientation="Vertical"> <cardView:CardView BackgroundColor="White" CardViewHasShadow="True" HeightRequest="220"> <cardView:CardView.CardViewContent> <StackLayout Padding="10" HorizontalOptions="Center" Spacing="10" VerticalOptions="Center"> <Image HeightRequest="96" Source="{Binding Image}" /> <BoxView HeightRequest="1" WidthRequest="275" Color="LightGray" /> <Grid> <Label Grid.Row="0" Grid.Column="0" Margin="15,0,0,0" FontSize="Medium" Text="{Binding FullName}" /> <Label Grid.Row="0" Grid.Column="1" Margin="0,0,15,0" FontSize="Medium" HorizontalTextAlignment="End" Text="{Binding Relation}" /> </Grid> <BoxView HeightRequest="1" WidthRequest="275" Color="LightGray" /> <Grid> <Label Grid.Row="0" Grid.Column="0" Margin="15,0,0,0" FontSize="Medium" Text="{Binding LeavesAt}" /> <Label Grid.Row="0" Grid.Column="1" Margin="0,0,15,0" FontSize="Medium" HorizontalTextAlignment="End" Text="{Binding ArrivesAt}" /> </Grid> </StackLayout> </cardView:CardView.CardViewContent> </cardView:CardView> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> 

Here you can notice that you have such freedom that you can determine whether to have a shadow or not, and design the entire map layout using standard Xamarin layouts.

Answer 3

No need third party library

it supports scrolling and pullrefresh

  <StackLayout> <ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" HasUnevenRows="true" RefreshCommand="{Binding LoadItemsCommand}" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Padding="10"> <Frame HasShadow="True" > <StackLayout> <Label Text="{Binding Text}" LineBreakMode="NoWrap" FontSize="16" /> <Label Text="{Binding Description}" LineBreakMode="NoWrap" FontSize="16" /> </StackLayout> </Frame> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout>