Quantcast
Channel: Recent Threads — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 204402

Chat app keyboard pushes everything upwards

$
0
0

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>

Viewing all articles
Browse latest Browse all 204402

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>