Как я могу наложить представление карты или макет с рамкой поверх другого макета в Xamarin Forms?

Question

У меня есть ситуация, когда мне нужно «наложить» сгруппированный набор информации, представленный посредством карты (реализованной как ContentView), поверх части заголовка страницы, которая определена в сетке внутри FlexLayout. Результат должен напоминать следующее, где заголовок - это часть красного цвета:

Код для заголовка выглядит следующим образом:

            <!-- Header -->
            <FlexLayout
                    HeightRequest="108"
                    AlignItems="Center"
                    Direction="Column"
                    BackgroundColor="#D92732">
                <Grid VerticalOptions="Center" Margin="0, 30, 0, 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"></ColumnDefinition>
                        <ColumnDefinition Width="40*"></ColumnDefinition>
                        <ColumnDefinition Width="80*"></ColumnDefinition>
                        <ColumnDefinition Width="300*"></ColumnDefinition>
                        <ColumnDefinition Width="80*"></ColumnDefinition>
                        <ColumnDefinition Width="40*"></ColumnDefinition>
                        <ColumnDefinition Width="20"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <ImageButton Source="Bell.png" Grid.Column="1" BackgroundColor="Transparent"
                    WidthRequest="37"
                    HeightRequest="40" 
                    Aspect="AspectFit">
                    </ImageButton>
                    <Label 
                        Grid.Column="3"
                        Text="Payments" 
                        TextColor="#F9F8FA" 
                        FontSize="20" 
                        HeightRequest="40"
                        HorizontalOptions="Center"  
                        VerticalOptions="Center" VerticalTextAlignment="End">
                    </Label>
                    <ImageButton Source="Bell.png" Grid.Column="5" BackgroundColor="Transparent"
                    WidthRequest="37"
                    HeightRequest="40" 
                   Aspect="AspectFit">
                    </ImageButton>
                </Grid>
            </FlexLayout>

Answer 1

Метод, который я использовал для решения проблемы с наложением визуального элемента на часть другого визуального элемента, в данном случае на сетку, наложенную на часть другой сетки, состоит в том, чтобы установить положение сетки наложения на определенную c строку и столбец первой сетки, а затем установите для нижнего значения поля наложения сетки отрицательное число, которое представляет желаемую высоту сетки наложения, как показано в следующем коде и снимке экрана. Обратите внимание, что я заключил наложенную сетку в рамку, в которой я установил отрицательное значение нижнего поля.

                <Frame Grid.Row="2" Grid.ColumnSpan="3" Grid.Column="0"
                       Margin="16,30,16,-310" WidthRequest="343" HeightRequest="300">
                    <StackLayout HeightRequest="350">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="44*" />
                                <RowDefinition Height="38*" />
                                <RowDefinition Height="40*" />
                                <RowDefinition Height="20*" />
                                <RowDefinition Height="96*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Row="0"
                               FontFamily="{StaticResource HNMedium}"
                               FontSize="{StaticResource Font20}"
                               HorizontalOptions="Start" 
                               Text="Verify Account"
                               TextColor="{StaticResource NGIC_DarkGray}"
                               VerticalOptions="Start" />
                            <Label Grid.Row="1"
                               Text="Enter the verification code sent to ******8998" 
                               FontSize="{StaticResource Font16}" 
                               TextColor="{StaticResource NGIC_DarkGrayishBlue}"
                               FontFamily="{StaticResource HNRegular}"/>
                            <Entry Grid.Row="2" TextColor="Black" />
                            <Label Grid.Row="3"
                                Text="Send a new code" 
                                TextColor="{StaticResource NGIC_Red}" 
                                FontSize="{StaticResource Font14}" 
                                FontFamily="{StaticResource HNMedium}"/>
                            <StackLayout Grid.Row="4" >
                                <Button  Text="Next" 
                                     TextColor="{StaticResource White}" 
                                     BackgroundColor="{StaticResource NGIC_Red}" 
                                     CornerRadius="15" 
                                     WidthRequest="300"
                                     HeightRequest="40" 
                                     VerticalOptions="CenterAndExpand" 
                                     HorizontalOptions="CenterAndExpand" 
                                     FontFamily="{StaticResource HNBold}" 
                                     FontSize="{StaticResource Font14}"/>
                                <Button Text="Cancel" 
                                    TextColor="{StaticResource NGIC_Red}"  
                                    BackgroundColor="{StaticResource White}" 
                                    CornerRadius="15" 
                                    WidthRequest="300"
                                    HeightRequest="40" 
                                    VerticalOptions="CenterAndExpand" 
                                    HorizontalOptions="CenterAndExpand" 
                                    FontFamily="{StaticResource HNRegular}" 
                                    FontSize="{StaticResource Font14}"
                                    BorderColor="{StaticResource NGIC_Red}"  
                                    BorderWidth="1"/>
                            </StackLayout>
                        </Grid>
                    </StackLayout>
                </Frame>