Hi - i have been following this tutorial to create a Chat UI:
https://www.xamboy.com/2018/06/14/exploring-a-chat-ui-in-xamarin-forms-part-1/
This seems to work by adding a margin to the view which holds the textbox in the OnKeyboardAppearing method in the custom renderer - however - I have a Navigation Page inside a Tabbed Page and for this the input view gets raised too high..
I've subtracted the TabBar height but there is still gap there.. i've tried manually adding a number to reduce the margin, but then that only works on one version of iPhone because of the different dimensions..
any thoughts how to achieve this?
ChatSendRenderer
using System;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Foundation;
using CoreGraphics;
using ChatUIXForms.iOS.Renderers;
[assembly: ExportRenderer(typeof(ChatSendView), typeof(ChatSendRenderer))]
namespace ChatUIXForms.iOS.Renderers
{
public class ChatSendRenderer : ViewRenderer //Depending on your situation, you will need to inherit from a different renderer
{
NSObject _keyboardShowObserver;
NSObject _keyboardHideObserver;
protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
RegisterForKeyboardNotifications();
}
if (e.OldElement != null)
{
UnregisterForKeyboardNotifications();
}
}
void RegisterForKeyboardNotifications()
{
if (_keyboardShowObserver == null)
_keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardShow);
if (_keyboardHideObserver == null)
_keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardHide);
}
void OnKeyboardShow(object sender, UIKeyboardEventArgs args)
{
NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
CGSize keyboardSize = result.RectangleFValue.Size;
if (Element != null)
{
Element.Margin = new Thickness(0, 0, 0, keyboardSize.Height - App.TabHeight); //push the entry up to keyboard height when keyboard is activated
}
}
void OnKeyboardHide(object sender, UIKeyboardEventArgs args)
{
if (Element != null)
{
Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
}
}
void UnregisterForKeyboardNotifications()
{
if (_keyboardShowObserver != null)
{
_keyboardShowObserver.Dispose();
_keyboardShowObserver = null;
}
if (_keyboardHideObserver != null)
{
_keyboardHideObserver.Dispose();
_keyboardHideObserver = null;
}
}
}
}
ChatPage
<Grid RowSpacing="0"
ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="6" />
<RowDefinition Height="Auto" />
<RowDefinition Height="6" />
</Grid.RowDefinitions>
<controls:CustomListView Grid.Row="0"
ItemTemplate="{StaticResource MessageTemplateSelector}"
ItemsSource="{Binding Chats}"
Margin="0"
ItemTapped="OnListTapped"
HasUnevenRows="True"
VerticalOptions="FillAndExpand"
SeparatorColor="Transparent"
x:Name="ChatList"
>
</controls:CustomListView>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="6"
BackgroundColor="#E5E5E5"
Grid.Row="1"/>
<ChatSendView Grid.Row="2"
Margin="0,0,0,0"
x:Name="chatInput"
/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="6"
BackgroundColor="#E5E5E5"
Grid.Row="3"/>
</Grid>
ChatSendView
<Grid RowSpacing="0" BackgroundColor="#E5E5E5"
ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<controls:ExtendedEditorControl x:Name="chatTextInput"
Text="{Binding TextToSend}"
Margin="10,0,10,0"
TextColor="Black"
Keyboard="Chat"
IsExpandable="true"
HorizontalOptions="FillAndExpand"
PlaceholderColor="LightGray"
Placeholder="Type your message here"
Grid.Row="0"
Grid.Column="0"
/>
<Button Grid.Row="0"
Grid.Column="1"
Text="Send"
Style="{StaticResource btn_primary}" WidthRequest="50" Margin="10,0,10,0"
Clicked="Handle_Completed"
></Button>
</Grid>