无法在StackLayout-XamarinForms中的另一个视图上方显示视图

debugcn 发表于 Dev

海梅·桑托斯（Jaime Santos）

我在XAML页面上遇到问题，我想在自定义视图上方显示一个图片，无论我尝试什么，它始终显示在后面。我已经在此特定的自定义视图上方显示了一个视图，但是在本节中，我无法使其工作，并且看不到该部分与实际工作之间的区别。

我的代码：

<ContentPage Title="title">
            <renderers:GradientLayout
                x:Name="page"
                ColorsList="#D81BDE,#4847FF" 
                Mode="ToBottomLeft">

                <Button 
                    BackgroundColor="Yellow"
                    HeightRequest="45"
                    WidthRequest="45"

                    Margin="0,25,25,0"
                    VerticalOptions="Start"
                    HorizontalOptions="End"

                    Command="{Binding button}">

                </Button>

                <CarouselView
                    x:Name="carousel" 

                    VerticalOptions="StartAndExpand"
                    HorizontalOptions="StartAndExpand"

                    BackgroundColor="Transparent">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>

**This is the custom view I am trying to show below**
                                <custom:PancakeView 
                                    CornerRadius="25"
                                    HasShadow="True"
                                    BackgroundColor="Pink"

                                    Margin="35,0,65,15"
                                    HeightRequest="600"
                                    WidthRequest="300"
                                    VerticalOptions="End"
                                    HorizontalOptions="StartAndExpand"
                                    Padding="15">
                                    <StackLayout>
                                        <Label
                                            Text="124$"
                                            FontSize="20"
                                            FontAttributes="Bold"
                                            TextColor="White"

                                            VerticalOptions="Start"
                                            HorizontalOptions="End"></Label>
                                        <Label 
                                            Text="{Binding Title}"
                                            TextColor="White"
                                            FontSize="40"
                                            FontAttributes="Bold"

                                            HorizontalTextAlignment="Center"
                                            VerticalOptions="Start"
                                            HorizontalOptions="CenterAndExpand"></Label>
                                        <Label 
                                            Text="Este es un ejemplo de una descripcion, hace falta, por supuesto, hacer un binding con la descripcion real"
                                            TextColor="White"
                                            FontSize="20"
                                            HorizontalTextAlignment="Start"

                                            VerticalOptions="EndAndExpand"
                                            HorizontalOptions="Center"
                                            Margin="0,0,0,25"></Label>

**This is the custom view that is actually showing below**
                                        <custom:PancakeView
                                            BackgroundGradientStartColor="White"
                                            BackgroundGradientEndColor="Black"
                                            CornerRadius="25"
                                            Opacity="0.25"

                                            HeightRequest="60"
                                            WidthRequest="800"
                                            VerticalOptions="End"
                                            HorizontalOptions="CenterAndExpand"
                                            Padding="3"
                                            Margin="0,0,0,35">
                                            <Frame
                                                BackgroundColor="Pink"
                                                CornerRadius="25"

                                                VerticalOptions="FillAndExpand"
                                                HorizontalOptions="FillAndExpand"
                                                Padding="0"></Frame>
                                        </custom:PancakeView>


**This is the view that it is actually showing above**
                                        <Label
                                            Text="Buy now"
                                            TextColor="White"
                                            FontSize="30"
                                            FontAttributes="Bold"
                                            HorizontalTextAlignment="Start"

                                            Margin="10,-96,10,15"
                                            VerticalOptions="End"
                                            HorizontalOptions="Center"></Label>
                                    </StackLayout>
                                </custom:PancakeView>

**This is the image I am trying to show on top of the first custom view**
                                <Image
                                    Source="Burguer.png"
                                    BackgroundColor="Transparent"

                                    VerticalOptions="End"
                                    HorizontalOptions="Center"
                                    Margin="0,-500,0,0"></Image>
                            </StackLayout>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

            </renderers:GradientLayout>
        </ContentPage>

就是如此，如果您需要更多信息，我将在收到您的请求后立即提供，谢谢您的宝贵时间，祝您愉快。

编辑：这是两张图片，第一张是我想要实现的，第二张是此代码正在发生的事情：

里卡多·迪亚斯·莫赖斯

有一种使用Grid重叠布局的简单方法，就像这样：

<Grid>
    <Grid x:Name="ContentBehind">
        //This Content will stay below
    </Grid>
    <Grid x:Name="ContentAbove">
        //This Content will stay on front
    </Grid>
</Grid>

因此，如果您希望aStackLayout在另一个之上StackLayout，则应尝试以下操作：

<Grid>
    <StackLayout BackgroundColor="Green"><Label Text="I'm in the Background" /></StackLayout>
    <StackLayout BackgroundColor="Transparent"><Label Text="I'm Overlaping the other StackLayout" /></StackLayout>
</Grid>

或类似这样（这是同一件事，但是您定义了行高度的作用方式）：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackLayout Grid.Row="0" BackgroundColor="Green"><Label Text="I'm in the Background" /></StackLayout>
    <StackLayout Grid.Row="0" BackgroundColor="Transparent"><Label Text="I'm Overlaping the other StackLayout" /></StackLayout>
</Grid>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。