I'm making a chat app UI with Xamarin Forms. Anytime I tap the Editor
to open a keyboard, it ends up shifting the entire page upwards, including where the user and recipient's messages will be.
https://imgur.com/a/NLGTI1t
How can I make it so that only the custom chat editor and button are pushed upwards and everything else has an absolute position?
Heres the XAML code:
<ContentPage.Resources> <ResourceDictionary> <helpers:TemplateSelector x:Key="MessageTemplateSelector"/> </ResourceDictionary> </ContentPage.Resources> <Grid RowSpacing="0" ColumnSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="1"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!--Chat Views--> <!--Chat Messages Area--> <renderers:AutoScrollListView x:Name="messagesListView" Grid.Row="1" ItemTemplate="{StaticResource MessageTemplateSelector}" ItemsSource="{Binding Messages}" Margin="0" HasUnevenRows="True" VerticalOptions="FillAndExpand" SeparatorColor="Transparent" SelectionMode="None"> </renderers:AutoScrollListView> <!--A simple separator--> <BoxView BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" Grid.Row="2"/> <!--Chatbot Entry and Send Button--> <StackLayout Grid.Row="3" Padding="5,10,10,10" Margin="0"> <Grid ColumnSpacing="0" RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="5*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!--Chat Entry--> <renderers:RoundedEditor x:Name="ChatEntry" Text="{Binding TextToSend, Mode=TwoWay}" Grid.Column="0" Placeholder="Type your message" CornerRadius="30" BackColor="White" BackgroundColor="Transparent" BorderColor="#999999" BorderWidth="6" FontSize="16" PlaceholderColor="#b3b3b3" Keyboard="Chat"/> <!--Send Button--> <pancake:PancakeView x:Name="sendBtn" Grid.Column="1" BackgroundColor="#0f8df4" CornerRadius="100" xamEffects:TouchEffect.Color="White" xamEffects:Commands.Tap="{Binding SendCommand}" HeightRequest="47" WidthRequest="47" VerticalOptions="Center" HorizontalOptions="End"> <Image Source="sendarrow1.png" HeightRequest="30" WidthRequest="30" Margin="5,0,0,0" HorizontalOptions="Center" VerticalOptions="Center"/> </pancake:PancakeView> </Grid> </StackLayout> <!--Chatbot Header and Back Button--> <pancake:PancakeView BackgroundColor="#f7f7f7" Grid.Row="0" HasShadow="True" Padding="0,10,0,10"> <StackLayout Orientation="Horizontal"> <!--Back Arrow Button--> <renderers:FontAwesomeIcon Text="{x:Static helpers:IconsFA.BackArrow}" HorizontalOptions="Start" TextColor="Black" FontSize="20" VerticalTextAlignment="Center" Margin="20,0,10,0"> <Label.GestureRecognizers> <TapGestureRecognizer Tapped="BacktoMain_Button"/> </Label.GestureRecognizers> </renderers:FontAwesomeIcon> <!--Fleming Image--> <StackLayout Orientation="Horizontal"> <Frame BackgroundColor="Gray" Padding="0" CornerRadius="100" HasShadow="False" IsClippedToBounds="True" HeightRequest="40" WidthRequest="40"> <Image HorizontalOptions="Center" VerticalOptions="Center"/> </Frame> <!--Fleming Text--> <Label Text="Fleming" TextColor="Black" FontAttributes="Bold" FontSize="18" VerticalOptions="Center"/> </StackLayout> </StackLayout> </pancake:PancakeView> </Grid>