CODEWITHSUNDEEP
c#formsxamlxamarin
Bandi Tóth
Bandi Tóth

Reputation: 167

Xamarin Forms align a bit upper than the center of the screen

I am developing something like the Uber app (Pin centered on the screen, and the map can be moved only, the pin always stays at the center).

I've created a Grid, with an Image and a Xamarin.Forms.Map in it, and I've set the image Horizontally and Vertically to center, and the map to Horizontally and Vertically fill the available space. This is not right, because the pin's bottom won't fit the exact center of the map. How can I draw a bit upper, then the Vertical center of the screen? See screenshot: Move up

It really needs to be dynamic.

  <Grid>
    <maps:Map x:Name="DisplayMap" IsShowingUser="true" MapType="Street" HorizontalOptions="Fill" VerticalOptions="Fill"/>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <!-- SOME OTHER CONTROLS -->
            <Image Source="pin.png" WidthRequest="50" HeightRequest="50"/>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
  </Grid>

Upvotes: 0

Views: 1553

Answers (2)

Bandi T&#243;th
Bandi T&#243;th

Reputation: 167

  <Grid>
   <Grid
     HorizontalOptions="Fill" 
     VerticalOptions="Fill">
    <Grid.RowDefinitions>
     <RowDefinition Height="*"/>
     <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Image 
       Grid.Row="0"
       Source="pin.png" 
       WidthRequest="50" 
       HeightRequest="50"
       VerticalOptions="End"
       HorizontalOptions="Center"/>

  </Grid>
  <maps:Map 
    x:Name="DisplayMap" 
    IsShowingUser="true" 
    MapType="Street" 
    HorizontalOptions="Fill" 
    VerticalOptions="Fill"/>
 </Grid>

This will split the whole screen to two parts horizontally, and the image will be aligned to the first row's bottom.

Upvotes: 1

Djooleean
Djooleean

Reputation: 530

If you set 'some other controls' into the stackLayout, the stackLayout will be centered but not your image anymore that will be moved down...

Try something like this (exclude image from the stackLayout):

  <Grid>

    <maps:Map x:Name="DisplayMap" IsShowingUser="true" MapType="Street" 
        HorizontalOptions="Fill" VerticalOptions="Fill"/>

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <!-- SOME OTHER CONTROLS -->
    </StackLayout>

    <Image 
        Source="pin.png" 
        WidthRequest="50" HeightRequest="50"
        VerticalOptions="Center"
        HorizontalOptions="Center" 
        />
  </Grid>

Your 'pin' image:

  • will be centered
  • will be on top of other controls

It should work now...

Upvotes: 0

Related Questions