Xamarin形式 - 背景中的第二个图像

Posted 2021-04-02

我想实现与此类似的东西：

我已经在XAML中为渐变背景设置了BackgroundImage = xxx。但我想在背景和粉红色堆叠布局之间添加另一张图片（如邮箱）。因此，当我滚动图片不会移动（就像渐变背景），其余的将。

尝试this solution，它适用于背景，但因为我已经在xaml中定义了所有元素而不是后面的代码，它只显示背景。

基本上我想混合上面的解决方案和我在XAML中的元素。类似的东西（这是不可能的）：Content += mainLayout;

我再现了类似的东西，但如果我滚动，图片会随着其余部分移动。试图将图片放在相对布局中，但它没有任何效果。

XAML：

<ScrollView>
    <StackLayout Spacing="0" Padding="0">
        <Image Source="mailbox.png" Scale="1.3"/>

        <StackLayout Padding="15">
            <StackLayout Margin="5" BackgroundColor="#E6fa175b">
                <Label Text="CONTACT" TextColor="White" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" FontSize="Large" Margin="10"/>
                <Entry x:Name="mail_Name" Placeholder="Prénom Nom" PlaceholderColor="White" WidthRequest="150" Margin="10"/>
            </StackLayout>
            <StackLayout Margin="5" BackgroundColor="#E6fa175b" >
                <Entry x:Name="mail_Email" Placeholder="Email" PlaceholderColor="White"  WidthRequest="150" Margin="10"/>
            </StackLayout>
            <StackLayout Margin="5" BackgroundColor="#E6fa175b">
                <Label Text="Votre message" FontSize="Medium" TextColor="White" Margin="10,3" HeightRequest="30" />
                <Editor x:Name="mail_Msg" WidthRequest="150" HeightRequest="80" Margin="10"/>
            </StackLayout>
        </StackLayout>
        <Button x:Name="btn_send_mail" Clicked="Click_Send" HorizontalOptions="FillAndExpand" Text="Envoyer" BackgroundColor="LightSteelBlue"/>
    </StackLayout>
</ScrollView>

答案

一些Xamarin.Forms的内置布局如Grid，AbsoluteLayout和RelativeLayout允许重叠视图。只需使用其中一个，你就可以做到。

在您的情况下，我相信足以在图像上设置滚动视图。

像这样：

<Grid>
    <Image Grid.Column="0" Grid.Row="0"
           HorizontalOptions= "CenterAndExpand"
           VerticalOptions="Start"
           Source="mailbox.png" Scale="1.3"/>

    <ScrollView Grid.Column="0" Grid.Row="0">
        <StackLayout Spacing="0" 
                     Padding="0">
            <StackLayout Padding="15">
                <StackLayout Margin="5" 
                             BackgroundColor="#E6fa175b">
                    <Label Text="CONTACT" 
                           TextColor="White" 
                           VerticalOptions="CenterAndExpand" 
                           HorizontalOptions="CenterAndExpand" 
                           FontSize="Large" 
                           Margin="10"/>
                    <Entry x:Name="mail_Name" 
                           Placeholder="Prénom Nom" 
                           PlaceholderColor="White" 
                           WidthRequest="150" 
                           Margin="10"/>
                </StackLayout>
                <StackLayout Margin="5" 
                             BackgroundColor="#E6fa175b" >
                    <Entry x:Name="mail_Email" 
                           Placeholder="Email" 
                           PlaceholderColor="White"  
                           WidthRequest="150" 
                           Margin="10"/>
                </StackLayout>
                <StackLayout Margin="5" 
                             BackgroundColor="#E6fa175b">
                    <Label Text="Votre message" 
                           FontSize="Medium" 
                           TextColor="White" 
                           Margin="10,3" 
                           HeightRequest="30" />
                    <Editor x:Name="mail_Msg" 
                            WidthRequest="150" 
                            HeightRequest="80" 
                            Margin="10"/>
                </StackLayout>
            </StackLayout>
            <Button x:Name="btn_send_mail" 
                    Clicked="Click_Send" 
                    HorizontalOptions="FillAndExpand" 
                    Text="Envoyer" 
                    BackgroundColor="LightSteelBlue"/>
        </StackLayout>
    </ScrollView>
</Grid>

我希望它有所帮助。