다음을 통해 공유

편집기

  • 아티클

.NET 다중 플랫폼 앱 UI(.NET MAUI) Editor 를 사용하면 여러 줄의 텍스트를 입력하고 편집할 수 있습니다.

Editor는 다음 속성을 정의합니다.

  • AutoSize형식 EditorAutoSizeOption의 는 편집기에서 사용자 입력을 수용하도록 크기를 변경할지 여부를 정의합니다. 기본적으로 편집기 크기는 자동 조정되지 않습니다.
  • HorizontalTextAlignment형식 TextAlignment의 은 텍스트의 가로 맞춤을 정의합니다.
  • VerticalTextAlignment형식 TextAlignment의 은 텍스트의 세로 맞춤을 정의합니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

또한 Editor 반환 키를 사용하여 Completed 텍스트를 Editor 완료할 때 발생하는 이벤트를 정의합니다.

Editor 는 InputView 다음 속성을 상속하는 클래스에서 파생됩니다.

  • CharacterSpacing형식 double의 경우 입력한 텍스트의 문자 사이의 간격을 설정합니다.
  • CursorPosition형식 int의 는 편집기 내에서 커서의 위치를 정의합니다.
  • FontAttributes형식 FontAttributes의 텍스트 스타일을 결정합니다.
  • FontAutoScalingEnabled형식 bool의 은 텍스트가 운영 체제에 설정된 크기 조정 기본 설정을 반영하는지 여부를 정의합니다. 이 속성의 기본값은 true입니다.
  • FontFamily형식 string의 글꼴 패밀리를 정의합니다.
  • FontSize형식 double의 글꼴 크기를 정의합니다.
  • IsReadOnly형식 bool의 은 사용자가 텍스트를 수정하지 못하도록 해야 하는지 여부를 정의합니다. 이 속성의 기본값은 false입니다.
  • IsSpellCheckEnabled형식 bool의 맞춤법 검사를 사용할지 여부를 제어합니다.
  • IsTextPredictionEnabled형식 bool의 는 텍스트 예측 및 자동 텍스트 수정을 사용할 수 있는지 여부를 제어합니다.
  • Keyboard형식 Keyboard의 는 텍스트를 입력할 때 표시되는 소프트 입력 키보드를 지정합니다.
  • MaxLength형식 int의 최대 입력 길이를 정의합니다.
  • Placeholder형식 string의 컨트롤이 비어 있을 때 표시되는 텍스트를 정의합니다.
  • PlaceholderColor형식 Color의 자리 표시자 텍스트 색을 정의합니다.
  • SelectionLength형식 int의 는 컨트롤 내에서 선택한 텍스트의 길이를 나타냅니다.
  • Text형식 string의 컨트롤에 입력된 텍스트를 정의합니다.
  • TextColor형식 Color의 은 입력한 텍스트의 색을 정의합니다.
  • TextTransform형식 TextTransform으로 입력한 텍스트의 대/소문자를 지정합니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

또한 InputView 텍스트 Editor 가 TextChanged 변경될 때 발생하는 이벤트를 정의합니다. TextChangedEventArgs 이벤트 NewTextValue 와 함께 TextChanged 제공되는 개체와 새 텍스트와 OldTextValue 이전 텍스트를 각각 지정하는 속성이 있습니다.

글꼴을 지정하는 방법에 대한 자세한 내용은 글꼴을 Editor참조 하세요.

편집기 만들기

다음 예제에서는 다음을 만드는 방법을 보여줍니다.Editor

<Editor x:Name="editor"
        Placeholder="Enter your response here"
        HeightRequest="250"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />

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

Editor editor = new Editor { Placeholder = "Enter text", HeightRequest = 250 };
editor.TextChanged += OnEditorTextChanged;
editor.Completed += OnEditorCompleted;

다음 스크린샷은 Android의 결과를 Editor 보여줍니다.

Android의 기본 편집기 스크린샷

참고 항목

iOS에서 소프트 입력 키보드는 필드가 화면 아래쪽 근처에 있을 때 텍스트 입력 필드를 커버할 수 있으므로 텍스트를 입력하기가 어렵습니다. 그러나 .NET MAUI iOS 앱에서는 소프트 입력 키보드가 텍스트 입력 필드를 덮을 때 페이지가 자동으로 스크롤되므로 필드가 소프트 입력 키보드 위에 있습니다. 네임스페이스에서 메서드 KeyboardAutoManagerScroll.Disconnect 를 Microsoft.Maui.Platform 호출하여 이 기본 동작을 사용하지 않도록 설정할 수 있습니다. 메서드를 KeyboardAutoManagerScroll.Connect 호출하여 비활성화된 후 동작을 다시 사용하도록 설정할 수 있습니다.

입력한 텍스트는 속성을 읽어 Text 액세스할 수 있으며, 이벤트 및 TextChanged Completed 이벤트는 텍스트가 변경되었거나 완료되었음을 알립니다.

이 TextChanged 이벤트는 텍스트 Editor 가 변경될 때 발생하며 TextChangedEventArgs 변경 전후에 다음과 같은 속성을 통해 OldTextValue NewTextValue 텍스트를 제공합니다.

void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
    string myText = editor.Text;
}

이 Completed 이벤트는 사용자가 키보드에서 Tab 키를 누르거나 다른 컨트롤을 포커스하여 입력을 종료한 경우에만 Windows에서 발생합니다. 이벤트에 대한 처리기는 제네릭 이벤트 처리기입니다.

void OnEditorCompleted(object sender, EventArgs e)
{
   string text = ((Editor)sender).Text;
}

문자 간격 설정

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

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

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

참고 항목

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

입력 길이 제한

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

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

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

편집기 자동 크기 조정

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

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

이렇게 하려면 다음을 수행합니다.

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

자동 크기 조정을 사용하도록 설정하면 사용자가 텍스트로 채울 때 높이 Editor 가 증가하고 사용자가 텍스트를 삭제하면 높이가 줄어듭니다. 크기가 Editor 올바른 개체 DataTemplate CollectionView 를 확인하는 데 사용할 수 있습니다.

Important

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

텍스트 변환

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

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

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

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

키보드 사용자 지정

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

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

다음 예제에서는 속성을 설정하는 방법을 Keyboard 보여줍니다.

<Editor 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# 코드는 다음과 같습니다.

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

소프트 입력 키보드 숨기기 및 표시

네임스페이스의 클래스 Microsoft.Maui 는 SoftInputExtensions 텍스트 입력을 지원하는 컨트롤에서 소프트 입력 키보드와 상호 작용을 지원하는 일련의 확장 메서드를 제공합니다. 클래스는 다음 메서드를 정의합니다.

  • IsSoftInputShowing- 디바이스에 현재 소프트 입력 키보드가 표시되는지 확인합니다.
  • HideSoftInputAsync현재 표시되는 경우 소프트 입력 키보드를 숨기려고 합니다.
  • ShowSoftInputAsync- 현재 숨겨진 경우 소프트 입력 키보드를 표시하려고 시도합니다.

다음 예제에서는 현재 표시된 경우 명명editor된 Editor 키보드에서 소프트 입력 키보드를 숨기는 방법을 보여줍니다.

if (editor.IsSoftInputShowing())
    await editor.HideSoftInputAsync(System.Threading.CancellationToken.None);

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

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

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

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

참고 항목

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

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

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

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

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

참고 항목

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

텍스트 입력 방지

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

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

참고 항목

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