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;

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;

• maui
• editor

Share Improve this question Follow asked Mar 20 at 15:32 Matthew PansMatthew Pans 87511 gold badge1111 silver badges2929 bronze badges 3

• Does this issue happen in the android platform? By the way, EditorRenderer is deprecated. I test your code in the android emulator without MessageCustomEditorRenderer, I can scroll normally. You can try to remove MessageCustomEditorRenderer for testing. If it is still not working. Can you share a demo to reproduce this issues? – Leon Lu Commented Mar 21 at 2:13
• The issue is only on the Android platform. – Matthew Pans Commented Mar 21 at 7:51
• Can you share a demo to reproduce this issues? – Leon Lu Commented Mar 21 at 7:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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;
        }
    }