I need to make Entry and Picker fields fill the screen horizontally.
I have tried any possible HorizontalOptions but no success.
My code is as follows;
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<Entry x:Name="ReceiverIBANTextField" Placeholder="Alıcı IBAN" Keyboard="Numeric"> </Entry>
<Entry x:Name="ReceiverFullNameTextField" Placeholder="Alıcı Ad Soyad" > </Entry>
<StackLayout Orientation="Horizontal">
<Entry x:Name="EntryTransferAmount" Placeholder="Tutar Giriniz" Keyboard="Numeric" VerticalOptions="FillAndExpand"/>
<Label x:Name="LabelCurrencyName" Text="$" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<StackLayout HorizontalOptions="FillAndExpand">
<Label TextColor="#0099DC">Tümünü Aktar </Label>
</StackLayout>
<StackLayout HorizontalOptions="Fill" >
<Switch x:Name="SwitchForAllInForVirman" Toggled="SwitchForAllIn_Toggled" HorizontalOptions="End"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" >
<Entry x:Name="EntryDescriptionForVirman" Placeholder="Açıklama Giriniz"></Entry>
<Picker x:Name="PickerPaymentType" Title="Ödeme Tipi" ></Picker>
<Entry x:Name="QuickTransactionNameTextField" Placeholder="Hızlı İşlem Adı"></Entry>
</StackLayout>
</StackLayout>
</StackLayout>
I tried your code in a sample project and you need to also set the HorizontalOptions for the second StackLayout to FillAndExpand for it to work.
Related
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.
Screen
On the picture above you can see where the ImageButton sometimes activates. When I spam clicking in the blue area the counter sometimes increases. I think there might be another Layer on top of the ImageButton but I dont know how to fix it. Below there is the XAML code. Hopefully somebody can help. Thanks!
<StackLayout>
<Label Text="Discover" TextColor="Black" FontSize="24" FontAttributes="Bold" Margin="15" />
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.8" Clicked="ImageButton_Clicked"/>
</StackLayout>
<StackLayout Margin="0,10" >
<Image Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,-15"/>
<Label Text="{Binding name_norm}" TextColor="Black" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit"/>
<Label Text="{Binding name_lat}" TextColor="Black" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Label x:Name="label" Text="0 ImageButton clicks"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
Here the C# Code:
namespace PlantBase
{
public partial class MainPage : ContentPage
{
int clickTotal;
public MainPage()
{
InitializeComponent();
}
private void ImageButton_Clicked(object sender, EventArgs e)
{
clickTotal += 1;
label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
}
}
}
Check VisualElement.InputTransparent Property.
false if the element and its children should receive input; true if neither the element nor its children should receive input and should, instead, pass inputs to the elements that are visually behind the current visual element. Default is false.
What you need is to set InputTransparent to true on the text stackLayout .
<StackLayout InputTransparent="True" Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold" Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua">
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15" Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
Okay I found the Problem. It was that before I put the red Flag on the Top and the text at the bottom in one Stacklayout which expanded from top to bottom. Now that i put them in seperate StackLayouts it works and the ImageButton is free.
Pictures before/after.
old StackLayout
new Stacklayout
The new XAML is:
<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
<Grid>
<StackLayout>
<ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
Aspect="AspectFill" Opacity="0.9" Clicked="ImageButton_Clicked" />
</StackLayout>
<StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="Aqua">
<ImageButton Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,0" BackgroundColor="Transparent" Clicked="ImageButton_Clicked_1" />
</StackLayout>
<StackLayout Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
<Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold"
Margin="15,-10,0,0" VerticalOptions="EndAndExpand" />
<StackLayout Orientation="Horizontal" Margin="15,-8,0,0" BackgroundColor="Aqua" >
<Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
Aspect="AspectFit" />
<Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic" VerticalOptions="EndAndExpand" Margin="-5,0" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
New Question now. Since at the bottom there is the Text StackLayout, where the Text is I cant press the ImageButton. How can I put the ImageButton as top "layer" so I can also press it while pressing on the text.
Here is the XAML code that I created:
<ViewCell>
<Grid VerticalOptions="CenterAndExpand" Padding="20, 0">
<Label HorizontalOptions="StartAndExpand" Text="ABC" />
<Entry Keyboard="Numeric" VerticalOptions="Center" HorizontalOptions="End" />
</Grid>
</ViewCell>
When I run the code the data entry area for the window is only wide enough to show one digit. Is there a way I can expand this so it will allow me to enter three digits?
Set a WidthRequest value, and also try changing the HorizontalOptions
<Entry Keyboard="Numeric" VerticalOptions="Center" WidthRequest="100" HorizontalOptions="FillAndExpand" />
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>
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>