CODEWITHSUNDEEP
androidgoogle-mapsxamlxamarinxamarin.forms
oatcrunch
oatcrunch

Reputation: 453

Xamarin Forms: To have controls overlapped on top of map

I have some controls such as images and also text box which I wish to be overlapped on top of my map control. The text box acts as a search text box should appear at the top and the images should appear at the bottom left.

How can I accomplish this in the simplest way using Xamarin Forms?

Appreciate if someone could provide sample code.

Upvotes: 0

Views: 843

Answers (1)

Gerald Versluis
Gerald Versluis

Reputation: 34128

It's not as hard as you might think. Just use a Grid or similar and place controls in the same column or row to have them overlap.

You probably want the map control to span the whole Grid and then have some rows/columns in place for the places where you want to have the other controls.

For instance, have a look at this example by Kym Phillpotts: https://github.com/kphillpotts/XamarinFormsLayoutChallenges/blob/master/GreatPlaces/GreatPlaces/GreatPlaces/MainPage.xaml

The notable code is inside the ViewCell:

<Grid RowSpacing="5" ColumnSpacing="0" Margin="10,5" >
<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="AUTO"/>
</Grid.RowDefinitions>

<Image Source="{Binding HeroImage}" Aspect="AspectFill" Grid.RowSpan="2" />
<Image Source="ShadowOverlay" Grid.RowSpan="2"  Aspect="Fill" VerticalOptions="End" HorizontalOptions="Fill" />

<Grid Margin="10" RowSpacing="10" ColumnSpacing="10" Grid.Row="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="AUTO"/>
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="AUTO"/>
    </Grid.ColumnDefinitions>

    <Label Text="{Binding Title}"  Grid.Row="0" Grid.ColumnSpan="3" Style="{StaticResource TitleLabel}" LineBreakMode="NoWrap"/>

    <controls:CircleImage Source="{Binding ProfileImage}" Aspect="AspectFill" Grid.Row="1" Grid.Column="0" WidthRequest="25" HeightRequest="25" />
    <Label Text="{Binding Handle}" Grid.Row="1" Grid.Column="1" VerticalOptions="Center" Style="{StaticResource HandleLabel}" />

    <StackLayout Orientation="Horizontal"  VerticalOptions="Center" Grid.Column="2" Grid.Row="1" Spacing="5">
        <Image Source="Eye"/>
        <Label Text="{Binding ViewCount, StringFormat='{0:N0}'}" Style="{StaticResource HandleLabel}" />
        <Label Text="views" Style="{StaticResource BodyLabel}"/>
    </StackLayout>
</Grid>

You can see the Image on the top (you can disregard the shadow one), and then another grid to make up the rest. The result looks like this:

Result example XAML

Overlapping icons and text over an image. This should be easily replaceable by a map and other controls.

Upvotes: 3

Related Questions