1
votes

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:

enter image description here

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?