User Interface on various devices in Xamarin.Forms - c#

I am new in a Xamarin. I am working on my first Xamarin.Forms App. From the beginning I was testing everything using simulator iPhone 6s iOS 9.2 and everything was fine but at the end when I test it on iPhone 4s iOS 9.2 I got something strange UI as like attached in below image.
On every screen some of the part is going outside the screen. For above page Xaml code is given below. What I can do to make it working on every device in PCL only? I found same problem on Android too.
Xaml :
<ContentPage.Content>
<StackLayout Padding="10" Spacing="10" VerticalOptions="CenterAndExpand">
<Button BackgroundColor="Red" TextColor="White" Clicked="btnLogout_Click" Text="Logout" WidthRequest="80" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>
<Grid HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="110" />
<RowDefinition Height="110" />
<RowDefinition Height="110" />
<RowDefinition Height="110" />
</Grid.RowDefinitions>
<!-- First Row-->
<StackLayout Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" BackgroundColor="#DAF7A6" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="comingInClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Coming In" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Grid.Row="0" BackgroundColor="#FFC300" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="attendanceClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Leaves/
Holidays" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="1" BackgroundColor="#FF5733" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="statusClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Status" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" BackgroundColor="#C70039" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="goingOutClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Going Out" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Grid.Row="2" BackgroundColor="#00EC93" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="eventCalendarClicked"/>
</StackLayout.GestureRecognizers>
<Label Text="Event Calendar" FontFamily="Arial Unicode MS" TextColor="{x:Static color:ColorResources.tileTextColor}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>

Related

System.ArgumentNullException: 'Value cannot be null. Parameter name: element' getting issue while implementing xamarin.forms picker

I am implementing a picker in xamarin.forms project so while implementing that I am getting the above issue
XamarinPicker.xaml
<pages:CustomPage.Content>
<Grid>
<Grid.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="10,20,10,10" />
<On Platform="Android" Value="10" />
</OnPlatform>
</Grid.Padding>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Padding="10,1,0,1" Margin="10,0,10,10" HeightRequest="50" HasShadow="False" BorderColor="#24527A" CornerRadius="5" VerticalOptions="Start">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<controls:CustomEntry Placeholder="{local:Translate NoteSearchHint}" Text="{Binding SearchText}">
<controls:CustomEntry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding TextChangeCommand}" />
</controls:CustomEntry.Behaviors>
</controls:CustomEntry>
<BoxView Grid.Column="1" BackgroundColor="#24527A"/>
<Image Grid.Column="2" Source="search_black" IsEnabled="{Binding IsSearchEnable}" IsVisible="{Binding SearchButtonVisibility}" HeightRequest="20" WidthRequest="20" VerticalOptions="Center" HorizontalOptions="Center" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SearchCommand}"/>
</Image.GestureRecognizers>
</Image>
<Image Grid.Column="2" IsEnabled="{Binding IsCloseEnable}" IsVisible="{Binding CloseButtonVisibility}" Source="close_gray" HeightRequest="{OnIdiom Phone='20',Tablet='30'}" WidthRequest="{OnIdiom Phone='20',Tablet='30'}" Aspect="AspectFit" VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CloseCommand}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
<StackLayout Grid.Row="1">
<Grid Padding="{OnIdiom Phone='20,10,20,0',Tablet='30,15,30,0'}" RowSpacing="0" ColumnSpacing="{OnIdiom Phone='20',Tablet='30'}" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{OnIdiom Phone='44',Tablet='58'}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Label Text="My Notes" TextColor="{Binding Tab1TextColor}" Style="{DynamicResource LibraryPurpleSemiBoldLabel}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeTabCommand}" CommandParameter="1" />
</StackLayout.GestureRecognizers>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="0" IsVisible="{Binding IsVisibleTab1Box}" HeightRequest="{OnIdiom Phone='4',Tablet='7'}" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="{DynamicResource Yellow}" CornerRadius="{OnIdiom Phone='4,4,0,0',Tablet='7,7,0,0'}" />
<StackLayout Grid.Row="0" Grid.Column="1">
<Label Text="Other Notes" TextColor="{Binding Tab2TextColor}" Style="{DynamicResource LibraryGraySemiBoldLabel}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeTabCommand}" CommandParameter="2" />
</StackLayout.GestureRecognizers>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="1" IsVisible="{Binding IsVisibleTab2Box}" HeightRequest="{OnIdiom Phone='4',Tablet='7'}" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="{DynamicResource Yellow}" CornerRadius="{OnIdiom Phone='4,4,0,0',Tablet='7,7,0,0'}" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="2" Padding="0" HorizontalOptions="EndAndExpand" IsVisible="{Binding FilterVisibility}" VerticalOptions="StartAndExpand" Orientation="Horizontal">
<Label Text="Filter by:"/>
<Frame HeightRequest="{OnIdiom Phone='30',Tablet='50'}" Padding="0" HasShadow="false" CornerRadius="{OnIdiom Phone='4',Tablet='6'}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Picker x:Name="FilterPicker"
ios:Picker.UpdateMode="WhenFinished"
Title="All"
TitleColor="{DynamicResource LightGray}"
BackgroundColor="{DynamicResource TransparentLightGray}"
FontSize="{DynamicResource FontSize14}"
SelectedItem="{Binding SelectedFilter,Mode=TwoWay}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>All</x:String>
<x:String>Public</x:String>
<x:String>Private</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<!--<Image IsVisible="{Binding EndDropDownVisible}" AbsoluteLayout.LayoutBounds="0.95,0.5,20,20" AbsoluteLayout.LayoutFlags="PositionProportional" Source="chevrondropdown" HeightRequest="{OnIdiom Phone='20',Tablet='30'}" WidthRequest="{OnIdiom Phone='20',Tablet='30'}" VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="EndDateImage_Tapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>-->
</Frame>
</StackLayout>
<ListView x:Name="NoteList" Grid.Row="3" ItemsSource="{Binding Notes}" HasUnevenRows="True" IsVisible="{Binding IsViewVisible}" CachingStrategy="RetainElement" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<!--<StackLayout Orientation="Vertical" HeightRequest="90" Margin="5,15,5,5" Padding="10,5,10,5">
<StackLayout Orientation="Horizontal">
<BoxView Color="Black" WidthRequest="5" HeightRequest="80" VerticalOptions="Center" />
<Label Text="Note text" FontSize="14" HeightRequest="80" TextColor="#585858" Margin="3,0,0,0"></Label>
</StackLayout>
<Label Text="Sample note text added by user" FontSize="10" VerticalOptions="StartAndExpand" FontAttributes="Bold" HorizontalOptions="StartAndExpand" TextColor="#000000" Margin="5,0,0,0"></Label>
</StackLayout>-->
<ViewCell>
<Frame Grid.Row="0" HasShadow="False" Padding="0" Margin="10,5" BorderColor="#e0e4e2" IsClippedToBounds="True" CornerRadius="10">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="{Binding NoteData.NoteColor, Converter={converters:HighlightColorConverter}}" Grid.Column="0" Grid.Row="0" Grid.RowSpan="5" WidthRequest="10"/>
<Label Text="{Binding NoteData.NoteText}" Grid.Column="1" Grid.Row="0" FontSize="Small" LineBreakMode="TailTruncation" FontAttributes="Italic" Margin="5,10,0,0" TextColor="Gray" MaxLines="2" VerticalTextAlignment="Center"/>
<Label Text="{local:Translate NoteLabel}" Grid.Column="1" Grid.Row="1" FontSize="Large" FontAttributes="Bold" Margin="5,5,0,5" VerticalTextAlignment="Center" TextColor="#3c5d80"/>
<Label Text="{Binding NoteData.NoteContent}" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="1" Grid.Row="2" FontSize="15" Margin="5,3,0,5" FontAttributes="Bold"/>
<Label Grid.Column="1" Grid.Row="3" TextColor="Gray" FontSize="10" Margin="5,0,0,10">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding PageNumber,Converter={converters:EpubPageIndexConverter}, StringFormat='Page Number : {0}'}" />
<Span Text="{Binding DisplayCreatedDate, StringFormat=' Added on {0: dd-MM-yyyy}'}" />
</FormattedString>
</Label.FormattedText>
</Label>
<StackLayout Grid.Column="1" Grid.Row="4" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="1" Text="Make it:"/>
<Frame Grid.Row="1" Grid.Column="2" HeightRequest="{OnIdiom Phone='30',Tablet='50'}" Padding="0" HasShadow="false" CornerRadius="{OnIdiom Phone='4',Tablet='6'}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Picker
ios:Picker.UpdateMode="WhenFinished"
Title="Select One"
TitleColor="{DynamicResource LightGray}"
BackgroundColor="{DynamicResource TransparentLightGray}"
FontSize="{DynamicResource FontSize14}"
SelectedItem="{Binding PublicPrivate}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Public</x:String>
<x:String>Private</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</Frame>
</Grid>
</StackLayout>
<ImageButton Source="more" HeightRequest="15" WidthRequest="15" Grid.Row="0" Grid.Column="2" Grid.RowSpan="4" VerticalOptions="Start" Margin="0,10,15,0" Command="{Binding Source={x:Reference NoteList}, Path=BindingContext.OpenActionPopupCommand}" CommandParameter="{Binding .}"/>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference NoteList}, Path=BindingContext.SelectNoteCommand}" CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row="3" IsVisible="{Binding IsViewVisible, Converter={converters:InverseBooleanConverter}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="{local:Translate NoNoteText}" FontSize="Default" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</pages:CustomPage.Content>
If I remove the SelectedItem="{Binding PublicPrivate}" this line of code it is not throwing any issue but if I add the above line the I am getting the above issue.
XamarinPickerViewModel.cs
string _publicPrivate;
public string PublicPrivate
{
get { return _publicPrivate; }
set { _publicPrivate = value;OnPropertyChanged(); }
}
public override void OnAppearing()
{
base.OnAppearing();
BindPickerData();
}
public void BindPickerData()
{
PublicPrivate = "public";
}
When I tap on the button it is throwing System.ArgumentNullException: 'Value cannot be null. Parameter name: element' this issue and it redirected me to
CustomTabbedPageRendere.cs
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
}
to this
please help me
thanks in advance!!!

CollectionView ItemTemplate with much text

To display some text and an image I use the following Collectionview ItemTemplate.
Unfortunately, elements with much text inside the Message property will overflow the template.
The result looks like the image below.
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<AbsoluteLayout>
<StackLayout
AbsoluteLayout.LayoutFlags="SizeProportional"
AbsoluteLayout.LayoutBounds=".0,.0,1,1"
Padding="0"
VerticalOptions="StartAndExpand">
<Grid Padding="2" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Padding="1" Grid.Column="0">
<templates:DisplayCircleImageTemplate .../>
</StackLayout>
<StackLayout Grid.Column="1"
Grid.Row="0"
VerticalOptions="StartAndExpand">
<Label Text="{Binding MessageHeader}" FontAttributes="Bold" FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame HasShadow="True"
Padding="0"
HorizontalOptions="Center">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="Center"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<StackLayout HorizontalOptions="End">
<Label Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}" Style="{DynamicResource LabelGeneralText}"/>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</custom:CustomFrame>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
T
Is there a way to avoid this text-overflow?

Not super framilair with Xamarin but you can try this to shorten your Binding Message text (LineBreakMode="TailTruncation").
<Label
Text="This is a very long text"
LineBreakMode="TailTruncation"
WidthRequest="50">
</Label>
From here: https://forums.xamarin.com/discussion/20509/truncate-long-texts-with-ellipsis-on-label-control

Thanks for your suggestions, I will certainly use the LineBreakMode in the future!
I was able to solve the question by removing the AbsoluteLayout and replaced it with a GridLayout.
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<StackLayout Padding="0"
VerticalOptions="StartAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<StackLayout Padding="1">
<templates:DisplayCircleImageTemplate
CircleBackgroundColor="{DynamicResource ColorPrimary}"
ImageSource="{Binding Stable.Image}"
ImageBorderThickness="1.2"
FrameBorderColor="{DynamicResource ColorPrimary}"
ImageBackgroundColor="{DynamicResource ColorPrimary}"
ImageBorderColor="{DynamicResource ButtonColor}"
HeightWidthOuterImage="{DynamicResource ProfileImageSize}"
CornerRadiusOuterImage="{DynamicResource ProfileImageSizeRadius}"
HeightWidthInnerImage="{DynamicResource ProfileImageSizeInsideSize}"/>
</StackLayout>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<StackLayout>
<Label Text="{Binding MessageHeader}"
FontAttributes="Bold"
FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame Grid.Row="1"
Grid.ColumnSpan="2"
HasShadow="True"
Padding="0"
HorizontalOptions="Center"
IsVisible="{Binding HasImage}">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="CenterAndExpand"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}"
Style="{DynamicResource LabelGeneralText}"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"/>
</Grid>
</StackLayout>
</custom:CustomFrame>
</ContentView>

In Xamarin Forms I Want To Overlap A Control Center On Top Of Xamarin Forms Map But Couldn’t Expand The Map Under The Control Center

In the cross-platform app that I’m developing on Xamarin Forms, I want to achieve a map look where the map covers the whole screen and a semi-transparent control center covers on top of it at a section in the bottom of the screen as in Apple Maps.
My current code looks like this. I have my desired map view and control center view but I can't get to control center to overlap on top of my map.
<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:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1.8*"/>
</Grid.RowDefinitions>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" Grid.Row="1" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>

Try putting the StackLayout that contains the map before the yummy:PancakeView (Also remove the Grid.Row="1")
It is similar at this answer.

After reading what David Jesus recomended I did what he said but unfortunately it was't the answer that I was looking for but I followed his advices and did some cahnges myself. In conclusion, I put StackLayout at the top like David said but ı didn't remove Grid.Row="1" and I added the desired height in yummy:PancakeView as TranslationY="550".
My final code is:
<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:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="5">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
</Grid>
</ContentPage>

Scrolling is not happening

I m working on a Xamarin Forms project using Visual studio 2017.I need to show long text using scrolling , so i implemented following code but it not show the all content it shows part of the content and not scrolling as well ,only shows text within the height of the lable .This is not working for both Android and IOS .If i remove HeightRequest="350" it's scrolling but , content is not showing
<Grid BackgroundColor="#0B738C">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<!--bg-->
<RowDefinition Height="20"></RowDefinition>
<!--brand-->
<RowDefinition Height="30"></RowDefinition>
<!--Lable Agreement-->
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<!--Text Agreement-->
<!--checkox-->
<RowDefinition Height="50"></RowDefinition>
<!--I agree Button-->
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Source="{local:ImageResource bg.jpg}"
Aspect="Fill"
Grid.ColumnSpan="1" Grid.RowSpan="12" x:Name="bgImage" />
<Image
Grid.Row="1"
Grid.Column="0"
Source="{local:ImageResource brand.png}"
Aspect="Fill"
Scale="1.5"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.ColumnSpan="1" Grid.RowSpan="1" x:Name="imageBrand" >
</Image>
<Label
x:Name="labelAgreement"
IsVisible="True"
Grid.Row="2"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalOptions="Center"
Text="Software License and Agreement"
TextColor="WhiteSmoke"
FontFamily="Open Sans"
Margin="10"
FontSize="16" />
<ScrollView Grid.Row="3" Grid.Column="0" >
<StackLayout >
<Label
x:Name="txtAgreement"
HorizontalOptions="Center"
VerticalOptions="Fill"
HorizontalTextAlignment="Start"
WidthRequest="300"
HeightRequest="350"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
FontAttributes="None"
BackgroundColor="White"
IsVisible="True"/>
</StackLayout>
</ScrollView>
<Switch
x:Name="checkAgree"
Scale="0.70"
Grid.Row="4" Grid.Column="0"
Margin="15,0,10,5"
HorizontalOptions="Start"
Toggled="Handle_Toggled"></Switch>
<Label
Grid.Row="4" Grid.Column="0"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
HorizontalOptions="Start"
TextColor="#FFFFFF"
FontFamily="Open Sans"
FontSize="14"
FontAttributes="Bold"
Text="Agree to the above terms and conditions"
Margin="80,0,0,10"/>
<Button
Margin="0,0,0,0"
Grid.Row="5"
Grid.Column="0"
x:Name="buttonAgree"
Text="Continue"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsVisible="True"
BackgroundColor="#1B9170"
TextColor="#FFFFFF"
FontFamily="Open Sans"
FontSize="18"
FontAttributes="Bold"
WidthRequest="140"
IsEnabled="False"
Clicked="HandleAgree_Clicked"/>
<Label
Grid.Row="5"
Grid.Column="0"
x:Name="labelError"
Text=""
Font="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsVisible="false"/>
</Grid>

you need to give the HeightRequest to ScrollView.
<ScrollView Grid.Row="3" Grid.Column="0" HeightRequest="250">
<StackLayout >
<Label
x:Name="txtAgreement"
HorizontalOptions="Center"
VerticalOptions="Fill"
HorizontalTextAlignment="Start"
WidthRequest="300"
HeightRequest="350"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
FontAttributes="None"
BackgroundColor="White"
IsVisible="True"/>
</StackLayout>
</ScrollView>

Xamarin forms order draw of components

I'm having a problem with the orders of the components of my main page, in this case I have her divided into three parts, Top, Boddy and Botton, Y make the search with auto complete and the component ListView Lower my boddy
<StackLayout x:Name="MainContext"
Spacing="0"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSelectMenuTapGestureTap"
NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
<!-- Main manu -->
<!-- Margin IOS-->
<StackLayout HeightRequest="20"
VerticalOptions="Start"
BackgroundColor="#5AC8FA"/>
<!-- end Margin IOS-->
<StackLayout x:Name="TopBar"
BackgroundColor="#5AC8FA"
VerticalOptions="Start"
HeightRequest="50"
Orientation="Horizontal">
<StackLayout x:Name="ContainerTitleLabel"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Orientation="Horizontal">
<Button Command="{Binding MainMenuCmd}"
BackgroundColor="Transparent"
BorderColor="Transparent"
HorizontalOptions="Start"
WidthRequest="{Binding WidthMenuRequest}"
HeightRequest="{Binding HeightMenuRequest}"
Image="icon_menu"
Margin="5,0"/>
<Label x:Name="TitleLb"
Text="{Binding TitleLb}"
VerticalOptions="Center"
HorizontalOptions="CenterAndExpand"
TextColor="Black"/>
<Button HorizontalOptions="End"
VerticalOptions="Center"
Image="icon_search"
Command = "{Binding ShowSearchCmd}"
BorderColor="Transparent"
BackgroundColor="Transparent"/>
</StackLayout>
<StackLayout x:Name="ContainerSearch"
HorizontalOptions="Start"
VerticalOptions="Center"
Orientation="Horizontal"
IsVisible="false">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "7*" />
<ColumnDefinition Width = "3*" />
</Grid.ColumnDefinitions>
<MarkupsInterfaces:SearchBarAutoComplet Grid.Column="0"
x:Name="SearchBar"
HorizontalOptions="Start"
TextColor="White"
PlaceholderColor="White"
CancelButtonColor="Black"
Placeholder="{MarkupsInterfaces:TranslateExtension Search}">
</MarkupsInterfaces:SearchBarAutoComplet>
<Button Grid.Column="1"
HorizontalOptions="End"
VerticalOptions="Center"
Text="{MarkupsInterfaces:TranslateExtension Close}"
Command="{Binding CloseSearchCmd}"
FontSize="12"
BackgroundColor="#5AC8FA"/>
</Grid>
</StackLayout>
</StackLayout>
<!--End Main Menu -->
<!--Boddy Context-->
<StackLayout x:Name="Boddy"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Orientation="Horizontal">
</StackLayout>
<!--End Boddy Context-->
<StackLayout BackgroundColor="White"
VerticalOptions="End"
HorizontalOptions="FillAndExpand">
<!--Botton menu navigation-->
<Grid HorizontalOptions="FillAndExpand"
VerticalOptions="Fill"
ColumnSpacing="-5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--Btn Scanner-->
<Button Grid.Column="1"
x:Name="BtnScneer"
Command="{Binding ScannerTabCmd}"
BackgroundColor="White"
Image="icon_scanner"
HorizontalOptions="FillAndExpand"
Margin="{Binding MarginButtons}"/>
<!--Btn Coupons-->
<Button Grid.Column="2"
x:Name="BtnCoupons"
BackgroundColor="White"
Image="icon_coupon"
HorizontalOptions="FillAndExpand"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationCoupons"
Grid.Column="2"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
<!--Btn Promotions-->
<Button Grid.Column="3"
x:Name="BtnPromotions"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Image="icon_promotions"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationPromotions"
Grid.Column="3"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
<!--Btn Maket car -->
<Button Grid.Column="4"
x:Name="BtnMarketCar"
BackgroundColor="White"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Image="icon_market_car"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationMarketCar"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
Grid.Column="4"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
<!--Btn Favorites-->
<Button Grid.Column="5"
x:Name="BtnFavorites"
BackgroundColor="White"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Image="icon_favorite"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationFavorites"
Grid.Column="5"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
</Grid>
<!--End bottom menu navigation-->
</StackLayout>
</StackLayout>
the content of body is dynamic, and my problen is
As a possibility to force the top to always be on the whole context

Categories

Resources