CODEWITHSUNDEEP
xamarin.forms
waqas waqas
waqas waqas

Reputation: 237

Xamarin.Forms - How to position an element on top of another element?

I have an image slider and I want to position a search box on top of the image slider.

enter image description here

Here is my code:

<StackLayout HeightRequest="200"  >
    <cv:CarouselView Margin="0" ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">
        <cv:CarouselView.ItemTemplate>
            <DataTemplate>
                <Image  Grid.RowSpan="1" Grid.Row="0" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
            </DataTemplate>
        </cv:CarouselView.ItemTemplate>
     </cv:CarouselView>
</StackLayout>
<StackLayout>
    <SearchBar FontAttributes="Bold"
        FontFamily="Raleway.ttf#Raleway"
        FontSize="11" 
        Placeholder="SEARCH FOR MEDICINE AND PRODUCTS"  
        HorizontalOptions="Center" VerticalOptions="CenterAndExpand" 
        Focused="SearchBar_Focused"/>
</StackLayout>

Upvotes: 3

Views: 3053

Answers (1)

Markus Michel
Markus Michel

Reputation: 2299

The easiest way to do this is to wrap your element into a grid and placing the second one into the same grid.

The grid layout will put all elements inside the same cell over each other with the last one being added laying topmost.

<Grid>
    <Image ... />
    <Label VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>

This example would put the label in the mid over the image.

When using interactive elements, keep in mind that they have to be the last ones added in order to be clickable.

So for instance, if you had

 <Grid>
    <Button ... />
    <Image ... />
</Grid>

the button would end up being overlayed by the image and therefore not be clickable.

Upvotes: 4

Related Questions