How to reduce spacing between items xamarin forms - xamarin

I have a StackLayout and a label, the spacing between the two is very large, I want to decrease so that the two are as close together as possible, in what way I do this
<ScrollView BackgroundColor="#ffffff" Padding="15">
<StackLayout HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
<Image Source="{Binding Image}" HeightRequest="200" x:Name="image">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
<StackLayout Orientation="Horizontal" Spacing="0">
<Button x:Name="Amais" Text="A+" />
<Button x:Name="Amenos" Text="A-" />
</StackLayout>
<Label x:Name="webView" VerticalOptions="FillAndExpand" FontSize="18"/>
</StackLayout>
</ScrollView>

*Edit: Lets try this again, set Spacing to 0 on the parent StackLayout and removed the VerticalOptions on the Label and on the parent StackLayout. Does that get you the results your after?
<ScrollView BackgroundColor="#ffffff" Padding="15">
<StackLayout HorizontalOptions="Fill" Spacing="0">
<Image Source="{Binding Image}" HeightRequest="200" x:Name="image">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
<StackLayout Orientation="Horizontal">
<Button x:Name="Amais" Text="A+" />
<Button x:Name="Amenos" Text="A-" />
</StackLayout>
<Label x:Name="webView" FontSize="18"/>
</StackLayout>
</ScrollView>

Related

How to use a ListView in Xamarin Forms and keep it from growing to big

I need to display a list with about 30 to 40 items that the user has to choose from, and I don't wont to use a combobox, so a Listview seems the way to go.
However, once I put a listview on the page, the listview grows so much in height that it goes off the screen, how can I prevent that ?
I need something like this
<gttCompound:PageBase xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:gttCompound="clr-namespace:gttCompound.Pages"
x:Class="gttCompound.Pages.PageDamageSelectFromList">
<gttCompound:PageBase.ChildStackLayoutContent>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Margin="5, 5">
<StackLayout VerticalOptions="Start" Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="SELECT THE DAMAGE LOCATION" FontAttributes="Bold" FontSize="{StaticResource FontSizeLabelSmall}" TextColor="{StaticResource TextColor}" ></Label>
</StackLayout>
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
<!-- ListView Stuff -->
</ListView>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button x:Name="ButtonDamageBack" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="Start" TextTransform="Uppercase" Text="{Binding Back}" BackgroundColor="{StaticResource ElementBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
<Button x:Name="ButtonDamageNext" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextTransform="Uppercase" IsEnabled="False" Text="{Binding Next}" BackgroundColor="{StaticResource ElementDisabledBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
</StackLayout>
</StackLayout>
</gttCompound:PageBase.ChildStackLayoutContent>
I gave some elements a noticable background color so I can see how much space they take
The listview takes way to much space.
Might it be because the page is an inherited page ?
The base page looks like this
<?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="gttCompound.Pages.PageBase"
xmlns:helpers="clr-namespace:gttCompound.Pages.Helpers">
<ContentPage.Resources>
<ResourceDictionary>
<helpers:StringNewLineConverter x:Key="StringNewLineConverter"/>
<helpers:StringToTitleCaseConverter x:Key="StringToTitleCaseConverter"/>
<helpers:StringSubstringConverter x:Key="StringSubstringConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<!-- All the stuff about the AbsoluteLayout is to get a WaitCursor that can show in the center of the screen, see this url
https://stackoverflow.com/questions/48295792/xamarin-forms-how-to-fix-activity-indicator-in-centre-of-screen-in-scrollview
-->
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout>
<StackLayout x:Name="TopStackLayout" VerticalOptions="Start" BackgroundColor="{StaticResource HeaderColor}" Orientation="Horizontal">
<Frame VerticalOptions="Center" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent" WidthRequest="40">
<Button x:Name="ButtonBack" VerticalOptions="Start" Text="" Image="Back.png" BackgroundColor="{StaticResource HeaderColor}" TextColor="{StaticResource TextColor}" FontSize="8" HeightRequest="14" />
</Frame>
<Frame VerticalOptions="CenterAndExpand" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent">
<Label Text="{Binding AppName}" HorizontalOptions="Start" HorizontalTextAlignment="Center" TextColor="White" FontSize="{StaticResource FontSizeLabelBig}" Padding="0" x:Name="Page_Title" />
</Frame>
</StackLayout>
<StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="0,-6">
</StackLayout>
<StackLayout x:Name="BottomStackLayout" VerticalOptions="End" Orientation="Horizontal" BackgroundColor="{StaticResource HeaderColor}">
<Label x:Name="LabelUser" Text="" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Start" IsVisible= "True" />
<Label x:Name="LabelVersion" Text="" HorizontalOptions="CenterAndExpand" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Center" IsVisible= "True" />
<Label Text="{Binding CopyRight}" HorizontalOptions="EndAndExpand" BackgroundColor="{StaticResource HeaderColor}" HorizontalTextAlignment="End" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" />
</StackLayout>
</StackLayout>
</ScrollView>
<AbsoluteLayout x:Name="LayoutWaitCursor" BackgroundColor="#22000000" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All" IsVisible="false">
<ActivityIndicator IsVisible="true" IsRunning="True" Color="{StaticResource TextColor}" AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1" AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
</AbsoluteLayout>
</ContentPage>
Here is how the form looks like at runtime
And without the listview it looks like this
I changed just this
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<!--
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
</ListView>
-->
</StackLayout>
What I want is that the listview is visible and scrollable, but the 2 buttons should always stay visible. The listview must only occupy the space between the label on top of the page and the 2 buttons on the bottom of the page.
How can I do that ?
1) REMOVE ScrollView.
2) <StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" .... Try different VerticalOptions. Try Center. Also try CenterAndExpand..
3) If still wrong, change the outer StackLayout to Grid, and use RowDefinitions="Auto,*,Auto", with the 3 sections marked Grid.Row="0" / "1" / "2".
ChildStackLayout is "1" (numbered from 0), so gets the * in RowDefinitions.

Resize Frame Within Grid Row

I am using xamarin with visual studio for IOS and Android
I am trying to add a scrollView to the same grid row that my Frame is on but because the frame is the same size as my grid row it cuts off the bottom of the frame (I believe)
What I've tried :
1. Setting the RowDefinition to "*" and "Auto" but the frame increases the length with the grid and
2. Adjusting the scrollView height
I feel like my best option would be resizing the frame so it's smaller than the grid row, however heightRequest doesn't work.. I would love any suggestions.
Here is the code:
<Grid HeightRequest="400">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="130"/>
<RowDefinition Height="60"/>
<RowDefinition Height="20"/>
<RowDefinition Height="300"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollView Orientation="Horizontal" Grid.Row="4" Margin="0,20,0,0" HeightRequest="390" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
<Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</Grid>
<StackLayout Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
as you have defined the StackLayout Orientaition="Horizontal",the Frame will fill the height by default.
if you want to resize the Frame height,you sholud set its VerticalOptions property
like :
<ScrollView Orientation="Horizontal" Grid.Row="4" Margin="0,20,0,0" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Horizontal" BackgroundColor="Red" >
<Frame VerticalOptions="CenterAndExpand" HeightRequest="270" WidthRequest="200" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
The specific size is set according to your requirements.
or you also could set Padding property to the StackLayout to resize the Frame location like:
<StackLayout Padding="0,10,0,10" Orientation="Horizontal" Grid.Row="4" BackgroundColor="Red">
<Frame WidthRequest="200" HeightRequest="300" Padding="0,0,0,0" CornerRadius="10" IsClippedToBounds="True" Margin="15,0,0,0">
<StackLayout>
<Image Source="satayChicken.jpg" WidthRequest="200" HeightRequest="200" Aspect="AspectFill"></Image>
<Label Text="Satay Chicken" FontSize="24" TextColor="#48b67b" HorizontalOptions="Center" Margin="0,-5,0,0"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="PREP TIME" FontSize="12" TextColor="#4a6356" />
<Label Text="COOK TIME" FontSize="12" TextColor="#4a6356" Margin="5,0,0,0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,-10,0,0">
<Label Text="5 mins" FontSize="14" TextColor="#48b67b" />
<Label Text="12 mins" FontSize="14" TextColor="#48b67b" Margin="15,0,0,0"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>

Xamarin Forms: Unable to click Frame when overlayed over Grid using RelativeLayout

This is what I'm trying to acheive. The green blob is a button(Or a stacklayout or a frame).I was able to change the the colors of the selected and unselected tabs. But I'm just not able to implement this. Any help would be appreciated.
Update
I've thrown away the TabbedPage and implemeted tabs using frames and a grid. I'm now using a RelativeLayout to get the button over the Grid. The Xaml is below
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid
Margin="0"
Padding="0"
ColumnSpacing="0"
HorizontalOptions="FillAndExpand"
IsClippedToBounds="False"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<Frame
x:Name="Explore"
Grid.Row="0"
Grid.Column="0"
AutomationId="Explore"
BackgroundColor="{Binding BgColorExplore}"
ClassId="Explore"
OutlineColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapTabCommand}" CommandParameter="{x:Reference Explore}" />
</Frame.GestureRecognizers>
<StackLayout
HorizontalOptions="FillAndExpand"
Style="{StaticResource NoSpaceStack}"
VerticalOptions="FillAndExpand">
<Image
HeightRequest="29"
HorizontalOptions="CenterAndExpand"
Source="exploreiconwhite.png"
VerticalOptions="Start"
WidthRequest="30" />
<customRenderers:ExtendedLabel
HorizontalTextAlignment="Center"
Style="{StaticResource TabbedTitle}"
Text="Explore" />
</StackLayout>
</Frame>
<Frame
x:Name="MyAccount"
Grid.Row="0"
Grid.Column="1"
AutomationId="MyAccount"
BackgroundColor="{Binding BgColorMyAccount}"
ClassId="MyAccount"
OutlineColor="Transparent">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapTabCommand}" CommandParameter="{x:Reference MyAccount}" />
</Frame.GestureRecognizers>
<StackLayout
HorizontalOptions="FillAndExpand"
Style="{StaticResource NoSpaceStack}"
VerticalOptions="FillAndExpand">
<Image
HeightRequest="27"
HorizontalOptions="CenterAndExpand"
Source="Myaccounticonwhite.png"
VerticalOptions="Start"
WidthRequest="30" />
<customRenderers:ExtendedLabel
HorizontalTextAlignment="Center"
Style="{StaticResource TabbedTitle}"
Text="My Account" />
</StackLayout>
</Frame>
</Grid>
<RelativeLayout BackgroundColor="Yellow" HorizontalOptions="Center">
<Frame
BorderRadius="50"
HeightRequest="67"
HorizontalOptions="Center"
OutlineColor="Transparent"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Y,
Constant=-140}"
WidthRequest="67">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CreatePlanCommand}" />
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image
HeightRequest="32"
Source="createplaniconwhite.png"
WidthRequest="39" />
<Label
FontFamily="{StaticResource SofiaProSemiBold}"
FontSize="10"
HorizontalTextAlignment="Center"
Text="Create Plan"
TextColor="White" />
</StackLayout>
</Frame>
</RelativeLayout>
</StackLayout>
But now when I click on part of the frame which is over the tabs, the tab's tapped event fires :(...How do I make the GreenFrames tapped event fire?

Is there a way I can replace using <StackLayout> with <Grid> when I want a GestureRecognizer?

I have this code. I would like to replace it with <Grid> and simplify it. Is there a way that I can do this and also implement the GestureRecognizer?
<ViewCell x:Name="cfs">
<StackLayout VerticalOptions="CenterAndExpand" Padding="20,0,20,0">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OpenPickerCommand}" CommandParameter="{x:Reference cfsPicker}" NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="Center">
<local:LabelBodyRendererClass Text="Card Front Side" YAlign="Center" XAlign="Center" />
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal">
<Picker x:Name="cfsPicker" IsVisible="false" SelectedIndexChanged="cfsOnPickerSelectedIndexChanged" ItemsSource="{Binding Languages}"></Picker>
<local:LabelBodyRendererClass x:Name="cfsLabel" />
<Label Text="{x:Static local:FontAwesome.FAAngleRight}" FontFamily="FontAwesome" TextColor="Gray" XAlign="Center" HorizontalOptions="EndAndExpand" />
</StackLayout>
</StackLayout>
</StackLayout>
Have you tried Grid.GestureRecognizers....
<Grid>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OpenPickerCommand}" CommandParameter="{x:Reference cfsPicker}" NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>

Open a listview below button over another view in xamarin forms

I'm working on a Xamarin Forms project where I need to have a drop down list like html drop down as in image.
I have taken a StackLayout for button and Listview (initially hidden) and when clicked on button will change the visibility to true. The list should open above other buttons but when the list get open, all other stackLayout moved below as in image.
I want the list view to be open above other views. The code for the screen is as below. Could any one help what changed do I need to make in the below code.
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 1" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 2" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" WidthRequest="400">
<Label Text="Label 3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>
<StackLayout x:Name="addList" WidthRequest="200" HorizontalOptions="Start">
<Button Clicked="onBtnClicked" Text="Button 3" WidthRequest="200"></Button>
<ListView WidthRequest="200" HeightRequest="300" IsVisible="False"></ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Edited:
This is my actual XAML
<StackLayout BackgroundColor="#FFFFFF" Padding="20,20,200,20" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout x:Name="PreferencesBodyLayout" Padding="10,10,10,10" Orientation="Vertical">
<StackLayout x:Name="LanguageLayout" Orientation="Horizontal" HeightRequest="50" HorizontalOptions="FillAndExpand" >
<Label Text="Change Language" Font="Large" TextColor="Black" HorizontalOptions="StartAndExpand" />
<RelativeLayout x:Name="LanguageSelectionRelativeLayout" HorizontalOptions="EndAndExpand">
<StackLayout Padding="2" Spacing="0" BackgroundColor="#EFEFEF" WidthRequest="150" >
<StackLayout x:Name="LanguageDropDown" Padding="0" Spacing="0" Orientation="Horizontal" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Label x:Name="SelectedLanguageLabel" StyleId="Settings_ChangeLanguage_Label" Margin="5" Text="{Binding SelectedLanguageLabelText}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Font="Medium"/>
</StackLayout>
<StackLayout HorizontalOptions="End">
<Image Source="ge_arrow_down.png" HeightRequest="20" WidthRequest="20" VerticalOptions="CenterAndExpand" >
</Image>
</StackLayout>
</StackLayout>
<ListView x:Name="LanguageList" IsVisible="{Binding ShowLanguagePopup}" BackgroundColor="Gray" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown, Property=Y,Factor=1,Constant=40}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=X,Factor=1,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=LanguageDropDown,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=LanguageDropDown,Property=Height,Factor=1,Constant=10}"
/>
</StackLayout>
</RelativeLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ChangeLanguageCommand}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="50">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label Text="Label 1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
<Image Source="ArrowButton.png" HeightRequest="15" WidthRequest="15" >
</Image>
</StackLayout>
<StackLayout >
<BoxView BackgroundColor="#EFEFEF" HorizontalOptions="FillAndExpand" HeightRequest="1"></BoxView>
</StackLayout>
</StackLayout>
</StackLayout>
I have never used it but I think you can try with a RelativeLayout. This is a little demo: 2 buttons and a ListView. ListView has some Constraints to RedButton. You can try to show / hide it and take a look if Green Button (that has Constraints to RedButton too) does not move
<StackLayout VerticalOptions = "FillAndExpand">
<RelativeLayout>
<Button BackgroundColor="Red" x:Name="button" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}" />
<Button BackgroundColor="Green" x:Name="buttonGreen" Text = "Button"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=100}" />
<ListView BackgroundColor="Blue" VerticalOptions = "FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=Y,Factor=1,Constant=60}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=button,Property=X,Factor=1,Constant=20}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"
/>
</RelativeLayout>
</StackLayout>

Resources