Xamarin.Forms - 如何将一个元素放置在另一个元素之上？

Question

我有一个图像 slider ，我想在图像 slider 顶部放置一个搜索框。



这是我的代码:

<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>

Answer 1

最简单的方法是将您的元素包装到一个网格中，然后将第二个元素放入同一个网格中。

网格布局会将同一单元格内的所有元素相互叠加，最后一个添加的元素位于最顶层。

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

这个例子会将标签放在图像的中间。

使用交互式元素时，请记住，它们必须是最后添加的元素才能被点击。

例如，如果你有

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

该按钮最终会被图像覆盖，因此不可点击。