Xamarin.Formsの画像の上にラベル、リスト、ボタンをオーバーレイします

debugcn 投稿 Dev

フロストゾーン

私は写真があり、基本的に画像の上にページ上の他のすべてがあるページを作りたいです。

これに似たもの

次のようなXAMLコード：

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

私はこれまでにこれを持っています。しかし、これは右下にラベルの方法しかなく、リストやボタンを正しく機能させることができないようです。画像を背景にするだけかもしれないと思っていたのですが、ボタンを押すだけで画像が変わるはずで、背景画像でできるかどうかはよくわかりません。

Xamarin.Formsでこのようなことが可能ですか？

私の英語が下手ならごめんなさい！それは私の第二言語です！

前もって感謝します！

編集：画像を背景として使用し、ボタンをクリックするだけで変更することができました。次に、ListViewを実際に配置する方法を見つける必要があります。

SushiHangover

デモからいくつかのアイテムを移動しました。これは、AbsoluteLayoutとGridを使用して処理する1つの方法にすぎません。

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