Overlay label, list and a button on top of an image on Xamarin.Forms
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>
Frost Zone
Updated on July 24, 2022Comments
-
Frost Zone almost 2 years
I want to make a page where there is a picture and basically the everything else on the page on top of the image.
Something similar to this
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.
Is something like this possible with Xamarin.Forms?
Sorry if my English is poor! It's my second language!
Thanks in advance!
EDIT: 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.
-
Frost Zone over 6 yearsThank you! This looks like it will work like a charm. Now I'm just wondering if adding a listview to this layout would work similarly?
-
Frost Zone over 6 yearsAlso is there a way for list items to show up horizontally like in the image?
-
SushiHangover over 6 years@FrostZone
ListView
is strictly vertical, you should look atCarouselView
in order to do left-right paging of controls and views