在 Xamarin 表单中，我想在 Xamarin 表单地图上重叠控制中心，但无法在控制中心下展开地图

Question

在我在 Xamarin Forms 上开发的跨平台应用程序中，我想实现地图外观，其中地图覆盖整个屏幕，半透明控制中心覆盖在其顶部的底部部分苹果地图中的屏幕。

我当前的代码如下所示。我有我想要的地图视图和控制中心视图，但我无法到达控制中心以重叠在我的地图上。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:pan ="http://xamarin.com/schemas/2014/forms"  
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
             mc:Ignorable="d"
             x:Class="GreenPath.MainPage">
    
        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="1.8*"/>
        </Grid.RowDefinitions>
        <yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" Grid.Row="1" HorizontalOptions="FillAndExpand">
            <StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical">
                <Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
                <Label  Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
                <SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
                <Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
                <Grid Grid.Row="1" ColumnSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
                </Grid>
            </StackLayout>
        </yummy:PancakeView>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
        </StackLayout>
        </Grid>

        </ContentPage>

Answer 1

尝试将包含地图的 StackLayout 放在 yummy:PancakeView 之前（同时删除 Grid.Row="1"）

this 答案类似。

Answer 2

在阅读了David Jesus 推荐的内容后，我照他说的做了，但不幸的是，这不是我想要的答案，但我听从了他的建议，自己做了一些改变。总之，我像大卫所说的那样将 StackLayout 放在顶部，但我没有删除 Grid.Row="1"，我在 yummy:PancakeView 中添加了所需的高度作为 TranslationY="550"。 我的最终代码是：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             xmlns:pan ="http://xamarin.com/schemas/2014/forms"  
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
             mc:Ignorable="d"
             x:Class="GreenPath.MainPage">

    <Grid>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
        </StackLayout>
        <yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">
            <StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="5">
                <Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
                <Label  Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
                <SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
                <Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
                <Grid Grid.Row="1" ColumnSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
                    <Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
                </Grid>
            </StackLayout>
        </yummy:PancakeView>

    </Grid>

</ContentPage>