在Xamarin.Forms的图像上方叠加标签，列表和按钮 [英] Overlay label, list and a button on top of an image on Xamarin.Forms

问题描述

我要制作一个页面，其中有一张图片，基本上所有其他内容都在图片顶部.

I want to make a page where there is a picture and basically the everything else on the page on top of the image.

与此类似的东西

XAML代码，例如:

XAML Code like :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Project.Page">
<ScrollView>
    <AbsoluteLayout>
        <Image Source="{Binding ContentImage}}"  Aspect="AspectFill" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"/>
        <Label Text="{Binding label}" FontSize="15" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0,1,-1,-1" />
    </AbsoluteLayout>

</ScrollView>

到目前为止，我有这个.但这仅在右下角具有标签方式，而且我似乎无法使列表或按钮正常工作.我当时想也许只是以图片为背景，但是应该通过按一下按钮或其他方式来更改图片，但我不确定是否可以使用背景图片来做到这一点.

I have this so far. But this only has the label way at the bottom right, and I can't seem to get the list or buttons to work properly. I was thinking maybe just have the image be the background, but the image is supposed to change by the push of a button or something and I am not entirely sure if you can do that with a background image.

使用Xamarin.Forms可能会发生这种情况吗?

Is something like this possible with Xamarin.Forms?

对不起，如果我的英语不好！这是我的第二语言！

Sorry if my English is poor! It's my second language!

提前谢谢！

我能够将图像用作背景并通过单击按钮进行更改.现在，我只需要了解如何实际定位ListView.

I was able to use the image as background and change by a button click. Now I just need to find out how to actually position a ListView.

推荐答案

我从演示中移动了一些项目，这只是 一种使用AbsoluteLayout和网格处理它的方法

I moved some items around from a demo, this is just one way to handle it using an AbsoluteLayout and Grid

<AbsoluteLayout x:Name="ViewLayout">
    <Image Source="coffee.png" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" />
    <AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
        <StackLayout Orientation="Vertical" Margin="20,20,20,20" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
            <Grid Margin="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Text="Salted Caramel Mocha Frappuccino" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="2" />
                <Button Text="Extra Shot" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" Grid.Row="0" Grid.Column="3" />
                <Button Text="Whipped Cream" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" Grid.Row="1" Grid.Column="3" />
            </Grid>
            <Grid Margin="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Button Text="Tall (12oz)" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="0" />
                <Button Text="Grande (16oz)" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="1" />
                <Button Text="Venti (20oz)" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="2" />
            </Grid>
        </StackLayout>
    </AbsoluteLayout>
</AbsoluteLayout>

这篇关于在Xamarin.Forms的图像上方叠加标签，列表和按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！