I´m designing a login screen, this is my xaml
I can't to increase the grid size background red, because i put alot of "entry" but these disappear, if you know any property please give me your advices
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
<ContentPage.Content>
<yummy:PancakeView
BackgroundGradientStartPoint="0,1"
BackgroundGradientEndPoint="1,0"
Margin="0,0,0,10"
HorizontalOptions="FillAndExpand"
CornerRadius="0,0,400,0">
<yummy:PancakeView.BackgroundGradientStops>
<yummy:GradientStopCollection>
<yummy:GradientStop Color="#155cab" Offset="0" />
<yummy:GradientStop Color="#155cab" Offset="0.5" />
</yummy:GradientStopCollection>
</yummy:PancakeView.BackgroundGradientStops>
<StackLayout>
<yummy:PancakeView
BackgroundGradientStartPoint="0,1"
BackgroundGradientEndPoint="1,0"
HeightRequest="240"
WidthRequest="320"
Padding="0,0,100,500"
HorizontalOptions="End"
CornerRadius="0,0,500,0">
<yummy:PancakeView.BackgroundGradientStops>
<yummy:GradientStopCollection>
<yummy:GradientStop Color="#155cab" Offset="0" />
<yummy:GradientStop Color="#1C75D8" Offset="0.5" />
<yummy:GradientStop Color="#589ce7" Offset="1" />
</yummy:GradientStopCollection>
</yummy:PancakeView.BackgroundGradientStops>
<Grid BackgroundColor="red" Margin="100,0,0,0" VerticalOptions="StartAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
Source="UserLogin.png"
Margin="0,50,0,50"
/>
<StackLayout Grid.Row="1" BackgroundColor="Orange">
<Entry Placeholder="hello"/>
<Entry Placeholder="hello 1"/>
<Entry Placeholder="hello 2"/>
<Entry Placeholder="hello 3"/>
<Entry Placeholder="hello 4"/>
</StackLayout>
</Grid>
</yummy:PancakeView>
</StackLayout>
</yummy:PancakeView>
</ContentPage.Content>
i´m going to show the image (xaml file). please help me
enter image description here
You set the bottom padding to 500 in the second yummy:PancakeView is too big.I set it to 0 with following layout, it worked.
<?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:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
x:Class="PanCakeView.MainPage">
<ContentPage.Content>
<yummy:PancakeView
BackgroundGradientStartPoint="0,1"
BackgroundGradientEndPoint="1,0"
Margin="0,0,0,10"
HorizontalOptions="FillAndExpand"
CornerRadius="0,0,400,0">
<yummy:PancakeView.BackgroundGradientStops>
<yummy:GradientStopCollection>
<yummy:GradientStop Color="#155cab" Offset="0" />
<yummy:GradientStop Color="#155cab" Offset="0.5" />
</yummy:GradientStopCollection>
</yummy:PancakeView.BackgroundGradientStops>
<StackLayout>
<yummy:PancakeView
BackgroundGradientStartPoint="0,1"
BackgroundGradientEndPoint="1,0"
HeightRequest="800"
WidthRequest="320"
Padding="0,0,100,0"
HorizontalOptions="End"
CornerRadius="0,0,500,0">
<yummy:PancakeView.BackgroundGradientStops>
<yummy:GradientStopCollection>
<yummy:GradientStop Color="#155cab" Offset="0" />
<yummy:GradientStop Color="#1C75D8" Offset="0.5" />
<yummy:GradientStop Color="#589ce7" Offset="1" />
</yummy:GradientStopCollection>
</yummy:PancakeView.BackgroundGradientStops>
<Grid BackgroundColor="red" Margin="100,0,0,0" VerticalOptions="StartAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
Source="UserLogin.png"
Margin="0,50,0,50"
/>
<StackLayout Grid.Row="1" BackgroundColor="Orange">
<Entry Placeholder="hello"/>
<Entry Placeholder="hello 1"/>
<Entry Placeholder="hello 2"/>
<Entry Placeholder="hello 3"/>
<Entry Placeholder="hello 4"/>
</StackLayout>
</Grid>
</yummy:PancakeView>
</StackLayout>
</yummy:PancakeView>
</ContentPage.Content>
</ContentPage>
Here is running screenshot.
Related
I am having some issues with getting my ListView to be vertical scrollable, which should be default behavior(?).
The Listview is contained in a CarouselTemplate with several other Grid items.
The Mainpage containing the CarouselView:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CarouselView
Margin="0,25,0,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Center">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationBrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,0,0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedIndicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
The Carousel Template (PCSActivityLocationBrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- PAGE BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- CONTENT -->
<Grid Padding="0,0,0,10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="140" />
<RowDefinition Height="450" />
</Grid.RowDefinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Rest of code left out for simplicity -->
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Rest of code left out for simplicity -->
</Grid>
<!-- BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterAndExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- BG -->
<BoxView Grid.Row="2" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- Rooms -->
<ListView
Grid.Row="2"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
The Rooms section (Listview) is where the vertical scrolling is not working:
There is probably a quite simple solution to it but I can't seem to find it after several adjustments, like setting the third RowDefinition height (the row which contains the ListView) to *, or to Auto, by doing that the ListView disappears entirely from the screen.
Finally found the problem, after testing it a bit more by moving things around (thanks to #LucasZhang-MSFT hint to test the ListView directly in the Carousel), which I should have done a bit more before posting.
TLDR;
There were several things wrong.
The first thing I removed was the outer Grid in PCSActivityLocationBrowserTemplate, this contained 1 fixed row with a height of 120 and 1 row with a * height. This Grid was implemented to have a custom Navigation bar (with a height of 120), though this was not used (anymore) so that outer Grid was unnecessary.
The second was that the Third row (the row of my ListView) was set to a fixed height, by setting this to * the List became scrollable.
I kept noticing that my third row (with the ListView) would disappear from my screen when I set it's height to * (which I did as described in .2). This was caused by the CarouselView in the Main page because it had it's VerticalOptions set to Center. So it would always center the whole, and because the screen size is increased with the non-fixed height of the third row, the whole shebang would be centered and thus not visible anymore. Setting the VerticalOptions to Start fixed this.
The fixed code:
The Main page containing the CarouselView:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CarouselView
Margin="0,25,0,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Start">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationBrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,0,0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedIndicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
The Carousel Template (PCSActivityLocationBrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<!-- CONTENT -->
<Grid Padding="0,0,0,10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<!-- Info -->
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Name -->
<Label
FontSize="18"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationName}" />
<!-- {Binding Profile.Name} -->
<!-- Description -->
<Label HorizontalTextAlignment="Center" Text="{Binding ClientName}" />
<!-- {Binding Profile.Description} -->
<!-- Social -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Column 1 -->
<StackLayout Grid.Column="0" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalFloors}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 1629 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ETAGES" />
</StackLayout>
<!-- Column 2 -->
<StackLayout Grid.Column="1" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalRooms}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 235 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="RUIMTES" />
</StackLayout>
<!-- Column 3 -->
<StackLayout Grid.Column="2" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalElements}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 2963 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ELEMENTEN" />
</StackLayout>
</Grid>
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Image -->
<local:CircleCachedImage
BorderColor="{DynamicResource BasePageColor}"
BorderSize="{OnPlatform Android=8,
iOS=15}"
HeightRequest="100"
Source="resource://PCS2.APP.SharedImages.PCSDefaultClientImage.png"
WidthRequest="100" />
<!-- Badge -->
<local:Badge
BackgroundColor="#22c064"
HorizontalOptions="Center"
Text="10+"
TextColor="{DynamicResource InverseTextColor}"
TranslationX="40"
VerticalOptions="Start" />
</Grid>
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterAndExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- Rooms -->
<ListView
Grid.Row="2"
BackgroundColor="Blue"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start"
VerticalScrollBarVisibility="Always">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
I want to make a page where there is a picture and basically the everything else on the page on top of the image.
Something similar to this
XAML Code like :
<?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="Project.Page">
<ScrollView>
<AbsoluteLayout>
<Image Source="{Binding ContentImage}}" Aspect="AspectFill" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"/>
<Label Text="{Binding label}" FontSize="15" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0,1,-1,-1" />
</AbsoluteLayout>
</ScrollView>
I have this so far. But this only has the label way at the bottom right, and I can't seem to get the list or buttons to work properly. I was thinking maybe just have the image be the background, but the image is supposed to change by the push of a button or something and I am not entirely sure if you can do that with a background image.
Is something like this possible with Xamarin.Forms?
Sorry if my English is poor! It's my second language!
Thanks in advance!
EDIT: I was able to use the image as background and change by a button click. Now I just need to find out how to actually position a ListView.
I moved some items around from a demo, this is just one way to handle it using an AbsoluteLayout and Grid
<AbsoluteLayout x:Name="ViewLayout">
<Image Source="coffee.png" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" />
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
<StackLayout Orientation="Vertical" Margin="20,20,20,20" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Salted Caramel Mocha Frappuccino" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="2" />
<Button Text="Extra Shot" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" Grid.Row="0" Grid.Column="3" />
<Button Text="Whipped Cream" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" Grid.Row="1" Grid.Column="3" />
</Grid>
<Grid Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Text="Tall (12oz)" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="0" />
<Button Text="Grande (16oz)" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="1" />
<Button Text="Venti (20oz)" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White" BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="2" />
</Grid>
</StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
I want in my content to have a 'StackLayout' fixed and floating where it will contain 4 'Button's.
My layout is assikm at the moment
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="teste">
<Grid>
<ScrollView BackgroundColor="#ffffff" Padding="15" Grid.Row="0">
<StackLayout HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
<Label Text="{Binding Titulo}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="#38B6AB" FontSize="22" FontAttributes="Bold"/>
<Label Text="{Binding Data}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="#5a5a5a" FontSize="18" FontAttributes="Bold"/>
<Image x:Name="imagen1" Source="{Binding ImageSource}" Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</ScrollView>
</Grid>
//-----Floating button----- //
The Grid can float things on top of other things by placing the item in the same row and column, like the following. I will note that, depending on how you place the Buttons, it might be a usability issue to place Buttons where the user is suppose to be scrolling.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions> <!-- Multiple columns will allow even Button spacing, just set Grid.ColumnSpan on your ScrollView -->
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollView BackgroundColor="#ffffff"
Padding="15"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="4">
<StackLayout HorizontalOptions="Fill"
VerticalOptions="FillAndExpand">
....
</StackLayout>
</ScrollView>
<Button Text="One"
Grid.Row="0"
Grid.Column="0"/>
<Button Text="Two"
Grid.Row="0"
Grid.Column="1"/>
<Button Text="Three"
Grid.Row="0"
Grid.Column="2"/>
<Button Text="Four"
Grid.Row="0"
Grid.Column="3"/>
</Grid>
I have a StackLayout which contains a TableView, a Grid and a couple Labels.
My problem is that the StackLayout forces all elements to cover 100% of the height of the screen, and it is generating a vertical scroll on my TableView:
I would like to remove that vertical scroll inside the control, and rather have a "global" scroll for the whole view.
This is my XAML code for that view:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Title="Create Account"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AudioBitts"
x:Class="AudioBitts.SignUpPage">
<StackLayout>
<TableView x:Name="socialListView">
<TableRoot>
<TableSection Title="Social sign up">
<ImageCell ImageSource="{local:EmbeddedImage ResourceId=AudioBitts.Images.Icons.socialFacebook#3x.png}" Text="Sign up with Facebook" />
<ImageCell ImageSource="{local:EmbeddedImage ResourceId=AudioBitts.Images.Icons.socialTwitter#3x.png}" Text="Sign up with Twitter" />
<ImageCell ImageSource="{local:EmbeddedImage ResourceId=AudioBitts.Images.Icons.socialGoogle#3x.png}" Text="Sign up with Google+" />
</TableSection>
<TableSection Title="Email sign up">
<EntryCell Label="Email" Placeholder="Your email"/>
<EntryCell Label="Password" Placeholder="Min 6 characters"/>
</TableSection>
</TableRoot>
</TableView>
<Grid Padding="20" HorizontalOptions="Center" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Already have an account?" />
<Label x:Name="onSignIn" Grid.Row="0" Grid.Column="1" Text="Sign In" TextColor="#ff0030" />
</Grid>
<Label Text="AudioBitts Inc." HorizontalOptions="Center" />
<Label Text="Terms of Use and Privacy Policy" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
Why don't you just add another <TableSection/>, add a <ViewCell/> and add what's inside the Grid.
Hope it helps!
I am facing one issue in xamarin.forms. I am using GridView to make login page design so it can be change accordingly device height and width. I don't want scroll that page So I didn't put any ScrollView.
Xaml Design Code :-
<?xml version="1.0" encoding="utf-8" ?>
<custom:KeyboardResizingAwareContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HRMS.Login.LoginPage"
BackgroundImage="login_bg.png"
xmlns:local="clr-namespace:HRMS;assembly=HRMS"
Title="{x:Static local:AppResources.TitleLogin}"
xmlns:custom="clr-namespace:HRMS.Login;assembly=HRMS">
<ContentPage.Padding>
<OnIdiom x:TypeArguments="Thickness" Phone="60,40,60,40" Tablet="120,100,120,100" />
</ContentPage.Padding>
<custom:KeyboardResizingAwareContentPage.Resources>
<ResourceDictionary>
<Style x:Key="SubTitleStyle" TargetType="Label">
<Setter Property="FontSize" Value="Small" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="TextColor" Value="White" />
</Style>
</ResourceDictionary>
</custom:KeyboardResizingAwareContentPage.Resources>
<custom:KeyboardResizingAwareContentPage.Content>
<AbsoluteLayout x:Name="AbsMain">
<Grid VerticalOptions="Center" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid.RowDefinitions>
<RowDefinition Height="35*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="6*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="6*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="ImgLogo" Source="login_logo.png" HorizontalOptions="Center" Grid.Row="0"/>
<StackLayout Grid.Row="1">
<StackLayout.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
</StackLayout.HeightRequest>
</StackLayout>
<Frame OutlineColor="#DCDCDC"
HorizontalOptions="FillAndExpand" VerticalOptions="Center"
HasShadow="false" Padding="1"
Grid.Row="2"
BackgroundColor="White"
Margin="5,0,5,0">
<Frame.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
</Frame.HeightRequest>
<Frame.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="9*"/>
</Grid.ColumnDefinitions>
<Image x:Name="ImgLoginName" Grid.Column="0" Source="ico_login_name.png"
HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/>
<StackLayout Grid.Column="1" VerticalOptions="Center">
<Entry x:Name="TxtUsername" TextColor="#f15a23"
Margin="5,0,0,0"
PlaceholderColor="#8c8c8c"
BackgroundColor="White"
Placeholder="{x:Static local:AppResources.PHEmployeeCode}" />
</StackLayout>
</Grid>
</Frame.Content>
</Frame>
<Frame OutlineColor="#DCDCDC"
HorizontalOptions="FillAndExpand" VerticalOptions="Center"
HasShadow="false" Padding="1"
Grid.Row="3"
BackgroundColor="White"
Margin="5,0,5,0">
<Frame.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
</Frame.HeightRequest>
<Frame.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="9*"/>
</Grid.ColumnDefinitions>
<Image x:Name="ImgLoginPassword" Grid.Column="0" Source="ico_login_password.png"
HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/>
<StackLayout Grid.Column="1" VerticalOptions="Center">
<Entry x:Name="TxtPassword" IsPassword="True" TextColor="#f15a23"
PlaceholderColor="#8c8c8c"
Margin="5,0,0,0"
BackgroundColor="White"
Placeholder="{x:Static local:AppResources.PHPassword}" />
</StackLayout>
</Grid>
</Frame.Content>
</Frame>
<Label x:Name="LblForgotPassword" Grid.Row="4" Margin="5,0,5,0"
Text="Forgot Password?" TextColor="Black" HorizontalTextAlignment="End"/>
<Button x:Name="BtnLogin" Text="{x:Static local:AppResources.BLogin}" Clicked="LoginButton_Clicked"
Grid.Row="5" BackgroundColor="#f15a23" TextColor="White"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" />
</Button.HeightRequest>
</Button>
<Image x:Name="ImgOr" Grid.Row="6" HorizontalOptions="FillAndExpand"
Source="or.png" />
<Button x:Name="BtnUpdateDevicewithlogin" Text="{x:Static local:AppResources.BUpdateDevice}"
Clicked="UpdateDeviceWithLoginButton_Clicked" Grid.Row="7"
BackgroundColor="#f15a23" TextColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" />
</Button.HeightRequest>
</Button>
</Grid>
<ActivityIndicator x:Name="actIndicator2" Color="#f15a23" Opacity="2"
HeightRequest="50" WidthRequest="50" VerticalOptions="Center" HorizontalOptions="Center"
AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
</AbsoluteLayout>
</custom:KeyboardResizingAwareContentPage.Content>
</custom:KeyboardResizingAwareContentPage>
I am using "KeyboardResizingAwareContentPage" page instead "ContentPage" because In ios Page is not set when keyboard is open. password field hide behind keyboard so users can not see whatever then typing. That's why I am using Render for content Page in IOs.
As Above images when I focus on username or password entry field two buttons are hide behind the keyboard. Client requirement is that at that time page should be scroll. How can I solve this problem? Is it possible through rendering? I am facing this issue in both the platform. (ios and android)
Even if you don't mean to scroll your page, use a ScrollView as the root of your Page, and put your grid in it.
This should fix it.