Xamarin ImageButton goes invisible after clicked - xaml

I have an image button which when I click I want to change its Source (an empty star to a filled one) for the ratings.
My XAML:
<StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0">
<ImageButton Source="star_empty.png"
HeightRequest="40"
WidthRequest="40"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
x:Name="star1"
BackgroundColor="Transparent"
Clicked="ImageButton_Clicked" />
<ImageButton Source="star_empty.png"
HeightRequest="40"
WidthRequest="40"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
x:Name="star2"
BackgroundColor="Transparent"
Clicked="ImageButton_Clicked2" />
<ImageButton Source="star_empty.png"
HeightRequest="40"
WidthRequest="40"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
x:Name="star3"
BackgroundColor="Transparent"
Clicked="ImageButton_Clicked3" />
<ImageButton Source="star_empty.png"
HeightRequest="40"
WidthRequest="40"
x:Name="star4"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent"
Clicked="ImageButton_Clicked4" />
<ImageButton Source="star_empty.png"
HeightRequest="40"
WidthRequest="40"
x:Name="star5"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
BackgroundColor="Transparent"
Clicked="ImageButton_Clicked5" />
</StackLayout>
The View class:
private void ImageButton_Clicked(object sender, EventArgs e)
{
star1.Source = "star_full.png";
int rating = 1;
}
What could be the issue? The Source does change, it just blinks then goes invisible. I set the isVisible property to true, that doesn't help.

Define the type of ImageSource you are using; file, resource, uri, stream:
Example:
star1.Source = ImageSource.FromResource("star_full.png");
Update:
<StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0">
<ImageButton x:Name="star1" Source="star_off.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
<ImageButton x:Name="star2" Source="star_off.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
<ImageButton x:Name="star3" Source="star_off.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
<ImageButton x:Name="star4" Source="star_off.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
<ImageButton x:Name="star5" Source="star_off.png" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
</StackLayout>
Code behind:
void ImageButton_Clicked(object sender, System.EventArgs e)
{
(sender as ImageButton).Source = ImageSource.FromFile("star_on.png");
}

Related

In UWP show selected item in Flex layout for Xamarin.forms

I am showing a list in FlexLayout by BindableLayout. I want to show some background color when someone selected an item. It seems really difficult in UWP.
<FlexLayout x:Name="FlexTypes" Wrap="Wrap" Margin="0" HorizontalOptions="FillAndExpand" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="120" WidthRequest="150">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference Page}, Path=BindingContext.AddItemCommand}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Frame Margin="5" Padding="0" CornerRadius="10" BackgroundColor="#f1f5fb" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,20,0,0">
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"/>
<Frame BackgroundColor="#ffffff" Padding="0" HeightRequest="30" WidthRequest="50" VerticalOptions="EndAndExpand" Margin="20">
<Label Text="{Binding Price, StringFormat='₹ {0:N}'}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
I am showing a list in FlexLayout by BindableLayout. I want to show some background color when someone selected an item.
For your requirement, we suggest handle it within TapGestureRecognizer Tapped event and make a previous value to record clicked item. Then set it background color as default when next item click. For more please refer the following sample code.
private Layout previous;
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
if (previous != null)
{
previous.BackgroundColor = Color.White;
}
var stacklayout = sender as Layout;
stacklayout.BackgroundColor = Color.Red;
previous = stacklayout;
}
Xaml
<FlexLayout
x:Name="FlexTypes"
Margin="0"
HorizontalOptions="FillAndExpand"
Wrap="Wrap">
<BindableLayout.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</x:Array>
</BindableLayout.ItemsSource>
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="120" WidthRequest="150">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
<Label Text="{Binding}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>

How to create a ScrollView in this layout?

I need to create a ScrollView in this layout but the problem is that my control occupies the entire screen and I don't know how to make it occupy only the size it has. This is the functionality of the control
I need it not to fill the entire screen and only its own size to be able to add more things to the layout
This is the XAML of my control:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
x:Class="ControlProject.CustomControl"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="CustomView">
<ContentView.Content>
<AbsoluteLayout>
<!-- ================This is the entry that must be in the bottom================ -->
<StackLayout
x:Name="STACK"
AbsoluteLayout.LayoutBounds="0,1,1,0.07"
AbsoluteLayout.LayoutFlags="All"
Orientation="Horizontal">
<Frame
Margin="0,0,0,2"
Padding="0,0,0,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=FrameColor}"
BorderColor="{Binding Source={x:Reference CustomView}, Path=BorderColor}"
CornerRadius="{Binding Source={x:Reference CustomView}, Path=CornerRadius}"
HasShadow="False"
HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ImageButton
Grid.Column="0"
Margin="5,0,0,0"
BackgroundColor="Transparent"
Clicked="Open"
HeightRequest="25"
HorizontalOptions="Start"
Source="{Binding Source={x:Reference CustomView}, Path=LeftSideIcon}" />
<Entry
x:Name="EntryControl"
Grid.Column="1"
Margin="0,0,55,0"
HeightRequest="25"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="{Binding Source={x:Reference CustomView}, Path=Placeholder}"
Text="{Binding EntryText}"
TextColor="{Binding Source={x:Reference CustomView}, Path=EntryTextColor}" />
<ImageButton
Grid.Column="1"
Margin="0,0,40,0"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=DeleteMsgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=DeleteMessageIcon}" />
<ImageButton
Grid.Column="1"
Margin="0,0,10,0"
Padding="1"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=InsertImgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=InsertImgIcon}" />
</Grid>
</Frame>
<ImageButton
Margin="0,0,5,2"
Padding="15,0,10,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=SendBtnColor}"
Command="{Binding Source={x:Reference CustomView}, Path=SendMsgCommand}"
CornerRadius="30"
HeightRequest="45"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=RightSideIcon}"
WidthRequest="45" />
</StackLayout>
<!-- ================This is what it moves up================ -->
<StackLayout
x:Name="frameemojis"
AbsoluteLayout.LayoutBounds="0,1,1,0.43"
AbsoluteLayout.LayoutFlags="All"
TranslationY="{Binding Height, Source={x:Reference frameemojis}}">
<Frame>
<CollectionView
Margin="-10,-15,-10,-10"
HeightRequest="270"
ItemsSource="{Binding Source={x:Reference CustomView}, Path=EmojiItemSource}"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" Span="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ImageButton
Padding="5"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=EmojiTappedCommand}"
CommandParameter="{Binding EmojiMethodCommand}"
HeightRequest="44"
Source="{Binding EmojiSource}"
WidthRequest="44" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Frame>
<!-- ============== -->
</StackLayout>
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
MainPage.xaml (this is where I want to add the ScrollView):
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="App24.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:fav="clr-namespace:ControlProject;assembly=ControlProject">
<AbsoluteLayout>
<!-- This is where I want to add the scrollview -->
<StackLayout
AbsoluteLayout.LayoutBounds="0,1,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="#4DFF0000">
<fav:CustomControl
x:Name="entrycontrol"
BorderColor="{Binding EntryBorderColor}"
CornerRadius="{Binding EntryRadius}"
DeleteMessageIcon="crossblack.png"
DeleteMsgCommand="{Binding DeleteMsgCommand}"
EmojiItemSource="{Binding EmojiList}"
EmojiTappedCommand="{Binding EmojiTappedCommand}"
EntryTextColor="{Binding TextColor}"
FrameColor="{Binding EntryBGColor}"
InsertImgCommand="{Binding InsertImgCommand}"
InsertImgIcon="insertimage.png"
LeftSideIcon="icon.png"
Placeholder="Escribddame"
RightSideIcon="send.png"
SendBtnColor="{Binding SendBtnColor}"
SendMsgCommand="{Binding SendMsgCommand}" />
</StackLayout>
</AbsoluteLayout>
</ContentPage>
[EDITED]
Method on code behind control:
bool isShow;
const double layoutPropHeightMax = 0.45;
const double layoutPropHeightMin = 0.06;
private void Button_Clicked(object sender, EventArgs e)
{
if (!isShow)
{
//show the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMin;
while (height < layoutPropHeightMax)
{
await Task.Delay(1);
height += 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0, 1.0, height));
}
});
}
else
{
// hide the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMax;
while (height > layoutPropHeightMin)
{
await Task.Delay(1);
height -= 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0, 1.0, height));
}
});
}
isShow = !isShow;
}
Control XAML:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
x:Class="ControlProject.CustomControl"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="CustomView">
<AbsoluteLayout AbsoluteLayout.LayoutBounds="0,1,1,1" BackgroundColor="White">
<StackLayout
x:Name="bottomBar"
AbsoluteLayout.LayoutBounds="0.5,1,1.0,0.07"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Olive">
<StackLayout
x:Name="STACK"
AbsoluteLayout.LayoutBounds="0,1,1,0.07"
AbsoluteLayout.LayoutFlags="All"
Orientation="Horizontal">
<Frame
Margin="0,0,0,2"
Padding="0,0,0,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=FrameColor}"
BorderColor="{Binding Source={x:Reference CustomView}, Path=BorderColor}"
CornerRadius="{Binding Source={x:Reference CustomView}, Path=CornerRadius}"
HasShadow="False"
HorizontalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ImageButton
Grid.Column="0"
Margin="5,0,0,0"
BackgroundColor="Transparent"
Clicked="Button_Clicked"
HeightRequest="25"
Source="{Binding Source={x:Reference CustomView}, Path=LeftSideIcon}" />
<Entry
x:Name="EntryControl"
Grid.Column="1"
Margin="0,0,55,0"
HeightRequest="25"
HorizontalOptions="FillAndExpand"
Keyboard="Chat"
Placeholder="{Binding Source={x:Reference CustomView}, Path=Placeholder}"
Text="{Binding EntryText}"
TextColor="{Binding Source={x:Reference CustomView}, Path=EntryTextColor}" />
<ImageButton
Grid.Column="1"
Margin="0,0,40,0"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=DeleteMsgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=DeleteMessageIcon}" />
<ImageButton
Grid.Column="1"
Margin="0,0,10,0"
Padding="1"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=InsertImgCommand}"
HeightRequest="25"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=InsertImgIcon}" />
</Grid>
</Frame>
<ImageButton
Margin="0,0,5,2"
Padding="15,0,10,0"
BackgroundColor="{Binding Source={x:Reference CustomView}, Path=SendBtnColor}"
Command="{Binding Source={x:Reference CustomView}, Path=SendMsgCommand}"
CornerRadius="30"
HeightRequest="45"
HorizontalOptions="End"
Source="{Binding Source={x:Reference CustomView}, Path=RightSideIcon}"
WidthRequest="45" />
</StackLayout>
<!-- ================This is what it moves up================ -->
<StackLayout
x:Name="frameemojis"
AbsoluteLayout.LayoutBounds="0,1,1,0.43"
AbsoluteLayout.LayoutFlags="All"
TranslationY="{Binding Height, Source={x:Reference frameemojis}}">
<Frame>
<CollectionView
Margin="-10,-15,-10,-10"
HeightRequest="270"
ItemsSource="{Binding Source={x:Reference CustomView}, Path=EmojiItemSource}"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" Span="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ImageButton
Padding="5"
BackgroundColor="Transparent"
Command="{Binding Source={x:Reference CustomView}, Path=EmojiTappedCommand}"
CommandParameter="{Binding EmojiMethodCommand}"
HeightRequest="44"
Source="{Binding EmojiSource}"
WidthRequest="44" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Frame>
<!-- ============== -->
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentView>
This is how I want to make it
In the ContentPage because you set the height of Stacklayout as the whole screen
AbsoluteLayout.LayoutBounds="0,1,1,1"
So it will be an expected result .
Actually , in your case you could implement the effect without using ScrollView .
in ContentPage
<AbsoluteLayout BackgroundColor="White" AbsoluteLayout.LayoutBounds="0,1,1,1">
<!-- -->
<Button Clicked="Button_Clicked" Text="Test" AbsoluteLayout.LayoutBounds="0.5,0.3,0.2,0.05" AbsoluteLayout.LayoutFlags="All" />
<StackLayout x:Name="bottomBar" BackgroundColor="Olive" AbsoluteLayout.LayoutBounds="0.5,1.0,1.0,0.04" AbsoluteLayout.LayoutFlags="All">
<!-- put the content of emoji keyboard and entry here -->
</StackLayout>
</AbsoluteLayout>
In Code behind
bool isShow;
const double layoutPropHeightMax = 0.45;
const double layoutPropHeightMin = 0.06;
//you could set the height here as you want
private void Button_Clicked(object sender, EventArgs e)
{
if(!isShow)
{
//show the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMin;
while (height < layoutPropHeightMax)
{
await Task.Delay(1);
height += 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0,1.0, height));
}
});
}
else
{
// hide the keyboard
Device.BeginInvokeOnMainThread(async () =>
{
var height = layoutPropHeightMax;
while (height > layoutPropHeightMin)
{
await Task.Delay(1);
height -= 0.04;
AbsoluteLayout.SetLayoutBounds(bottomBar, new Rectangle(0.5, 1.0, 1.0, height));
}
});
}
isShow = !isShow;
}
And in Custom Control let the Entry and Keyboard fill the whole StackLayout .

First-time user onboarding with Xamarin.Forms

I am implementing a first-time user onboarding in a Xamarin.Forms application like the one on the image below:
Please, how can I quickly do that?
Thank you in advance.
Do you want to achieve the result like following GIF?
You can use CarouselView and IndicatorView to achieve it.
Here is layout code.I dont adjust the layout like yours, you can adjust it by yourself, If you want to make Next and Skip Button over float the CarouselView, you can use AbsoluteLayout
<StackLayout Margin="10">
<CarouselView x:Name="myCarouselView" ItemsSource="{Binding Monkeys}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="50"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="Skip" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked"></Button>
<Button Text="Next" Grid.Column="1" BackgroundColor="Transparent" Clicked="Button_Clicked_1"></Button>
</Grid>
<IndicatorView x:Name="indicatorView"
MaximumVisible="6"
Margin="0,0,0,40"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
</StackLayout>
Here is layout bakground code.
public partial class BasicIndicatorViewPage : ContentPage
{
int monkeyCount;
public BasicIndicatorViewPage()
{
InitializeComponent();
MonkeysViewModel monkeysViewModel= new MonkeysViewModel();
monkeyCount = monkeysViewModel.Monkeys.Count;
BindingContext = monkeysViewModel;
}
private void Button_Clicked(object sender, System.EventArgs e)
{
Navigation.PushAsync(new Page1());
Navigation.RemovePage(this);
}
private void Button_Clicked_1(object sender, System.EventArgs e)
{
if (myCarouselView.Position < monkeyCount-1)
{
myCarouselView.Position += 1;
}
else
{
Navigation.PushAsync(new Page1());
Navigation.RemovePage(this);
}
}
}
Here is my demo, you can download it.
https://github.com/851265601/XFormsCarouselView-IndicatorViewLoginPage
If you want to put the indicatorView and Button in the same line like this screenshot.
You can use this layout(indicatorView to the Grid).
<StackLayout Margin="10">
<CarouselView x:Name="myCarouselView" ItemsSource="{Binding Monkeys}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="50"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Text="Skip" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked"></Button>
<IndicatorView x:Name="indicatorView"
MaximumVisible="6"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" Grid.Column="1" />
<Button Text="Next" Grid.Column="2" BackgroundColor="Transparent" Clicked="Button_Clicked_1"></Button>
</Grid>
</StackLayout>
You could use the offical Xamarin.Forms CarouselView but that's still in preview. You could also potentially look at the Sharpnado's solution with HorizontalListView. Your third option would be to use Alex Rainman's CarouselView.

keyboard Overlap On login screen -Xamarin .forms

I have a xamarin forms app with a login screen.The problem I am facing is keyboard overlap when user enter details.The Username and password entering field is inside frame.
What I am getting
What I want
My Xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="#173F5F"
x:Class="app.Login">
<ScrollView>
<RelativeLayout>
<Image Source="backgrnd.png" Aspect="Fill"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
<StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand" Margin="15,30,15,0">
<Image Source="logo.png" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="150" WidthRequest="150"></Image>
<Image Source="backlogo.png" HorizontalOptions="Center" VerticalOptions="Center" ></Image>
</StackLayout>
<StackLayout VerticalOptions="End" Margin="15,0,15,50" >
<Frame BackgroundColor="Snow" OutlineColor="Snow" HasShadow="True" HorizontalOptions="FillAndExpand" Padding="10,10,10,10"
CornerRadius="5"
Margin="15,10,15,0">
<StackLayout VerticalOptions="End" >
<StackLayout Orientation="Horizontal">
<Image Source="userlogo.png" HorizontalOptions="Start" HeightRequest="30" WidthRequest="30"></Image>
<Entry TextColor="Black"
x:Name="userName"
PlaceholderColor="Gray"
ReturnType="Next"
BackgroundColor="Snow"
Placeholder="User ID"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Image Source="locklogo.png" HorizontalOptions="Start" HeightRequest="30" WidthRequest="30"></Image>
<Entry TextColor="Black"
PlaceholderColor="Gray"
x:Name="password"
BackgroundColor="Snow"
VerticalOptions="Center"
Placeholder="Password"
IsPassword="true"
HorizontalOptions="FillAndExpand"/>
</StackLayout>
<Grid>
<Button x:Name="LoginButton" BackgroundColor="#4080a6" TextColor="White" Text="Sign In" Clicked="Login_Clicked" BorderRadius="7" BorderColor="#4080a6" BorderWidth = "2" HorizontalOptions="FillAndExpand" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>
</RelativeLayout>
</ScrollView>
</ContentPage>
I tried Xam.Plugins.Forms.KeyboardOverlap but it doesnt solved my problem.Any help is appreciated.
Take a look at the answer here
I tried option 2 on Android and it works fine.
For your case,
try to add this Code to your page class
protected override void OnAppearing()
{
base.OnAppearing();
userName.Focused += InputFocused;
password.Focused += InputFocused;
userName.Unfocused += InputUnfocused;
password.Unfocused += InputUnfocused;
}
protected override void OnDisappearing()
{
base.OnDisappearing();
userName.Focused -= InputFocused;
password.Focused -= InputFocused;
userName.Unfocused -= InputUnfocused;
password.Unfocused -= InputUnfocused;
}
void InputFocused(object sender, EventArgs args)
{
Content.LayoutTo(new Rectangle(0, -270, Content.Bounds.Width, Content.Bounds.Height));
}
void InputUnfocused(object sender, EventArgs args)
{
Content.LayoutTo(new Rectangle(0, 0, Content.Bounds.Width, Content.Bounds.Height));
}
Update
this code should be working on both Android and IOS

Xamarin (Frame.)GestureRecognizers doesn't work

I am trying to make a TapGestureRecognizer on some frames, but when I test it, nothing happens.
xaml
<StackLayout>
<AbsoluteLayout>
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="12.5" HeightRequest="60" WidthRequest="120">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Sport_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" Spacing="-10">
<Label Text="Sport" FontSize="17"/>
</StackLayout>
</StackLayout>
</Frame>
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="187.5" HeightRequest="60" WidthRequest="120">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Voeding_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" Spacing="-10">
<Label Text="Voeding" FontSize="17"/>
</StackLayout>
</StackLayout>
</Frame>
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="495" TranslationX="12.5" HeightRequest="60" WidthRequest="120">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Slaap_Clicked"/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" Spacing="-10">
<Label Text="Slaap" FontSize="17" />
</StackLayout>
</StackLayout>
</Frame>
</AbsoluteLayout>
</StackLayout>
cs
void Sport_Clicked(object sender, EventArgs e)
{
new NavigationPage(new SportPage());
}
void Voeding_Clicked(object sender, EventArgs e)
{
new NavigationPage(new VoedingPage());
}
void Slaap_Clicked(object sender, EventArgs e)
{
new NavigationPage(new SlaapPage());
}
I am not getting any warnings or errors when testing. Is there something that overlaps the frames which you cannot see that causes to blocks the input?
Edit:
This is how a frame looks with the following code
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" TranslationY="380" TranslationX="187.5" HeightRequest="60" WidthRequest="120" BackgroundColor="Yellow">
<StackLayout Orientation="Vertical" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Green">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="Voeding_Clicked"/>
</StackLayout.GestureRecognizers>
<StackLayout Orientation="Horizontal" Spacing="-10" BackgroundColor="Red">
<Label Text="Voeding" FontSize="17"/>
</StackLayout>
</StackLayout>
</Frame>
With this code I should be able to click the green part and get a response, but I'm not getting that? Is there a way to have something that will overlap the whole frame so I can use that to click on?
Cause:
Your Frame doesn't respond to your TapGestureRecognizer is caused by your TranslationY="380" TranslationX="187.5" properies. You cannot tap on the control that is out of bounds of parent view, even if this control is seen.
Translating an element outside the bounds of its parent container may
prevent inputs from working.
Solution:
Remove the TranslationY and TranslationX properties and layout your Frame in other ways.
Edited:
You can see the screenshort below, I write a simple demo and add PaleGreen as AbsoluteLayout's backgroundColor. Your Frame is out of bounds of parent view.So it will not do response to TapGestureRecognizer.
So, set FillAndExpand to AbsoluteLayout's VerticalOptions property to make sure your Frame is inside the bounds of parent view.
<AbsoluteLayout BackgroundColor="PaleGreen" VerticalOptions="FillAndExpand">
I updated a screenshot here,hope you can understand well: