Формы Xamarin: чтобы элементы управления перекрывались поверх карты

Question

У меня есть некоторые элементы управления, такие как изображения, а также текстовое поле, которое я хочу перекрывать поверх моего элемента управления картой.Текстовое поле действует так, как текстовое поле поиска должно отображаться вверху, а изображения должны отображаться в левом нижнем углу.

Как это можно сделать самым простым способом с помощью форм Xamarin?

Оценитьесли кто-то может предоставить пример кода.

Answer 1

Это не так сложно, как вы думаете.Просто используйте Grid или аналогичный элемент и поместите элементы управления в один и тот же столбец или строку, чтобы они перекрывались.

Возможно, вы захотите, чтобы элемент управления карты охватил весь Grid, а затем разместили несколько строк / столбцов.для мест, где вы хотите иметь другие элементы управления.

Например, посмотрите на этот пример Ким Филпоттс: https://github.com/kphillpotts/XamarinFormsLayoutChallenges/blob/master/GreatPlaces/GreatPlaces/GreatPlaces/MainPage.xaml

Известный код находится внутри 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>

Вы можете увидеть Image сверху (вы можете игнорировать теневую), а затем другую сетку, чтобы составить остальные.Результат выглядит следующим образом:

Перекрывающиеся значки и текст поверх изображения.Это должно быть легко заменено картой и другими элементами управления.