xaml - 如何在 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>

标签： xamlxamarin.forms

Answer 1

我用来解决让一个视觉元素覆盖另一个视觉元素的一部分的问题的方法，在这种情况下，一个网格覆盖另一个网格的一部分，是将覆盖网格的位置设置为特定的行和列首先是 Grid，然后将覆盖 Grid 的 Margin 的 Bottom 值设置为一个负数，表示覆盖 Grid 的所需高度，如以下代码和屏幕截图所示。请注意，我将覆盖的网格包含在一个框架中，在该框架中我设置了负的底部边距值。

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