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

Question

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

这是我的代码：

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

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