Solution 1 :
The first one is that when I’m ready to type some message, the
keyboard overlapps the main chat.
For the first question, you should detect the keyboard up/down and move up/down the listView.
In Android, you can use Soft Keyboard Input Mode
<Application ...
xmlns_android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:Application.WindowSoftInputModeAdjust="Resize">
...
</Application>
In iOS , you need to write a custom renderer to detect the event.
You can check the answers in this thread and read this blog for solutions.
The second one occurs when I hide the keyboard and the listView
doesn’t scroll all the away down.
You should scroll the listView in the EnviarPedidoCommand
after you insert that message to the itemSource of listView.
Problem :
I’m workin’ on an Xamarin.forms app chat and I’m havin’ some troubles with the listView
. The first one is that when I’m ready to type some message, the keyboard overlapps the main chat. The second one occurs when I hide the keyboard and the listView
doesn’t scroll all the away down. Is there some convention solution to this type of problems? Here’s the video and the respective code:
My xaml Page:
<StackLayout>
<ListView
x_Name="MessagesListView"
ItemTemplate="{StaticResource MessageTemplateSelector}"
ItemsSource="{Binding Pedidos}"
HasUnevenRows="True" SeparatorVisibility="None" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" IsEnabled="True" SelectionMode="None" BackgroundColor="{StaticResource BackGroundColor}"/>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource white}" Grid.Row="1">
<local1:CustomEntry
HorizontalOptions="FillAndExpand"
Placeholder="{translator:Translate Mensagem}"
Keyboard="Chat" Margin="8,0,0,0" PlaceholderColor="{StaticResource PlaceHolderText}" TextColor="{StaticResource texto}" FontSize="14" Text="{Binding Pedido.Message}" x_Name="Message"/>
<Image Source="send.png" WidthRequest="32" HeightRequest="32" Margin="8,8,8,8" BackgroundColor="Transparent">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding EnviarPedidoCommand}"
Tapped="Button_Clicked"
/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
Backend page:
public ChatPage(Classes.ClassConversation.ResultadoConversation conversation, Classes.ClassUser.Result user)
{
InitializeComponent();
GetResult = conversation;
ConnectionsStrings.GlobalVar.email = user.rowKey;
GetUser = user;
Xamarin.Forms.Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
_viewModel = new ViewModels.ConnectionHub(conversation, user);
}
protected override async void OnAppearing()
{
base.OnAppearing();
GetHistoryOfConversation(GetResult.rowKey, ConnectionsStrings.GlobalVar.Token, GetUser);
BindingContext = _viewModel;
await _viewModel.Connect();
}
protected override async void OnDisappearing()
{
base.OnDisappearing();
await _viewModel.Disconnect();
}
//Limpa o campo mensagem quando envia mensagem
private void Button_Clicked(object sender, EventArgs e)
{
Message.Text = "";
}
//Função que recebe o historico de mensagens daquela conversa
async void GetHistoryOfConversation(string conversationId, string token, Classes.ClassUser.Result user)
{
try
{
Classes.ClasMessage messages = await Servicos.Servicos.GetHistoryOfConversation(conversationId, token, user, GetResult);
_viewModel.Pedidos = new ObservableRangeCollection<Classes.SendMessage>(messages.result);
var target = _viewModel.Pedidos[_viewModel.Pedidos.Count - 1];
MessagesListView.ScrollTo(target, ScrollToPosition.End, false);
var result = await Servicos.Servicos.ReadConversation(conversationId, GetResult);
}
catch (Exception)
{
await DisplayAlert(Languages.AppResources.Notifications, Languages.AppResources.ErrorOccurred, "Ok");
}
}
Comments
Comment posted by stackoverflow.com/questions/40373761/…
This may help you.
Comment posted by Rafa Vieira
thanks for the reply, but it doesn’t work. It works on appearing but when I insert registration by the viewmodel it doesn’t work.
Comment posted by Chetan Rawat
Please try to rotate Listview and and add item in top of list
Comment posted by Rafa Vieira
hello, I’m on android already using “resize” the problem is that the content of the listview when the keyboard is open, the content of the listview does not show the last message. To see this message, you need to scroll. If I use the “pan” the problem from above does not occur but the toolbar disappears and the listview scroll does not show all the data.
Comment posted by nevermore
What’s your problem on iOS?
Comment posted by Rafa Vieira
On ios it’s working properly. When the keyboard is open, the last item in the listview is displayed.
Comment posted by nevermore
Did you scroll the listView to last element in the EnviarPedidoCommand after you send the message? You should use “Resize”.
Comment posted by Rafa Vieira
.My problem with SendRequestCommand is that this command is in the viewmodel. and then I can’t access the list scroll. Im using resize. you can see in my code.