(Xamarin Forms) 텍스트 길이에 따라 늘어나는 Editer

Editer 컨트롤에서 사용자가 입력한 글자가 컨트롤 크기를 벗어날 때 자동으로 옆과 아래쪽으로

Editer 가 늘어나도록 하는 방법입니다.

우선 .Net Standard 프로젝트에 CustomEditor 를 추가합니다.

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace Test.Controls
{
    public class CustomEditor : Editor
    {
        public static BindableProperty IsExpandableProperty
        = BindableProperty.Create(nameof(IsExpandable), typeof(bool), typeof(CustomEditor), false);

        public bool IsExpandable
        {
            get { return (bool)GetValue(IsExpandableProperty); }
            set { SetValue(IsExpandableProperty, value); }
        }

        public CustomEditor()
        {
            TextChanged += OnTextChanged;
        }

        private void OnTextChanged(object sender, TextChangedEventArgs e)
        {
            if (IsExpandable) InvalidateMeasure();
        }
    }
}

InvalidateMeasure 부분이 핵심입니다

 

Android 프로젝트에 CustomEditorRenderer 를 추가합니다.

Android 쪽은 추가 하지 않아도 기능은 동작합니다.

다만 밑줄을 안보이게 하기위해 추가된거라고 보면되겠네요.(그리고 나중을 위해서^^)

using System.ComponentModel;
using Android.Content;
using Android.Graphics.Drawables;
using Test.Controls;
using Test.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Test.Droid
{
    public class CustomEditorRenderer : EditorRenderer
    {
        public CustomEditorRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 밑줄을 보이지 않도록 하기
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(global::Android.Graphics.Color.Transparent);
                this.Control.SetBackgroundDrawable(gd);
            }
        }
     }
}

 

iOS 프로젝트에도 CustomEditorRenderer 를 추가합니다.

using System.ComponentModel;
using Test.Controls;
using Test.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace Test.iOS
{
    public class CustomEditorRenderer : EditorRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                var customControl = (CustomEditor)e.NewElement;

                if (customControl.IsExpandable)
                    Control.ScrollEnabled = false;
                else
                    Control.ScrollEnabled = true;
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            var customControl = (CustomEditor)Element;

            if (CustomEditor.IsExpandableProperty.PropertyName == e.PropertyName)
            {
                if (customControl.IsExpandable)
                    Control.ScrollEnabled = false;
                else
                    Control.ScrollEnabled = true;
            }
        }
    }
}

 

xaml 코드

콘텐츠 페이지를 만들어 아래와 같이 코딩합니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:Test.Controls"
             x:Class="Test.TestPage" BackgroundColor="#253570">
    <ContentPage.Content>
            <StackLayout>
                    <controls:CustomEditor x:Name="customEditor" Margin="7,0,7,0"
                                                   BackgroundColor="#DEDFE4" FontSize="15" HorizontalOptions="Start"
                                                   IsExpandable="true" MaxLength="30" />
            </StackLayout>
    </ContentPage.Content>
</ContentPage>

위코드 CustomEditor 의 IsExpandable = true 로 가변크기가 가능하도록 했고 MaxLength 30으로 길이 제한이 있도록 했습니다.

 

이제 실행해 보면

Editer 에 글자를 입력하면 입력한 대로 Editer 크기가 변하는 걸 확인할 수 있습니다.

(캡쳐하다가 마우스 포인터까지..;;)

아래위나 옆으로 컨트롤이있다면 그 컨트롤들이 밀리면서 늘어나기때문에 글자 입력이 잘리지 않습니다.