I create Xamarin Forms applications with the possibility of chat and i have problem with my chatPage. My code looks like this:
<?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="MyApp.Chat.ChatRoomPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<RefreshView
IsRefreshing="{Binding IsRefreshing, Mode=OneWay}"
Command="{Binding RefreshCommand}"
Grid.Row="0">
<CollectionView
x:Name="CollectionViewMessages"
ItemsSource="{Binding MessagesList}"
BackgroundColor="{ DynamicResource BasePageColor }">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="auto, auto">
<Grid IsVisible="{Binding IsOwnerMessage}">
<template:ChatRightMessageItemTemplate />
</Grid>
<Grid
Grid.Row="1"
IsVisible="{Binding IsOwnerMessage, Converter={converters:BooleanConverter}}">
<template:ChatLeftMessageItemTemplate />
</Grid>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
<!-- Loading gif -->
<ActivityIndicator
Grid.Row="0"
IsRunning="{Binding IsBusy}"
HorizontalOptions="Center"
VerticalOptions="Start"
TranslationY="40"
InputTransparent="True"/>
</Grid>
<!--- Message Writing -->
<Grid
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid
Grid.Row="0"
Margin="20,10,20,10"
ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Comment -->
<Editor
Grid.Column="0"
x:Name="entry"
AutoSize="TextChanges"
Margin="0,0,5,2"
FontSize="14"
Text="{Binding Message}"
HorizontalOptions="FillAndExpand"
VerticalOptions="End"/>
<!-- Send button -->
<Image
Grid.Column="2"
Source="SendMessageButton.png"
HorizontalOptions="End"
VerticalOptions="End"
WidthRequest="23"
HeightRequest="20"
Margin="0,0,0,10">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SendMessageCommand}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Grid>
</Grid>
</ContentPage>
the effect of this is this:
This work well on Android but on iOS nope. After clicking something on the keyboard, the field for typing escapes below it and we cannot see what we are typing. In addition, when you switch the keyboard to emoji, its size changes and you cannot see what you are typing. The input field problem is solved if you use scrollview, but then the collectionview fills the entire screen and the input field is outside of it. How to solve this problem so that autosize and emoji work properly on iOS?