TitleView not covering the entire toolbar - xaml

I am developing notification count on Toolbar using TitleView. Inside TitleView I have used RelativeLayout which is cropping from top side not showing full count circle Label.
This is my code:
<NavigationPage.TitleView>
<RelativeLayout HorizontalOptions="Fill" BackgroundColor="Transparent">
<Image Source="bell.png" HeightRequest="30" WidthRequest="30" x:Name="yellowBoxView"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=0.018,Constant=0}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=0.85,Constant=0}"/>
<Frame
CornerRadius="20"
Padding="-2"
BackgroundColor="White"
HasShadow="False"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView,
Property=Y,
ElementName=yellowBoxView,
Factor=1,Constant=-6}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToView,
Property=X,
ElementName=yellowBoxView,
Factor=1,Constant=-8}">
<Label FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" Text="2"
TextColor="Red" HeightRequest="22" WidthRequest="23" x:Name="labelText"/>
</Frame>
</RelativeLayout>
</NavigationPage.TitleView>
This is my output:

You can try this solution might be it is useful for you
<?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="XamarinTest.View.Page3">
<NavigationPage.TitleView >
<StackLayout BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<Image Source="notification.png" Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" HeightRequest="25" WidthRequest="25"/>
<Frame Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" Margin="0,-25,10,0" CornerRadius="20"
Padding="-2"
BackgroundColor="White"
HasShadow="False">
<Label FontSize="10" HeightRequest="22" WidthRequest="23" Margin="1,1,1,1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" Text="100"
TextColor="Red" x:Name="labelText"/>
</Frame>
</Grid>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout >
<Label Text="Hello" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Related

Xamarin Listview cannot scroll to bottm

I modify the sample https://learn.microsoft.com/zh-tw/samples/xamarin/xamarin-forms-samples/userinterface-xaminals/ ,
replace the collectionview with listview . after replacing I found the listview cannot scroll to bottom (there are total 17 items , but only show 6 items)
This error only happen on Android,but it works well on IOS.
How to solve this problem?
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:Xaminals.Controls"
xmlns:data="clr-namespace:Xaminals.Data"
x:Class="Xaminals.Views.MonkeysPage"
Title="Monkeys">
<RelativeLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Grid.RowSpan="2"
Aspect="AspectFill"
HeightRequest="60"
Source="{Binding ImageUrl}"
WidthRequest="60" />
<Label
Grid.Row="0"
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Price}"
VerticalOptions="End" />
<Image Grid.Row="2" Grid.Column="0" Source="bear.png" HeightRequest="25" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<ActivityIndicator x:Name="activityIndicator" Color="Red" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.33}" />
</RelativeLayout>
</ContentPage>
The solution is change the RelativeLayout to Stacklayout:
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
Padding="10">
<ListView ItemsSource="{x:Static data:MonkeyData.Monkeys}"
x:Name="CollectionView1"
RowHeight="100">
.....
</ListView>
</StackLayout>
</StackLayout>
If you want to use RelativeLayout, you need to use XConstraint, YConstraint,WidthConstraint,HeightConstraint to layout the child view instead of VerticalOptions="FillAndExpand", HorizontalOptions="FillAndExpand".

Free space using FillAndExpand

Im' working on XAML view and I want to create simple view with left side bar and the content with Grid and inside grid I have some buttons, that I want to achieve is to fill all form
Code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:App.ViewModels"
mc:Ignorable="d"
x:Class="App.Views.UserSelectionPage">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="#093145" HorizontalOptions="Start" VerticalOptions="FillAndExpand" >
<Label Text="AppName"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="Header"
TextColor="White"
Margin="15,0,10,15" />
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End" BackgroundColor="#093145">
<Image Source="Assets/LargeTitle.scale-100.png"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="Center"
WidthRequest="90"
HeightRequest="90"
Margin="15,0,10,15"
VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
<Grid BackgroundColor="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<BoxView Color="#505CA9" Grid.Row="0" Grid.ColumnSpan="3" />-->
<Button Text="Use username instead"
Command="{Binding ToggleNewUserCommand}"
Grid.Row="0"
Grid.Column="2"
VerticalOptions="Center"
HorizontalOptions="End"
BackgroundColor="Transparent"
FontSize="Title"
TextColor="White"
Margin="15,0,10,15"/>
<Button x:Name="userOne"
d:Text="GQ"
Text="{Binding UserSelectionList[0].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userOne}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[0].BackgroundColor}"
d:BackgroundColor="#093145"/>
<Button x:Name="userTwo"
d:Text="LR"
Text="{Binding UserSelectionList[1].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userTwo}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[1].BackgroundColor}"
d:BackgroundColor="#107896" />
<Button x:Name="userThree"
d:Text="AR"
Text="{Binding UserSelectionList[2].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userThree}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[2].BackgroundColor}"
d:BackgroundColor="#829356" />
<Button x:Name="userFour"
d:Text="RR"
Text="{Binding UserSelectionList[3].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFour}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[3].BackgroundColor}"
d:BackgroundColor="#EBC944" />
<Button x:Name="userFive"
d:Text="GQ"
Text="{Binding UserSelectionList[4].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFive}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[4].BackgroundColor}"
d:BackgroundColor="#F26D21" />
<Button x:Name="userSix"
d:Text="GQ"
Text="{Binding UserSelectionList[5].Abbreviation}"
CommandParameter="{x:Reference userSix}"
Command="{Binding ButtonSelectedCommand}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[5].BackgroundColor}"
d:BackgroundColor="#C02F1D" />
</Grid>
</StackLayout>
</ContentPage.Content>
Problem is for some reason it has free space inclusive if I use FillAndExpand on main StackLayout
I read about that but people just say that I missing FillAndExpand, I think problem is because I use Orientation="Horizontal" into first StackLayout, but that is the way I found to merge side bar with gridview. How can I achieve this? Regards
Add HorizontalOptions to the Grid itself:
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue">

How to reuse the same view in Xamarin? XAML

So I got this code that I need to re-use on more or less all my pages, but I'm getting kinda tired of changing one page and having to do the same thing in 10 or more places, are there any better way to do this?
Using Xamarin.Forms. Maybe it is possible to do this with a custom controller or some other way with markup extension to inside a stacklayout do a x:static reference to it?
<!--#region BOTTOM Navigation Bar-->
<!-- Theme Colored bar-->
<StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,0,0,0" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColor}" >
</StackLayout>
<!-- Bottom Menu bar -->
<StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,3,0,3" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColorBottomBar}" >
<!-- Left -->
<StackLayout Padding="15,0,0,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" Orientation="Horizontal" >
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToCheckUpdates}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="updates.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" />
<Label Text="Updates" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</StackLayout>
<!-- Center -->
<StackLayout Padding="0,0,0,0" Orientation="Horizontal" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToCatalog}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="catalogues.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Catalog" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToPresentation}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="display.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" >
</Image>
<Label Text="Presentations" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="2" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToScan}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="scan.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Scanner" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="3" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToSearch}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="Search.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
</Image>
<Label Text="Search" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</Grid>
</StackLayout>
<!-- Right -->
<StackLayout Padding="0,0,15,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" Orientation="Horizontal" >
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CmdGoToLoginLogout}" NumberOfTapsRequired="1"/>
</StackLayout.GestureRecognizers>
<Image Source="logout.png" HeightRequest="35" WidthRequest="35" >
</Image>
<Label Text="Settings" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
</StackLayout>
</StackLayout>
</StackLayout>
<!--#endregion-->
You can create a CustomView and then include that in your Pages.
In order to Achieve that, you create a a YourCustomView.xaml,
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourProject.YourCustomView">
</ContentView>
And, in your Page.xaml you include it
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:YourProject;assembly=YourProject"
x:Class="YourProject.YourPage">
<views:YourCustomView/>
</ContentPage>
The next step is about Binding the properties that you need, for that, you need to create BindableProperties in your CustomView. You can reuse this in all pages that you want.

the tapgesturerecognizers doesn't work for images in the same position xamarin.forms

These are my image:
the green one is over the yellow, I used a grid for it...But it makes that when I tap the green one the tap doesn't work...when they were not in the same position, the green image worked.
this problem happens only in iphone devices
my grid:
<Grid>
<Image BackgroundColor="Yellow" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>
<Image BackgroundColor="Green" Source="cadastrarVoltar" Margin="10,10,0,0" VerticalOptions="Start" Grid.Row="0" Grid.Column="0" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnClose"/>
</Image.GestureRecognizers>
</Image>
</Grid>
I've already tried 'InputTranparent = true' and it didn't work.
The complete code:
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-
namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
x:Class="neoFly_Montana.PopUp.CadastrarPopup"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
CloseWhenBackgroundIsClicked="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="1" Spacing="0">
<RelativeLayout>
<StackLayout x:Name="stack_cadast" VerticalOptions="Center"
HorizontalOptions="FillAndExpand" BackgroundColor="White"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=1,
Constant=0}">
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double"
iOS="10"/>
</StackLayout.Spacing>
<Grid>
<Image BackgroundColor="Yellow" InputTransparent="true" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>
<ContentView Grid.Row="0" Grid.Column="0" Margin="10,10,0,0" InputTransparent="true" VerticalOptions="Start" HorizontalOptions="Start">
<Image BackgroundColor="Green" Source="cadastrarVoltar">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnClose"/>
</Image.GestureRecognizers>
</Image>
</ContentView>
<Button Grid.Row="0" BackgroundColor="Blue" Opacity="0.3" Grid.Column="0" Clicked="OnClose"/>
</Grid>
<Entry x:Name="cadastrar_entry_nome" PlaceholderColor="Black" Margin="20, 10, 10, 0" Placeholder="Seu nome completo" HorizontalOptions="Fill"/>
<Entry x:Name="cadastrar_entry_email" PlaceholderColor="Black" Margin="20, 10, 10, 0" Placeholder="E-mail" HorizontalOptions="Fill"/>
<StackLayout Orientation="Horizontal" Margin="20, 10, 10, 0">
<StackLayout Spacing="0">
<Label Text="Data de nascimento" HorizontalOptions="Center" FontSize="Micro"/>
<DatePicker x:Name="cadastrar_date_datanasc"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Padding="0,0,20,0" VerticalOptions="Fill" HorizontalOptions="EndAndExpand" Spacing ="20">
<Image x:Name="cadastrar_img_fem" Scale="1" Source="femDisable">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="FemClique"/>
</Image.GestureRecognizers>
</Image>
<Image x:Name="cadastrar_img_masc" Scale="1" Source="mascDisable">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="MascClique"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" Margin="20, 10, 10, 0">
<Picker x:Name="cadastrar_picker_estado" SelectedIndexChanged="PickerEstado_SelectedindexChanged" Title="UF"/>
<ActivityIndicator x:Name="cadastro_cidade_ind" IsVisible="False" IsRunning="True"/>
<Picker x:Name="cadastrar_picker_cidade" IsVisible="False" Title="Cidade"/>
</StackLayout>
<Entry x:Name="cadastrar_entry_senha" PlaceholderColor="Black" IsPassword="true" Margin="20, 10, 10, 10" VerticalOptions="End" Placeholder="Senha" HorizontalOptions="Fill"/>
<Label x:Name="cadastrar_lbl_feedback" FontSize="Micro" HorizontalOptions="Center" Margin="0,0,10,10" TextColor="Red" IsVisible="False"/>
<!--Botão Cadastrar-->
<ContentView Margin="0,20,0,0" Padding="20,20,20,20" BackgroundColor="#700B0F">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="CadastrarClique"/>
</ContentView.GestureRecognizers>
<Label Text="Cadastrar" VerticalOptions="Center" FontSize="Large" HorizontalOptions="Center" TextColor="White" Style="{StaticResource labelsfont}"/>
</ContentView>
</StackLayout>
<Grid HorizontalOptions="FillAndExpand"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
Property=Y,
ElementName=stack_cadast,
Factor=1,
Constant=-42.5}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Grid.Row="0" Grid.Column="1">
<ffimageloading:CachedImage BackgroundColor="Pink" VerticalOptions="End" HorizontalOptions="End" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation />
</ffimageloading:CachedImage.Transformations>
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="ChamaPickerImage"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</StackLayout>
</Grid>
</RelativeLayout>
</StackLayout>
Try Absolute layout instead of grid.
<AbsoluteLayout>
<Image BackgroundColor="Yellow" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Margin="10,10,0,0" Source="cadastrarCliqueFoto" />
<Image AbsoluteLayout.LayoutBounds="0,0,30,30" AbsoluteLayout.LayoutFlags="XProportional, YProportional" BackgroundColor="Green" Source="cadastrarVoltar" Margin="10,10,0,0" VerticalOptions="Start" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnClose"/>
</Image.GestureRecognizers>
</Image>
</AbsoluteLayout>
I was facing the same issue. I have put the second Image in ContentView like below and it's working for me.
<Grid>
<Image BackgroundColor="Yellow" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>
<ContentView Grid.Row="0" Grid.Column="0" Margin="10,10,0,0">
<Image BackgroundColor="Green" Source="cadastrarVoltar" VerticalOptions="Start" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnClose"/>
</Image.GestureRecognizers>
</Image>
</ContentView>
</Grid>
-------- UPDATED -------
XAML code
<Grid>
<Image BackgroundColor="Yellow" Margin="10,10,0,0" Source="cadastrarCliqueFoto" Grid.Row="0" Grid.Column="0"/>
<ContentView Grid.Row="0" Grid.Column="0" Margin="10,10,0,0">
<Image BackgroundColor="Green" Source="cadastrarVoltar" VerticalOptions="Start" HorizontalOptions="Start"/>
</ContentView>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="Close_Tapped"/>
</Grid.GestureRecognizers>
</Grid>
Code behind
void Close_Tapped(object sender, System.EventArgs e)
{
throw new NotImplementedException();
}

Grid doesn't fill parent grid in xamarin forms

In my xamarin forms project
I need that the White Grid fill the aqua Grid. without relativeLayout it doesn't happens, so, I tried to use relative layout for it but it stills not working....
I have no ideas now...Why does it happen?
how it is now:
this is My xaml code for this page grid:
<RelativeLayout VerticalOptions="FillAndExpand">
<!--Picker Grid-->
<Grid BackgroundColor="Aqua" x:Name="lojas_grid_picker" VerticalOptions="FillAndExpand"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}">
<Image Source="pickers.png"
Opacity="0.5"
Aspect="Fill"
VerticalOptions="FillAndExpand"
Grid.Row="0"
Grid.Column="0"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}"/>
<!--left, top, right, bottom-->
<!--<StackLayout
x:Name="lojas_stack_pickers"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="CenterAndExpand">
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="10, 5, 30, 30"
iOS="10, 10, 30, 30"/>
</StackLayout.Padding>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double"
Android="10"
iOS="50"/>
</StackLayout.Spacing>-->
<Grid BackgroundColor="White" Grid.Row="0" Grid.Column="0" x:Name="lojas_stack_pickers" VerticalOptions="FillAndExpand"
RelativeLayout.XConstraint =
"{ConstraintExpression Type=RelativeToParent,
Property=X,
Factor=1,
Constant=0}"
RelativeLayout.YConstraint =
"{ConstraintExpression Type=RelativeToParent,
Property=Y,
Factor=1,
Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=lojas_grid_picker,
Property=Height,
Factor=1,
Constant=0}">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Picker Grid.Row="0" x:Name="estadopicker" TextColor="{StaticResource MarromEscuro}" Title="Estado" SelectedIndexChanged="PickerEstado_SelectedindexChanged" VerticalOptions="FillAndExpand"/>
<Picker Grid.Row="1" x:Name="cidadepicker" TextColor="{StaticResource MarromEscuro}" VerticalOptions="FillAndExpand" ItemsSource="{Binding cidadeItems}" Title="Cidade" SelectedIndexChanged="PickerCidade_SelectedindexChanged"/>
<Picker Grid.Row="2" Margin="0,0,0,20" x:Name="lojapicker" VerticalOptions="FillAndExpand" TextColor="{StaticResource MarromEscuro}" Title="Loja" SelectedIndexChanged="PickerLoja_SelectedindexChanged"/>
</Grid>
<!--</StackLayout>-->
</Grid>
<!--Picker Grid-->
</RelativeLayout>
Complete Code:
<?xaml 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="neoFly_Montana.Views.ProcuraLojasView"
xmlns:local="clr-namespace:neoFly_Montana.LayoutScripts"
Title="Nossas Lojas">
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<Image Source="backgroundlojas.jpg" Grid.Row="0" Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="Fill"/>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
<StackLayout VerticalOptions="CenterAndExpand" Padding="60">
<Label Text="Escolha uma loja" Style="{StaticResource labelsfont}" Margin="0,0,30,0" FontSize="Large" TextColor="White"/>
<StackLayout Spacing="0">
<RelativeLayout
VerticalOptions="FillAndExpand">
<!--Picker Grid-->
<Grid BackgroundColor="Aqua" x:Name="lojas_grid_picker" VerticalOptions="FillAndExpand"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}">
<Image Source="pickers.png"
Opacity="0.5"
Aspect="Fill"
VerticalOptions="FillAndExpand"
Grid.Row="0"
Grid.Column="0"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}"/>
<!--left, top, right, bottom-->
<!--<StackLayout
x:Name="lojas_stack_pickers"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="CenterAndExpand">
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="10, 5, 30, 30"
iOS="10, 10, 30, 30"/>
</StackLayout.Padding>
<StackLayout.Spacing>
<OnPlatform x:TypeArguments="x:Double"
Android="10"
iOS="50"/>
</StackLayout.Spacing>-->
<Grid BackgroundColor="White" Grid.Row="0" Grid.Column="0" x:Name="lojas_stack_pickers" VerticalOptions="FillAndExpand"
RelativeLayout.XConstraint =
"{ConstraintExpression Type=RelativeToParent,
Property=X,
Factor=1,
Constant=0}"
RelativeLayout.YConstraint =
"{ConstraintExpression Type=RelativeToParent,
Property=Y,
Factor=1,
Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=lojas_grid_picker,
Property=Height,
Factor=1,
Constant=0}">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Picker Grid.Row="0" x:Name="estadopicker" TextColor="{StaticResource MarromEscuro}" Title="Estado" SelectedIndexChanged="PickerEstado_SelectedindexChanged" VerticalOptions="FillAndExpand"/>
<Picker Grid.Row="1" x:Name="cidadepicker" TextColor="{StaticResource MarromEscuro}" VerticalOptions="FillAndExpand" ItemsSource="{Binding cidadeItems}" Title="Cidade" SelectedIndexChanged="PickerCidade_SelectedindexChanged"/>
<Picker Grid.Row="2" Margin="0,0,0,20" x:Name="lojapicker" VerticalOptions="FillAndExpand" TextColor="{StaticResource MarromEscuro}" Title="Loja" SelectedIndexChanged="PickerLoja_SelectedindexChanged"/>
</Grid>
<!--</StackLayout>-->
</Grid>
<!--Picker Grid-->
</RelativeLayout>
<Label x:Name="lbl_ou" Text="ou" Style="{StaticResource labelsfont}" TextColor="White" FontSize="Large"/>
<!--Loja mais próxima Grid-->
<Grid x:Name="loja_prox_btn" VerticalOptions="EndAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="lojamaisproximabtn.png"
Aspect="Fill"
Grid.Row="0"
Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="BtnOnTapGestureRecognizerTapped"/>
</Image.GestureRecognizers>
</Image>
<StackLayout
Orientation="Horizontal"
VerticalOptions="Center"
HorizontalOptions="Center"
Margin="0,30,0,15"
Grid.Row="0"
Grid.Column="0">
<Image Source="reloadicon.png" VerticalOptions="Center"/>
<Label Text="Vá para a loja mais próxima" VerticalOptions="Center" FontAttributes="Bold" FontSize="Micro" FontFamily="Arial" TextColor="{StaticResource MarromEscuro}"/>
</StackLayout>
</Grid>
<!--Loja mais próxima Grid-->
</StackLayout>
</StackLayout>
<!--Rodapé Grid-->
<RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Grid
RelativeLayout.WidthConstraint =
"{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=0}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="rodape.png"
Margin="0,20,0,0"
Aspect="Fill"
HorizontalOptions="FillAndExpand"
Grid.Row="0"
Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="FranqueadoOnTapGestureRecognizerTapped"/>
</Image.GestureRecognizers>
</Image>
<!--Escrito Rodapé-->
<StackLayout Orientation="Vertical"
VerticalOptions="EndAndExpand"
HorizontalOptions="FillAndExpand"
Grid.Row="0"
Spacing="0"
Grid.Column="0">
<Image Source="franqButton.png">
<Image.Scale>
<OnPlatform x:TypeArguments="x:Double"
iOS="0.75"
Android="0.75"/>
</Image.Scale>
</Image>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="Center"
Margin="0,0,0,10">
<local:MyLabel NamedFontSize="Medium"
FontSizeFactor="0.7"
Text="SEJA UM FRANQUEADO: "
TextColor="White"
FontAttributes="Bold"
Style="{StaticResource labelsfont}"/>
<local:MyLabel NamedFontSize="Medium"
FontSizeFactor="0.7" Text="montanaexpress.com"
Style="{StaticResource labelsfont}"
TextColor="{StaticResource laranjacolor}"/>
</StackLayout>
</StackLayout>
</Grid>
</RelativeLayout>
</StackLayout>
</Grid>
</ContentPage.Content>
What is the problem?