Xamarin.Forms 편집기 자습서

아티클
Developer (초급)
완료하는 데 8분 걸림

이 자습서를 시도하기 전에 다음 작업을 성공적으로 완료해야 합니다.

첫 번째 Xamarin.Forms 앱을 빌드하세요 빠른 시작.
StackLayout 자습서

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

XAML에서 Xamarin.FormsEditor을 만듭니다.
변경 중인 Editor에 있는 텍스트에 응답합니다.
Editor의 동작을 사용자 지정합니다.

Visual Studio 2019 또는 Mac용 Visual Studio를 사용하여 Editor의 동작을 사용자 지정하는 방법을 보여 주는 간단한 애플리케이션을 만들겠습니다. 다음 스크린샷은 최종 애플리케이션을 보여 줍니다.

또한 Xamarin.Forms용 XAML 핫 다시 로드를 사용하여 애플리케이션을 다시 빌드하지 않고 UI 변경 내용을 확인할 수 있습니다.

편집기 만들기

7분 남음

Visual Studio
Mac용 Visual Studio

이 자습서를 완료하려면 .NET을 사용한 모바일 개발 워크로드가 설치된 Visual Studio 2019(최신 릴리스)가 있어야 합니다. 또한 iOS에서 자습서 애플리케이션을 빌드하려면 페어링된 Mac이 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요. Visual Studio 2019를 Mac 빌드 호스트에 연결하는 방법에 대한 자세한 내용은 Xamarin.iOS 개발을 위해 Mac에 페어링을 참조하세요.

Visual Studio를 실행하고, EditorTutorial이라는 비어 있는 새 Xamarin.Forms 앱을 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각은 솔루션의 이름이 EditorTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
솔루션 탐색기의 EditorTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, MainPage.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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
이 코드는 StackLayout에서 Editor로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다. Editor.Placeholder 속성은 Editor가 처음 표시될 때 표시되는 자리 표시자 텍스트를 지정합니다. 또한 HeightRequest 속성은 디바이스 독립적 단위로 Editor의 높이를 지정합니다.
Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

참고 항목

Android는 Editor의 높이를 나타내지만 iOS는 그렇지 않습니다.

Visual Studio에서 애플리케이션을 중지합니다.

이 자습서를 완료하려면 iOS 및 Android 플랫폼 지원이 설치된 Mac용 Visual Studio(최신 릴리스)가 있어야 합니다. 또한 Xcode(최신 릴리스)도 필요합니다. Xamarin 플랫폼 설치에 대한 자세한 내용은 Xamarin 설치를 참조하세요.

Mac용 Visual Studio를 실행하고, EditorTutorial이라는 비어 있는 새 Xamarin.Forms 앱을 만듭니다.

Important

이 자습서의 C# 및 XAML 코드 조각은 솔루션의 이름이 EditorTutorial이어야 합니다. 이 자습서에서 코드를 솔루션으로 복사할 때 다른 이름을 사용하면 빌드 오류가 발생합니다.

생성된 .NET Standard 라이브러리에 대한 자세한 내용은 Xamarin.Forms 빠른 시작 심층 분석에서 Xamarin.Forms 애플리케이션 분석을 참조하세요.
Solution Pad의 EditorTutorial 프로젝트에서 MainPage.xaml을 두 번 클릭하여 엽니다. 그런 다음, MainPage.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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
이 코드는 StackLayout에서 Editor로 구성된 페이지에 대한 사용자 인터페이스를 선언적으로 정의합니다. Editor.Placeholder 속성은 Editor가 처음 표시될 때 표시되는 자리 표시자 텍스트를 지정합니다. 또한 HeightRequest 속성은 디바이스 독립적 단위로 Editor의 높이를 지정합니다.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

참고 항목

Android는 Editor의 높이를 나타내지만 iOS는 그렇지 않습니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

텍스트 변경 내용에 대응

5분 남음

Visual Studio
Mac용 Visual Studio

MainPage.xaml에서 Editor 선언을 수정하여 TextChanged 및 Completed 이벤트에 대한 처리기를 설정합니다.
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
이 코드는 TextChanged 이벤트를 OnEditorTextChanged라는 이벤트 처리기로 설정하고, Completed 이벤트를 OnEditorCompleted라는 이벤트 처리기로 설정합니다. 두 가지 이벤트 처리기는 다음 단계에서 생성됩니다.
솔루션 탐색기의 EditorTutorial 프로젝트에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml.cs에서 OnEditorTextChanged 및 OnEditorCompleted 이벤트 처리기를 클래스에 추가합니다.
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEditorCompleted(object sender, EventArgs e)
{
    string text = ((Editor)sender).Text;
}
```
Editor에 있는 텍스트가 변경되면 OnEditorTextChanged 메서드가 실행됩니다. sender 인수는 TextChanged 이벤트의 실행을 담당하는 Editor 개체이며 Editor 개체에 액세스하는 데 사용될 수 있습니다. TextChangedEventArgs 인수는 앞뒤의 텍스트 변경 내용에서 이전 및 새 텍스트 값을 제공합니다.

편집이 완료되면 OnEditorCompleted 메서드가 실행됩니다. Editor의 포커스를 제거하거나 추가로 iOS에서 "완료" 단추를 눌러서 수행합니다. sender 인수는 TextChanged 이벤트의 실행을 담당하는 Editor 개체이며 Editor 개체에 액세스하는 데 사용될 수 있습니다.

Important

Editor에 입력된 텍스트는 Text 속성에 저장됩니다.
Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

두 개의 이벤트 처리기에서 중단점을 설정하고, Editor에 텍스트를 입력하고, TextChanged 이벤트가 발생하는지 살펴봅니다. Editor의 포커스를 제거하여 Completed 이벤트가 발생하는지 살펴봅니다.

Editor 이벤트에 관한 자세한 내용은 Xamarin.Forms 편집기 가이드의 이벤트 및 대화형 작업을 참조하세요.

MainPage.xaml에서 Editor 선언을 수정하여 TextChanged 및 Completed 이벤트에 대한 처리기를 설정합니다.
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
이 코드는 TextChanged 이벤트를 OnEditorTextChanged라는 이벤트 처리기로 설정하고, Completed 이벤트를 OnEditorCompleted라는 이벤트 처리기로 설정합니다. 두 가지 이벤트 처리기는 다음 단계에서 생성됩니다.
Solution Pad의 EditorTutorial 프로젝트에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭하여 엽니다. 그런 다음, MainPage.xaml.cs에서 OnEditorTextChanged 및 OnEditorCompleted 이벤트 처리기를 클래스에 추가합니다.
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEditorCompleted(object sender, EventArgs e)
{
    string text = ((Editor)sender).Text;
}
```
Editor에 있는 텍스트가 변경되면 OnEditorTextChanged 메서드가 실행됩니다. sender 인수는 TextChanged 이벤트의 실행을 담당하는 Editor 개체이며 Editor 개체에 액세스하는 데 사용될 수 있습니다. TextChangedEventArgs 인수는 앞뒤의 텍스트 변경 내용에서 이전 및 새 텍스트 값을 제공합니다.

편집이 완료되면 OnEditorCompleted 메서드가 실행됩니다. Editor의 포커스를 제거하거나 추가로 iOS에서 "완료" 단추를 눌러서 수행합니다. sender 인수는 TextChanged 이벤트의 실행을 담당하는 Editor 개체이며 Editor 개체에 액세스하는 데 사용될 수 있습니다.

Important

Editor에 입력된 텍스트는 Text 속성에 저장됩니다.
Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android 에뮬레이터 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다.

두 개의 이벤트 처리기에서 중단점을 설정하고, Editor에 텍스트를 입력하고, TextChanged 이벤트가 발생하는지 살펴봅니다. Editor의 포커스를 제거하여 Completed 이벤트가 발생하는지 살펴봅니다.

Editor 이벤트에 관한 자세한 내용은 Xamarin.Forms 편집기 가이드의 이벤트 및 대화형 작업을 참조하세요.

동작 사용자 지정

2분 남음

Visual Studio
Mac용 Visual Studio

MainPage.xaml에서 Editor 선언을 수정하여 해당 동작을 사용자 지정합니다.
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
이 코드는 Editor의 동작을 사용자 지정하는 속성을 설정합니다. AutoSize 속성은 TextChanges로 설정됩니다. 즉, Editor가 텍스트로 채워지면 높이가 증가하고 텍스트가 제거되면 높이가 감소한다는 것을 나타냅니다. MaxLength 속성은 Editor에 허용되는 입력 길이를 제한합니다. 또한 IsSpellCheckEnabled 속성이 false로 설정되어 맞춤법 검사를 사용하지 않도록 설정하는 동시에, IsTextPredictionEnabled 속성도 false로 설정되어 텍스트 예측 및 자동 텍스트 예측을 사용하지 않도록 설정합니다.
애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Visual Studio 도구 모음에서 선택한 원격 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Editor에 텍스트를 입력하고, Editor가 텍스트로 채워지면 높이가 증가하고 텍스트가 제거되면 높이가 감소하며 입력할 수 있는 문자의 최대 수는 200개임을 살펴봅니다.

Visual Studio에서 애플리케이션을 중지합니다.

Editor 동작을 사용자 지정하는 방법은 Xamarin.Forms 편집기 가이드를 참조하세요.

MainPage.xaml에서 Editor 선언을 수정하여 해당 동작을 사용자 지정합니다.
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
이 코드는 Editor의 동작을 사용자 지정하는 속성을 설정합니다. AutoSize 속성은 TextChanges로 설정됩니다. 즉, Editor가 텍스트로 채워지면 높이가 증가하고 텍스트가 제거되면 높이가 감소한다는 것을 나타냅니다. MaxLength 속성은 Editor에 허용되는 입력 길이를 제한합니다. 또한 IsSpellCheckEnabled 속성이 false로 설정되어 맞춤법 검사를 사용하지 않도록 설정하는 동시에, IsTextPredictionEnabled 속성도 false로 설정되어 텍스트 예측 및 자동 텍스트 예측을 사용하지 않도록 설정합니다.
애플리케이션이 계속 실행 중인 경우 변경 내용을 파일에 저장하면 애플리케이션 사용자 인터페이스가 시뮬레이터나 에뮬레이터에서 자동으로 업데이트됩니다. 또는 Mac용 Visual Studio 도구 모음에서 선택한 iOS 시뮬레이터 또는 Android Emulator 내에서 애플리케이션을 시작하려면 시작 단추(재생 단추와 비슷한 삼각형 모양의 단추)를 누릅니다. Editor에 텍스트를 입력하고, Editor가 텍스트로 채워지면 높이가 증가하고 텍스트가 제거되면 높이가 감소하며 입력할 수 있는 문자의 최대 수는 200개임을 살펴봅니다.

Mac용 Visual Studio에서 애플리케이션을 중지합니다.

Editor 동작을 사용자 지정하는 방법은 Xamarin.Forms 편집기 가이드를 참조하세요.

Xamarin.Forms 편집기 자습서

편집기 만들기

텍스트 변경 내용에 대응

동작 사용자 지정

축하합니다!

다음 단계

관련 링크