다음을 통해 공유

Xamarin.Forms 편집기

  • 아티클

Editor 컨트롤은 여러 줄 입력을 허용하는 데 사용됩니다.

텍스트 설정 및 읽기

다른 텍스트 프레젠테이션 보기와 마찬가지로 속성 Editor이 Text 노출됩니다. 이 속성을 사용하여 .에서 제공하는 Editor텍스트를 설정하고 읽을 수 있습니다. 다음 예제에서는 XAML에서 속성을 설정하는 방법을 Text 보여 줍니다.

<Editor x:Name="editor" Text="I am an Editor" />

C#:

var editor = new Editor { Text = "I am an Editor" };

텍스트를 읽으려면 C#의 Text 속성에 액세스합니다.

var text = editor.Text;

자리 표시자 텍스트 설정

Editor 사용자 입력을 저장하지 않을 때 자리 표시자 텍스트를 표시하도록 설정할 수 있습니다. 이 작업은 속성을 Placeholder 로 string설정하여 수행되며, 종종 에 적합한 Editor콘텐츠 형식을 나타내는 데 사용됩니다. 또한 자리 표시자 텍스트 색은 속성을 다음으로 설정 PlaceholderColor 하여 제어할 Color수 있습니다.

<Editor Placeholder="Enter text here" PlaceholderColor="Olive" />

var editor = new Editor { Placeholder = "Enter text here", PlaceholderColor = Color.Olive };

텍스트 입력 방지

기본값false이 있는 속성을 다음으로 Editor 설정 IsReadOnly 하여 사용자가 텍스트 수정을 방지할 true수 있습니다.

<Editor Text="This is a read-only Editor"
        IsReadOnly="true" />

var editor = new Editor { Text = "This is a read-only Editor", IsReadOnly = true });

참고 항목

속성은 IsReadonly 시각적 모양을 회색으로 Editor변경하는 속성과 달리 IsEnabled 시각적 모양을 Editor 변경하지 않습니다.

텍스트 변환

속성 Editor 은 열거형 값으로 설정 TextTransform 하여 속성에 Text 저장된 텍스트의 TextTransform 대/소문자를 변환할 수 있습니다. 이 열거형에는 다음 네 가지 값이 있습니다.

  • None 는 텍스트가 변환되지 않음을 나타냅니다.
  • Default 는 플랫폼의 기본 동작이 사용됨을 나타냅니다. TextTransform 속성의 기본값입니다.
  • Lowercase 는 텍스트가 소문자로 변환됨을 나타냅니다.
  • Uppercase 는 텍스트가 대문자로 변환됨을 나타냅니다.

다음 예제에서는 텍스트를 대문자로 변환하는 방법을 보여줍니다.

<Editor Text="This text will be displayed in uppercase."
        TextTransform="Uppercase" />

해당하는 C# 코드는 다음과 같습니다.

Editor editor = new Editor
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

입력 길이 제한

이 MaxLength 속성을 사용하여 에 허용되는 Editor입력 길이를 제한할 수 있습니다. 이 속성은 양의 정수로 설정해야 합니다.

<Editor ... MaxLength="10" />

var editor = new Editor { ... MaxLength = 10 };

MaxLength 속성 값이 0이면 입력이 허용되지 않음을 나타내고, 기본값Editor인 값int.MaxValue은 입력할 수 있는 문자 수에 대한 유효 제한이 없음을 나타냅니다.

문자 간격

속성을 값으로 Editor 설정하여 문자 간격을 Editor.CharacterSpacing 적용할 double 수 있습니다.

<Editor ...
        CharacterSpacing="10" />

해당하는 C# 코드는 다음과 같습니다.

Editor editor = new editor { CharacterSpacing = 10 };

그 결과 텍스트에 표시되는 Editor 문자는 간격이 지정된 CharacterSpacing 디바이스 독립적 단위가 떨어져 있습니다.

참고 항목

CharacterSpacing 속성 값은 및 Placeholder 속성에 의해 표시되는 텍스트에 Text 적용됩니다.

편집기 자동 크기 조정

열 Editor 거형의 값인 속성을 TextChanges설정하여 Editor.AutoSize 콘텐츠의 EditorAutoSizeOption 크기를 자동으로 지정할 수 있습니다. 이 열거형에는 다음 두 가지 값이 있습니다.

  • Disabled 는 자동 크기 조정을 사용하지 않도록 설정하고 기본값임을 나타냅니다.
  • TextChanges 는 자동 크기 조정을 사용하도록 설정되어 있음을 나타냅니다.

이 작업은 코드에서 다음과 같이 수행할 수 있습니다.

<Editor Text="Enter text here" AutoSize="TextChanges" />

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.TextChanges };

자동 크기 조정을 사용하도록 설정하면 사용자가 텍스트로 채울 때 높이 Editor 가 증가하고 사용자가 텍스트를 삭제하면 높이가 줄어듭니다.

참고 항목

속성이 설정된 경우 자동 Editor 크기가 HeightRequest 지정되지 않습니다.

키보드 사용자 지정

사용자가 상호 작용할 Editor 때 표시되는 키보드는 속성을 통해 Keyboard 프로그래밍 방식으로 클래스의 다음 속성 Keyboard 중 하나로 설정할 수 있습니다.

  • Chat – 텍스트 작성 및 이모티콘이 유용한 경우에 사용합니다.
  • Default – 기본 키보드입니다.
  • Email – 전자 메일 주소를 입력할 때 사용합니다.
  • Numeric – 숫자를 입력할 때 사용합니다.
  • Plain – 지정된 KeyboardFlags 없이 텍스트를 입력할 때 사용합니다.
  • Telephone – 전화 번호를 입력할 때 사용합니다.
  • Text – 텍스트를 입력할 때 사용합니다.
  • Url – 파일 경로 및 웹 주소를 입력하는 데 사용합니다.

이렇게 하면 다음과 같이 XAML로 수행할 수 있습니다.

<Editor Keyboard="Chat" />

해당하는 C# 코드는 다음과 같습니다.

var editor = new Editor { Keyboard = Keyboard.Chat };

각 키보드의 예는 레시피 리포지토리에서 찾을 수 있습니다.

또한 Keyboard 클래스에는 대소문자, 맞춤법 검사 및 제안 동작을 지정하여 키보드를 사용자 지정하는 데 사용할 수 있는 Create 팩터리 메서드가 있습니다. KeyboardFlags 열거형 값은 사용자 지정된 Keyboard가 반환되는 메서드에 대한 인수로 지정됩니다. KeyboardFlags 열거는 다음 값을 포함합니다.

  • None – 키보드에 추가되는 기능이 없습니다.
  • CapitalizeSentence – 입력된 각 문장의 첫 번째 단어의 첫 문자가 자동으로 대문자로 시작함을 나타냅니다.
  • Spellcheck - 입력한 텍스트에 대해 맞춤법 검사를 수행할지를 나타냅니다.
  • Suggestions - 입력한 텍스트에 대해 완성된 단어를 제안할지를 나타냅니다.
  • CapitalizeWord – 각 단어의 첫 문자가 자동으로 대문자로 시작함을 나타냅니다.
  • CapitalizeCharacter – 모든 문자가 자동으로 대문자로 시작함을 나타냅니다.
  • CapitalizeNone – 자동 대소문자 표시가 이루어지지 않음을 나타냅니다.
  • All – 입력한 텍스트에 대해 맞춤법 검사, 단어 완성 및 문장 첫 글자 대문자 입력이 이루어질 것임을 나타냅니다.

다음 XAML 코드 예제에서는 완성 단어를 제안하고 입력한 모든 글자를 대문자로 시작하도록 기본 Keyboard를 사용자 지정하는 방법을 보여 줍니다.

<Editor>
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

해당하는 C# 코드는 다음과 같습니다.

var editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

맞춤법 검사 사용 및 사용 안 함

이 속성은 IsSpellCheckEnabled 맞춤법 검사를 사용할 수 있는지 여부를 제어합니다. 기본적으로 속성은 .로 설정됩니다 true. 사용자가 텍스트를 입력하면 맞춤법이 잘못 표시됩니다.

그러나 사용자 이름 입력과 같은 일부 텍스트 입력 시나리오의 경우 맞춤법 검사는 부정적인 환경을 제공하므로 속성을 false다음으로 설정하여 사용하지 않도록 설정 IsSpellCheckEnabled 해야 합니다.

<Editor ... IsSpellCheckEnabled="false" />

var editor = new Editor { ... IsSpellCheckEnabled = false };

참고 항목

속성이 IsSpellCheckEnabled 설정 false되고 사용자 지정 키보드가 사용되지 않는 경우 네이티브 맞춤법 검사기가 비활성화됩니다. 그러나 Keyboard 같은 맞춤법 검사를 Keyboard.ChatIsSpellCheckEnabled 사용하지 않도록 설정하는 경우 속성은 무시됩니다. 따라서 속성을 명시적으로 사용하지 않도록 설정하는 맞춤법 검사를 Keyboard 사용하도록 설정하는 데 사용할 수 없습니다.

텍스트 예측 사용 및 사용 안 함

이 속성은 IsTextPredictionEnabled 텍스트 예측 및 자동 텍스트 수정을 사용할 수 있는지 여부를 제어합니다. 기본적으로 속성은 .로 설정됩니다 true. 사용자가 텍스트를 입력하면 단어 예측이 표시됩니다.

그러나 사용자 이름 입력과 같은 일부 텍스트 입력 시나리오의 경우 텍스트 예측 및 자동 텍스트 수정은 부정적인 환경을 제공하며 속성을 false다음으로 설정하여 사용하지 않도록 설정 IsTextPredictionEnabled 해야 합니다.

<Editor ... IsTextPredictionEnabled="false" />

var editor = new Editor { ... IsTextPredictionEnabled = false };

참고 항목

속성이 IsTextPredictionEnabled 설정 false되고 사용자 지정 키보드를 사용하지 않는 경우 텍스트 예측 및 자동 텍스트 수정을 사용할 수 없습니다. 그러나 Keyboard 텍스트 예측을 IsTextPredictionEnabled 사용하지 않도록 설정하는 경우 속성은 무시됩니다. 따라서 속성을 명시적으로 사용하지 않도록 설정하는 텍스트 예측을 Keyboard 사용하도록 설정하는 데 사용할 수 없습니다.

색

Editor 속성을 통해 BackgroundColor 사용자 지정 배경색을 사용하도록 설정할 수 있습니다. 각 플랫폼에서 색을 사용할 수 있도록 하려면 특별한 주의가 필요합니다. 각 플랫폼에는 텍스트 색에 대한 기본값이 다르기 때문에 각 플랫폼에 대해 사용자 지정 배경색을 설정해야 할 수 있습니다. 각 플랫폼에 대한 UI 최적화에 대한 자세한 내용은 플랫폼 조정 작업을 참조하세요.

C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        //dark blue on UWP & Android, light blue on iOS
        var editor = new Editor { BackgroundColor = Device.RuntimePlatform == Device.iOS ? Color.FromHex("#A4EAFF") : Color.FromHex("#2c3e50") };
        layout.Children.Add(editor);
    }
}

XAML에서:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TextSample.EditorPage"
    Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor>
                <Editor.BackgroundColor>
                    <OnPlatform x:TypeArguments="x:Color">
                        <On Platform="iOS" Value="#a4eaff" />
                        <On Platform="Android, UWP" Value="#2c3e50" />
                    </OnPlatform>
                </Editor.BackgroundColor>
            </Editor>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

BackgroundColor 예제를 사용하여 편집기

선택한 배경색과 텍스트 색이 각 플랫폼에서 사용할 수 있고 자리 표시자 텍스트를 가리지 않도록 합니다.

이벤트 및 대화형 작업

Editor 는 다음 두 가지 이벤트를 노출합니다.

  • TextChanged – 편집기에서 텍스트가 변경될 때 발생합니다. 변경 전후에 텍스트를 제공합니다.
  • 완료됨 - 사용자가 키보드에서 반환 키를 눌러 입력을 종료했을 때 발생합니다.

참고 항목

VisualElement 상속되는 Entry 클래스에는 이벤트도 있습니다 Focused Unfocused.

Completed

이 Completed 이벤트는 .와의 Editor상호 작용 완료에 반응하는 데 사용됩니다. Completed 는 사용자가 키보드에서 반환 키를 입력하거나 UWP에서 Tab 키를 눌러 필드 입력을 종료할 때 발생합니다. 이벤트에 대한 처리기는 보낸 사람 및 EventArgs다음을 수행하는 제네릭 이벤트 처리기입니다.

void EditorCompleted (object sender, EventArgs e)
{
    var text = ((Editor)sender).Text; // sender is cast to an Editor to enable reading the `Text` property of the view.
}

완료된 이벤트는 코드 및 XAML에서 구독할 수 있습니다.

C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.Completed += EditorCompleted;
        layout.Children.Add(editor);
    }
}

XAML에서:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor Completed="EditorCompleted" />
        </StackLayout>
    </ContentPage.Content>
</Contentpage>

TextChanged

이 TextChanged 이벤트는 필드 내용의 변경에 대응하는 데 사용됩니다.

TextChanged 는 변경될 Text 때마다 발생합니다 Editor . 이벤트에 대한 처리기는 .의 TextChangedEventArgs인스턴스를 가져옵니다. TextChangedEventArgs에서는 다음을 통해 이전 값과 새 값에 Editor Text 액세스할 수 OldTextValue 있습니다.NewTextValue

void EditorTextChanged (object sender, TextChangedEventArgs e)
{
    var oldText = e.OldTextValue;
    var newText = e.NewTextValue;
}

완료된 이벤트는 코드 및 XAML에서 구독할 수 있습니다.

코드

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.TextChanged += EditorTextChanged;
        layout.Children.Add(editor);
    }
}

XAML에서:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor TextChanged="EditorTextChanged" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>