It appears that my Grid layout is set for the the second row is displaying first.
When the application loads Grid.Row="2" which is the middle part of the page show first.
I have to scroll down to see the carousel witch Grid.Row="1"
I am trying to figure out the carousel the at the top then the video the the Change program last.
Here is my xaml code.
<ScrollView HorizontalOptions="Center">
<Grid x:Name="page" Padding="0,0">
<Grid.RowDefinitions>
<RowDefinition Height="600" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<CarouselView x:Name="carousel" Scrolled="Handle_Scrolled" ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<CarouselView.Behaviors>
<behaviors:FrontBannerViewParallaxBehavior ParallaxOffset="100"/>
</CarouselView.Behaviors>
<CarouselView.ItemTemplate> <DataTemplate> <Grid Padding="18,24,18,64"> <custom:PancakeView
CornerRadius="24" BackgroundColor="#FFFFFF"> <StackLayout VerticalOptions="Fill"
HorizontalOptions="Fill"> <custom:PancakeView VerticalOptions="FillAndExpand" HeightRequest="200"
CornerRadius="10" BackgroundGradientStartColor="{Binding StartColor}"
BackgroundGradientEndColor="{Binding EndColor}"> <Grid> <StackLayout> <StackLayout
Orientation="Horizontal"> <Label Text="{Binding Title}" FontFamily="{StaticResource
font_extrabold}" HorizontalOptions="Center" TextColor="#60229a" VerticalOptions="End"
Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" /> </StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="{Binding Details}" TextColor="#60229a"
Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" /> </StackLayout> </Grid>
</custom:PancakeView> </StackLayout> </custom:PancakeView> <Image Source="{Binding ImageSrc}"
WidthRequest="{Binding Width}" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand"
Margin="0,0,15,0" /> </Grid> </DataTemplate> </CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
<StackLayout Grid.Row="1">`
`<StackLayout Orientation="Horizontal">
<Label Text="Listen to Apostle Johnson's" FontFamily="{StaticResource
font_extrabold}" HorizontalOptions="Center" TextColor="#FFFFFF" VerticalOptions="End" Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" />
</StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="Detox Transformation." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
<StackLayout Orientation="Horizontal">
<Label FontFamily="{StaticResource font_regular}" Text="Apostle Johnson gives a
riveting short bio of his testimony of traveling a road of living a life of descriptive chaos. Hey just click on the video and hear it from him." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<ovideo:VideoPlayer x:Name="vmo" Source="http://iowegodministry.org/wp-content/uploads/2020/06/y2mate.com-FROM-GANGSTA-TO-GOD_JeR29HVa7HE_360p.mp4" WidthRequest="250" />
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="2">
<StackLayout Orientation="Horizontal">
<Label Text="Chance Program" FontFamily="{StaticResource font_extrabold}" HorizontalOptions="Center" TextColor="#FFFFFF" VerticalOptions="End" Margin="14,0,0,0" FontSize="36" FontAttributes="Bold" LineBreakMode="NoWrap" />
</StackLayout>
<Label FontFamily="{StaticResource font_regular}" Text="The mission of C.H.A.N.C.E. is to help people succeed in the workforce by providing training and mentorship. One of the goals is to help those who've been in the prison system become successful members of society after they get out. The program will provide clas`enter code here`ses on a variety of spiritual-based educational curriculum, teach job interview skills, and help with strengthening family relationships and bonds." TextColor="#FFFFFF" Margin="14,8,24,24" FontSize="22" LineBreakMode="WordWrap" />
<Button BackgroundColor="#FFFFFF"
FontFamily="{StaticResource font_bold}"
Padding="20,0" CornerRadius="20"
TextColor="{Binding BackgroundColor}"
FontSize="12" BorderColor="{Binding BackgroundColor}"
BorderWidth="2" HeightRequest="40"
Text="Read More About the Program" HorizontalOptions="Center" Clicked="OnButtonClicked"
/>
</StackLayout>
</Grid>
</ScrollView>
From shared Xaml code , used ScrollView as RootLayout . ScrollView has a ScrollToAsync method to scroll to one position into View . You can have a try with this to scroll to your wanted position when application loads.
A position within a ScrollView can be scrolled to with the ScrollToAsync method that accepts double x and y arguments.
Given a vertical ScrollView object named scrollView, the following example shows how to scroll to 150 device-independent units from the top of the ScrollView:
await scrollView.ScrollToAsync(0, 150, true);
Related
I have an image that in xamarin form the image adjust to fit in stacklayout. Now that i migrated to .net MAUI the image does not adjust but part of the image is hidden by the stacklayout or the stacklayout swallows part of the image. The purple background is another stacklayout that will contain other images that will also fit to the purple stacklayout.
<StackLayout x:Name="PlayingWindow">
<StackLayout HorizontalOptions="Center" VerticalOptions="End" Padding="2" x:Name="PlayingWindow1" >
</Grid>
<Grid Grid.Row="1" >
<ScrollView HorizontalOptions="Center" VerticalOptions="End" Padding="2" x:Name="PlayingWindow1" >
<Grid x:Name="mainGrid"
Grid.Row="1" Padding="2,0" RowSpacing="2" ColumnSpacing="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- Initialized for Portrait m\ -->
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- History display. -->
<Label Text="Levels:" Grid.Row="0" Grid.Column="0" BackgroundColor="LightGreen" HeightRequest="15"/>
<Label Text="1" Grid.Row="0" Grid.Column="1" x:Name="Level" BackgroundColor="LightGreen" />
<Label Text="Timer:" Grid.Row="0" Grid.Column="2" x:Name="Time" BackgroundColor="DarkGray" />
<Label Text="" Grid.Row="1" Grid.Column="0" x:Name="Callback" BackgroundColor="DarkGray" />
<Label Text="Commands:" Grid.Row="1" Grid.Column="1" x:Name="Card" BackgroundColor="DarkGray" />
<Label Text="Player6" Grid.Row="1" Grid.Column="2" x:Name="Player6" BackgroundColor="DarkGray" />
<Label x:Name="TimeContainer1" Text="" BackgroundColor="White" Grid.Row="1" Grid.Column="2" />
<Image Source="" x:Name="ImageCommands" Grid.Row="1" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="Imagejokerb" />
</Image.GestureRecognizers >
</Image>
<Button x:Name="initiator" Text="Me" BackgroundColor="LightGreen" Grid.Row="1" Grid.Column="3" Pressed="play" CornerRadius="25" />
</Grid>
</ScrollView >
</Grid>
</StackLayout >
<ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal" >
<StackLayout Orientation="Horizontal" x:Name="PlayingWindow2">
<Image Source="pickme.png" x:Name="pickCard" HorizontalOptions="Center" VerticalOptions="Center" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="TapGestureRecognizer_pickme_5" />
</Image.GestureRecognizers >
</Image>
<Image x:Name="droppedCard" HorizontalOptions="Center" VerticalOptions="Center" />
</StackLayout>
</ScrollView>
<ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal" >
<StackLayout Orientation="Horizontal" x:Name="PlayingWindow3" BackgroundColor="MediumPurple">
<Image Source="pickme.png" x:Name="VariableImagepickmeb" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="false" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="Imagepickmeb" />
</Image.GestureRecognizers >
</Image>
<Image Source="pickme.png" x:Name="VariableImagepickmer" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="false" >
<Image.GestureRecognizers >
<TapGestureRecognizer Tapped ="Imagepickmer" />
</Image.GestureRecognizers >
</Image>
</StackLayout>
</ScrollView>
</StackLayout>
I wish to have the picture adjust, to the stacklayout proportion.
Can some help please?
First of all, you have ScrollViews stacked on top of each other in a StackLayout and your image is in a StackLayout inside of one of the ScrollViews, which means the StackLayout that contains the image will have an overflow that is hiding part of the image. You should be able to scroll to it.
You could remove the ScrollView around the StackLayout with the image.
[UPDATED]
At least you should set the Image.Aspect property to AspectFit or Fill: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/image#control-image-scaling:
<ScrollView HorizontalOptions="Center" HorizontalScrollBarVisibility="Always" Orientation="Horizontal">
<StackLayout Orientation="Horizontal" x:Name="PlayingWindow2">
<Image Source="pickme.png" x:Name="pickCard" HorizontalOptions="Center" VerticalOptions="Center"
Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_pickme_5"/>
</Image.GestureRecognizers>
</Image>
<Image x:Name="droppedCard" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
</ScrollView>
However, auto-sizing images does not work well with ScrollViews when neither Width nor Height are constrained in any way.
Also, if you want to keep adding items to the View, then I recommend using a different type of View. You could, for example, use a HorizontalListView (Sharpnado.CollectionView package) or a CollectionView or anything that allows you to display a set of Views or Data, because they are better suited for dynamic layouts and data compared to a StackLayout wrapped inside a ScrollView, which is more appropriate for View elements that are known at compile time.
Problem with listview on Xamarin Forms iOS
Hello, I have a cross-platform app, I put a ListView with some items, on android it's all right, but on iOS there's a blank space that I'm not able to correct...
I've already reviewed the code and I can't find what's wrong.
Has anyone seen this error or already gone through it?
Here is my image:
Blank is my content page.
Yellow is my ListView.
The blue square is the blank space I can't remove.
Red is the header of my list.
Here is my code:
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MensagemDoDia.Views.MensagemViews.MensagemDetailPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:extended="clr-namespace:MensagemDoDia.Engine.InfiniteScrolling"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
ios:Page.UseSafeArea="True">
<ContentPage.Content>
<Grid>
<ListView
BackgroundColor="Yellow"
CachingStrategy="RecycleElement"
HasUnevenRows="True"
ItemSelected="ListView_ItemSelected"
ItemsSource="{Binding ListaMensagem}"
Scrolled="ListView_Scrolled"
SeparatorVisibility="None">
<ListView.Behaviors>
<extended:InfiniteScrollBehavior IsLoadingMore="{Binding IsBusy}" />
</ListView.Behaviors>
<ListView.Header>
<StackLayout
Margin="{OnPlatform Android='10,0,10,0',
iOS='10,0,10,0'}"
BackgroundColor="Red"
HeightRequest="{OnPlatform Android=80,
iOS=70}"
Orientation="Horizontal">
<Button
Clicked="ButtonVoltar_Clicked"
Style="{StaticResource ButtonVoltarStyle}"
Text="{StaticResource FontAwesome_ArrowLeft}"
VerticalOptions="Center" />
<Label
x:Name="LabelNomeCategoria"
FontSize="Medium"
Opacity="0.7"
Style="{StaticResource LabelBoldStyle}"
VerticalTextAlignment="Center" />
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<pancake:PancakeView
Margin="10,5"
Padding="0"
BackgroundColor="WhiteSmoke"
CornerRadius="15"
VerticalOptions="CenterAndExpand">
<pancake:PancakeView.Shadow>
<pancake:DropShadow BlurRadius="1" Color="Black" />
</pancake:PancakeView.Shadow>
<Grid RowDefinitions="*, 50" RowSpacing="0">
<Frame
Padding="0"
BackgroundColor="Gray"
CornerRadius="15"
HasShadow="False"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Label
Margin="20,30"
FontAttributes="Bold"
FontSize="Medium"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelMediumStyle}"
Text="{Binding MensagemTexto}"
TextColor="White"
TextType="Html"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
<Grid
Grid.Row="1"
ColumnDefinitions="*, auto, auto, auto"
ColumnSpacing="0">
<Label
Margin="15,0,0,0"
AutomationId="{Binding MensagemAutor}"
FontSize="Small"
HorizontalTextAlignment="Start"
LineBreakMode="TailTruncation"
MaxLines="1"
Opacity="0.7"
Style="{StaticResource LabelStyle}"
Text="{Binding MensagemAutor}"
TextColor="Black"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="LabelAutor_Tapped" />
</Label.GestureRecognizers>
</Label>
<Button
Grid.Column="1"
AutomationId="{Binding Chave}"
Clicked="ButtonCopiarMensagem_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_Paste}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
<Button
x:Name="ButtonCompartilhar"
Grid.Column="2"
AutomationId="{Binding Chave}"
Clicked="ButtonCompartilhar_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_ShareAll}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
<Button
x:Name="ButtonFavorito"
Grid.Column="3"
Margin="0,0,5,0"
Clicked="ButtonFavoritar_Clicked"
CornerRadius="15"
FontFamily="{StaticResource FontAwesome}"
FontSize="Medium"
HorizontalOptions="EndAndExpand"
Style="{StaticResource ButtonIconeStyle}"
Text="{StaticResource FontAwesome_Heart}"
VerticalOptions="CenterAndExpand"
WidthRequest="45" />
</Grid>
</Grid>
</pancake:PancakeView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Grid Padding="6" IsVisible="{Binding IsBusy}">
<Grid.Triggers>
<Trigger TargetType="Grid" Property="IsVisible" Value="False">
<Setter Property="HeightRequest" Value="0" />
</Trigger>
</Grid.Triggers>
<Label
HorizontalOptions="Center"
Text="Loading..."
VerticalOptions="Center" />
</Grid>
</ListView.Footer>
</ListView>
</Grid>
</ContentPage.Content>
</ContentPage>
Add VerticalAlignment to the ListView and set it to be either Top or Stretch. Possibly do the same for StackLayout.
You can optionally remove the parent Grid if it is not holding other items than the ListView; hence making the ListView the sole child of the ContentPage which is valid.
I am trying to position frame cards as suqares one after another horizontally and can't manage it. I wrapped it in Grid, although grid fills all window size it positions frames one under another. Red color on the screenshot is background of the Grid.
How it looks and how i want it to
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
HorizontalOptions="FillAndExpand"
BackgroundColor="Red">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame
HasShadow="True"
Margin="5"
Padding="10"
CornerRadius="5"
Scale="1"
BackgroundColor="{StaticResource DarkGreyPrimary}">
<Frame.Content>
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label Text="{Binding Address}"
FontSize="30"
VerticalTextAlignment="End"/>
<Button Clicked="InfoButtonClicked"
Text=""
FontFamily="FA"
FontSize="30"
WidthRequest="53"
Margin="0, 0, -10, 0"
HorizontalOptions="End"/>
</Grid>
<Image Source="{Binding ImageUrl}"
WidthRequest="300"
Aspect="Fill"/>
</StackLayout>
<StackLayout VerticalOptions="Fill" Margin="10, 0, 0, 0">
<StackLayout VerticalOptions="EndAndExpand">
<Label Text="{Binding Id}"
HorizontalOptions="End"
TextColor="{StaticResource LightGrey}"
FontSize="20"/>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame.Content>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Use CollectionView for that, it supports showing items in a grid.
<CollectionView ItemsLayout="VerticalGrid, 3" ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="5">
<Frame
Padding="10"
BackgroundColor="{StaticResource DarkGreyPrimary}"
CornerRadius="5"
HasShadow="True"
Scale="1">
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label
FontSize="30"
Text="{Binding Address}"
VerticalTextAlignment="End" />
<Button
Margin="0,0,-10,0"
Clicked="InfoButtonClicked"
FontFamily="FA"
FontSize="30"
HorizontalOptions="End"
Text=""
WidthRequest="53" />
</Grid>
<Image
Aspect="Fill"
Source="{Binding ImageUrl}"
WidthRequest="300" />
</StackLayout>
<Label
Margin="10,0,0,0"
FontSize="20"
HorizontalOptions="End"
Text="{Binding Id}"
TextColor="{StaticResource LightGrey}" />
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Notice the ItemsLayout="VerticalGrid, 3", the number 3 specifies how many columns to display.
Here's the documentation for the CollectionView (as #Jason mentioned earlier in the comments): https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid
I am having a problem on my XAML page, I want to show an Image above a custom view and no matter what I try it is always shown behind. I have already shown a view above this specific custom view, but in this section, I cant make it work, and I don't see the difference between this part and the one that actually works.
My code:
<ContentPage Title="title">
<renderers:GradientLayout
x:Name="page"
ColorsList="#D81BDE,#4847FF"
Mode="ToBottomLeft">
<Button
BackgroundColor="Yellow"
HeightRequest="45"
WidthRequest="45"
Margin="0,25,25,0"
VerticalOptions="Start"
HorizontalOptions="End"
Command="{Binding button}">
</Button>
<CarouselView
x:Name="carousel"
VerticalOptions="StartAndExpand"
HorizontalOptions="StartAndExpand"
BackgroundColor="Transparent">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
**This is the custom view I am trying to show below**
<custom:PancakeView
CornerRadius="25"
HasShadow="True"
BackgroundColor="Pink"
Margin="35,0,65,15"
HeightRequest="600"
WidthRequest="300"
VerticalOptions="End"
HorizontalOptions="StartAndExpand"
Padding="15">
<StackLayout>
<Label
Text="124$"
FontSize="20"
FontAttributes="Bold"
TextColor="White"
VerticalOptions="Start"
HorizontalOptions="End"></Label>
<Label
Text="{Binding Title}"
TextColor="White"
FontSize="40"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalOptions="Start"
HorizontalOptions="CenterAndExpand"></Label>
<Label
Text="Este es un ejemplo de una descripcion, hace falta, por supuesto, hacer un binding con la descripcion real"
TextColor="White"
FontSize="20"
HorizontalTextAlignment="Start"
VerticalOptions="EndAndExpand"
HorizontalOptions="Center"
Margin="0,0,0,25"></Label>
**This is the custom view that is actually showing below**
<custom:PancakeView
BackgroundGradientStartColor="White"
BackgroundGradientEndColor="Black"
CornerRadius="25"
Opacity="0.25"
HeightRequest="60"
WidthRequest="800"
VerticalOptions="End"
HorizontalOptions="CenterAndExpand"
Padding="3"
Margin="0,0,0,35">
<Frame
BackgroundColor="Pink"
CornerRadius="25"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Padding="0"></Frame>
</custom:PancakeView>
**This is the view that it is actually showing above**
<Label
Text="Buy now"
TextColor="White"
FontSize="30"
FontAttributes="Bold"
HorizontalTextAlignment="Start"
Margin="10,-96,10,15"
VerticalOptions="End"
HorizontalOptions="Center"></Label>
</StackLayout>
</custom:PancakeView>
**This is the image I am trying to show on top of the first custom view**
<Image
Source="Burguer.png"
BackgroundColor="Transparent"
VerticalOptions="End"
HorizontalOptions="Center"
Margin="0,-500,0,0"></Image>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</renderers:GradientLayout>
</ContentPage>
And that is all, if you need more info I will provide it as soon as I see your request, thank you for your time, have a nice day.
EDIT:
Here are two pictures, the first one is what I am trying to achieve, the second one is what is happening with this code:
There is a simple way to overlap layouts using Grid, and it's like this:
<Grid>
<Grid x:Name="ContentBehind">
//This Content will stay below
</Grid>
<Grid x:Name="ContentAbove">
//This Content will stay on front
</Grid>
</Grid>
So if you want a StackLayout to be above another StackLayout, you shoul try this:
<Grid>
<StackLayout BackgroundColor="Green"><Label Text="I'm in the Background" /></StackLayout>
<StackLayout BackgroundColor="Transparent"><Label Text="I'm Overlaping the other StackLayout" /></StackLayout>
</Grid>
Or like this (it's the same thing but you define how you want your rows height to act):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Green"><Label Text="I'm in the Background" /></StackLayout>
<StackLayout Grid.Row="0" BackgroundColor="Transparent"><Label Text="I'm Overlaping the other StackLayout" /></StackLayout>
</Grid>
Within a grid I have an image then 2 stack layouts, one contains a row of icons and a button, and the one below contains a list of text items.
I have a function which, when the user click a button, the list animates upwards to effectively disappear, then downwards to reappear.
This works fine but the text is always visible over the image when animating up, is there a way to make the image always visible on top, so that it appears as if the text is sliding up behind the image?
Here is the code I use to animate the text stack:
public void ShowLess()
{
TopLayout.TranslateTo(0, -(TopLayout.Bounds.Height + 60), 500, Easing.Linear);
isIncreased = false;
}
public void ShowMore()
{
TopLayout.TranslateTo(0, 0, 500, Easing.Linear);
isIncreased = true;
}
And the XAML:
<ContentPage.Content>
<Grid BackgroundColor="#ede8db">
<Grid.RowDefinitions>
<RowDefinition Height="47.5*" />
<RowDefinition Height="5*" />
<RowDefinition Height="47.5*" />
</Grid.RowDefinitions>
<ratio:ContentRatioContainer Grid.Row="0">
<Image Aspect="AspectFill" Source="KevingroveCarouselImg.png" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="bigImg" />
</ratio:ContentRatioContainer>
<artina:Button Margin="10,10,10,10" x:Name="ImgZoom" Clicked="EnlargeImage" HorizontalOptions="End" VerticalOptions="Start" Image="IncreaseImageIcon.png" BackgroundColor="Transparent" HeightRequest="30" WidthRequest="30"/>
<StackLayout Grid.Row="1" Orientation="Horizontal" BackgroundColor="#ede8db" Margin="0" Padding="30,0,30,0" x:Name="iconStack" >
<Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WHEELCHAIR_ALT}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
<Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.CUTLERY}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
<Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WIFI}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
<Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.CAMERA}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
<Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.MAP}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
<!--<Label HorizontalTextAlignment="End" HorizontalOptions="End" Text="{x:Static ratio:FontAwesome.ARROW_DOWN}" Style="{StaticResource FontIcon}" TextColor="Gray" FontSize="30" />-->
<artina:Button x:Name="openStack" HorizontalOptions="End" VerticalOptions="Start" Text="{x:Static ratio:FontAwesome.ARROW_DOWN}"
Style="{StaticResource FontIcon}" BackgroundColor="Transparent" HeightRequest="30" WidthRequest="30" Clicked="btnClicked" TextColor="Gray"/>
</StackLayout>
<StackLayout Grid.Row="2" x:Name="articleInfo" Padding="30,0,30,0">
<StackLayout x:Name="TopLayout">
<StackLayout Orientation="Horizontal">
<Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WHEELCHAIR_ALT}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
<Label Text="Address" VerticalOptions="Center" HorizontalOptions="StartAndExpand" />
</StackLayout>
</StackLayout>
</StackLayout>
</Grid>
</ContentPage.Content>
The order in which you add your elements in XAML matters, so if you want to have something at the top, just add it and the end in XAML. So firstly add row 1 and row 2, and then after it row 1 with your image.
Alternatively you can call RaiseChild method on your container (grid) with the view you want to bring to the front as a parameter.