I have a UI like below with a custom editor and a send icon: For sending message I am using below UI:
<Grid
Grid.Row="2"
VerticalOptions="EndAndExpand"
Margin="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border
Grid.Row="0"
Grid.Column="0"
Margin="8,5,0,5"
BackgroundColor="Transparent"
Stroke="Transparent"
StrokeShape="RoundRectangle 20"
HorizontalOptions="FillAndExpand">
<local:MessageCustomEditor
x:Name="tweetText"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
AutoSize="TextChanges"
TextColor="#1C7DB4"
BackgroundColor="White"
PlaceholderColor="#1C7DB4"
IsTextPredictionEnabled="False"
Placeholder=" Enter Caption...">
<local:MessageCustomEditor.MaximumHeightRequest>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>100</OnIdiom.Phone>
<OnIdiom.Tablet>150</OnIdiom.Tablet>
<OnIdiom.Desktop>100</OnIdiom.Desktop>
</OnIdiom>
</local:MessageCustomEditor.MaximumHeightRequest>
<local:MessageCustomEditor.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>18</OnIdiom.Phone>
<OnIdiom.Tablet>27</OnIdiom.Tablet>
<OnIdiom.Desktop>18</OnIdiom.Desktop>
</OnIdiom>
</local:MessageCustomEditor.FontSize>
</local:MessageCustomEditor>
</Border>
//send icon
<Image
Grid.Row="0"
Source="ic_send_xx.png"
Grid.Column="1">
</Image>
</Grid>
MessageCustomEditorRenderer:
class MessageCustomEditorRenderer : EditorRenderer
{
public MessageCustomEditorRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
GradientDrawable gd = new GradientDrawable();
gd.SetColor(global::Android.Graphics.Color.Transparent);
this.Control.SetBackgroundDrawable(gd);
this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Gray));
Control.SetTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Black));
// Add Padding (left, top, right, bottom)
Control.SetPadding(20, 20, 20, 20);
// Enforce maximum height
if (Element is MessageCustomEditor customEditor)
{
double maxHeight = customEditor.MaximumHeightRequest;
Control.SetMaxHeight((int)Context.ToPixels(maxHeight));
}
}
}
}
My problem is after entering a lengthy message inside the custom editor I am not able to scroll inside it. Please suggest a solution.
I tried adding scrolling in the custom editor like below, but not working.
Control.SetHorizontallyScrolling(false);
Control.VerticalScrollBarEnabled = true;
Update MessageCustomEditorRenderer like below:
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
if (Control != null)
{
GradientDrawable gd = new GradientDrawable();
gd.SetColor(global::Android.Graphics.Color.Transparent);
this.Control.SetBackgroundDrawable(gd);
this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Gray));
Control.SetTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Black));
// Add Padding (left, top, right, bottom)
Control.SetPadding(20, 20, 20, 20);
// Enforce maximum height
if (Element is MessageCustomEditor customEditor)
{
double maxHeight = customEditor.MaximumHeightRequest;
Control.SetMaxHeight((int)Context.ToPixels(maxHeight));
}
// Enable scrolling inside Editor
Control.VerticalScrollBarEnabled = true;
Control.MovementMethod = new Android.Text.Method.ScrollingMovementMethod();
// Properly handle touch event to allow both Editor and ScrollView scrolling
Control.SetOnTouchListener(new EditorTouchListener());
}
}
// Custom touch listener to allow both Editor and ScrollView scrolling
private class EditorTouchListener : Java.Lang.Object, Android.Views.View.IOnTouchListener
{
public bool OnTouch(Android.Views.View v, MotionEvent e)
{
if (v.CanScrollVertically(1) || v.CanScrollVertically(-1))
{
v.Parent?.RequestDisallowInterceptTouchEvent(true);
if (e.Action == MotionEventActions.Up)
{
v.Parent?.RequestDisallowInterceptTouchEvent(false);
}
}
return false;
}
}