2017-10-25 30 views
0

画像があるページと、基本的に画像の上にあるページの他のものを作りたいと思います。以下のようなこのXamarin.Forms上の画像の上にオーバーレイラベル、リスト、ボタンがあります

enter image description here

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でこれが可能ですか?

私の英語が貧弱な場合は申し訳ありません!それは私の第二言語です!

ありがとうございます!

EDIT:画像を背景として使用し、ボタンクリックで変更できました。今、ListViewの位置を実際に設定する方法を知る必要があります。

答えて

3

私は、これはAbsoluteLayoutとグリッド

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

enter image description here

+0

を使用して、それを処理するためだけの一つの方法は、ありがとうで、デモから周りにいくつかのアイテムを移動!これは魅力のように動作するように見えます。今、私はちょうどこのレイアウトにlistviewを追加すると同様に動作するのだろうか? –

+0

リストアイテムが画像のように水平に表示される方法はありますか? –

+0

@FrostZone 'ListView'は厳密に垂直です。コントロールとビューの左右のページングを行うには、' CarouselView'を参照する必要があります – SushiHangover

関連する問題