Xamarin 양식 항목Xamarin.Forms Entry

샘플 다운로드 샘플 다운로드Download Sample Download the sample

한 줄 텍스트 또는 암호 입력Single-line text or password input

Xamarin.ios Entry 는 한 줄 텍스트 입력에 사용 됩니다.The Xamarin.Forms Entry is used for single-line text input. @No__t_2 뷰와 같은 Entry는 여러 키보드 유형을 지원 합니다.The Entry, like the Editor view, supports multiple keyboard types. 또한 Entry를 암호 필드로 사용할 수 있습니다.Additionally, the Entry can be used as a password field.

사용자 지정 표시Display Customization

텍스트 설정 및 읽기Setting and Reading Text

다른 텍스트 표시 뷰와 마찬가지로 Entry Text 속성을 노출 합니다.The Entry, like other text-presenting views, exposes the Text property. 이 속성을 사용 하 여 Entry 표시 되는 텍스트를 설정 하 고 읽을 수 있습니다.This property can be used to set and read the text presented by the Entry. 다음 예제에서는 XAML에서 Text 속성을 설정 하는 방법을 보여 줍니다.The following example demonstrates setting the Text property in XAML:

<Entry Text="I am an Entry" />

C#:In C#:

var MyEntry = new Entry { Text = "I am an Entry" };

텍스트를 읽으려면의 C#Text 속성에 액세스 합니다.To read text, access the Text property in C#:

var text = MyEntry.Text;

자리 표시자 텍스트 설정Setting Placeholder Text

사용자 입력을 저장 하지 않을 경우 자리 표시자 텍스트를 표시 하도록 Entry 를 설정할 수 있습니다.The Entry can be set to show placeholder text when it is not storing user input. 이렇게 하려면 Placeholder 속성을 string 설정 하 고 Entry에 적절 한 콘텐츠 형식을 나타내는 데 자주 사용 됩니다.This is accomplished by setting the Placeholder property to a string, and is often used to indicate the type of content that is appropriate for the Entry. 또한 PlaceholderColor 속성을 Color설정 하 여 자리 표시자 텍스트 색을 제어할 수 있습니다.In addition, the placeholder text color can be controlled by setting the PlaceholderColor property to a Color:

<Entry Placeholder="Username" PlaceholderColor="Olive" />
var entry = new Entry { Placeholder = "Username", PlaceholderColor = Color.Olive };

참고

@No__t_0의 너비는 WidthRequest 속성을 설정 하 여 정의할 수 있습니다.The width of an Entry can be defined by setting its WidthRequest property. @No__t_1 속성의 값에 따라 정의 되는 Entry의 너비에 따라 달라 집니다.Do not depend on the width of an Entry being defined based on the value of its Text property.

텍스트 입력 방지Preventing Text Entry

사용자는 기본값인 falseIsReadOnly 속성을 true로 설정 하 여 Entry 의 텍스트를 수정할 수 없습니다.Users can be prevented from modifying the text in an Entry by setting the IsReadOnly property, which has a default value of false, to true:

<Entry Text="This is a read-only Entry"
       IsReadOnly="true" />
var entry = new Entry { Text = "This is a read-only Entry", IsReadOnly = true });

참고

@No__t_0 속성은 Entry의 시각적 모양을 회색으로 변경 하는 IsEnabled 속성과 달리 Entry의 시각적 모양을 변경 하지 않습니다.The IsReadonly property does not alter the visual appearance of an Entry, unlike the IsEnabled property that also changes the visual appearance of the Entry to gray.

입력 길이 제한Limiting Input Length

@No__t_1 속성을 사용 하 여 Entry에 대해 허용 되는 입력 길이를 제한할 수 있습니다.The MaxLength property can be used to limit the input length that's permitted for the Entry. 이 속성은 양의 정수로 설정 해야 합니다.This property should be set to a positive integer:

<Entry ... MaxLength="10" />
var entry = new Entry { ... MaxLength = 10 };

@No__t_1 속성 값이 0 이면 입력이 허용 되지 않고 Entry에 대 한 기본값인 int.MaxValue 값이 입력 될 수 있는 문자 수에 대 한 유효 한도가 없음을 나타냅니다.A MaxLength property value of 0 indicates that no input will be allowed, and a value of int.MaxValue, which is the default value for an Entry, indicates that there is no effective limit on the number of characters that may be entered.

문자 간격Character spacing

@No__t_2 속성을 double 값으로 설정 하 여 Entry 에 문자 간격을 적용할 수 있습니다.Character spacing can be applied to an Entry by setting the Entry.CharacterSpacing property to a double value:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

Entry entry = new Entry { CharacterSpacing = 10 };

그 결과 Entry 표시 되는 텍스트의 문자는 장치 독립적 단위 CharacterSpacing 간격이 떨어져 있습니다.The result is that characters in the text displayed by the Entry are spaced CharacterSpacing device-independent units apart.

참고

@No__t_0 속성 값은 TextPlaceholder 속성에 의해 표시 되는 텍스트에 적용 됩니다.The CharacterSpacing property value is applied to the text displayed by the Text and Placeholder properties.

암호 필드Password Fields

Entry IsPassword 속성을 제공 합니다.Entry provides the IsPassword property. @No__t_0 true 되 면 필드의 내용이 검정 원으로 표시 됩니다.When IsPassword is true, the contents of the field will be presented as black circles:

XAML에서:In XAML:

<Entry IsPassword="true" />

C#:In C#:

var MyEntry = new Entry { IsPassword = true };

항목 IsPassword 예제

자리 표시자는 암호 필드로 구성 된 Entry의 인스턴스와 함께 사용할 수 있습니다.Placeholders may be used with instances of Entry that are configured as password fields:

XAML에서:In XAML:

<Entry IsPassword="true" Placeholder="Password" />

C#:In C#:

var MyEntry = new Entry { IsPassword = true, Placeholder = "Password" };

항목 IsPassword 및 자리 표시자 예제

커서 위치 및 텍스트 선택 길이 설정Setting the Cursor Position and Text Selection Length

@No__t_1 속성을 사용 하 여 Text 속성에 저장 된 문자열에 다음 문자를 삽입할 위치를 반환 하거나 설정할 수 있습니다.The CursorPosition property can be used to return or set the position at which the next character will be inserted into the string stored in the Text property:

<Entry Text="Cursor position set" CursorPosition="5" />
var entry = new Entry { Text = "Cursor position set", CursorPosition = 5 };

@No__t_1 속성의 기본값은 0 이며,이 값은 텍스트가 Entry 시작 부분에 삽입 됨을 나타냅니다.The default value of the CursorPosition property is 0, which indicates that text will be inserted at the start of the Entry.

또한 SelectionLength 속성을 사용 하 여 Entry 내에서 텍스트 선택의 길이를 반환 하거나 설정할 수 있습니다.In addition, the SelectionLength property can be used to return or set the length of text selection within the Entry:

<Entry Text="Cursor position and selection length set" CursorPosition="2" SelectionLength="10" />
var entry = new Entry { Text = "Cursor position and selection length set", CursorPosition = 2, SelectionLength = 10 };

@No__t_1 속성의 기본값은 0으로, 선택 된 텍스트가 없음을 나타냅니다.The default value of the SelectionLength property is 0, which indicates that no text is selected.

지우기 단추 표시Displaying a Clear Button

@No__t_0 속성을 사용 하 여 사용자가 텍스트를 지울 수 있도록 하는 Entry 지우기 단추를 표시할지 여부를 제어할 수 있습니다.The ClearButtonVisibility property can be used to control whether an Entry displays a clear button, which enables the user to clear the text. 이 속성은 ClearButtonVisibility 열거형 멤버로 설정 해야 합니다.This property should be set to a ClearButtonVisibility enumeration member:

  • Never은 지우기 단추가 표시 되지 않음을 나타냅니다.Never indicates that a clear button will never be displayed. 이 값은 Entry.ClearButtonVisibility 속성의 기본값입니다.This is the default value for the Entry.ClearButtonVisibility property.
  • WhileEditing는 포커스와 텍스트를 포함 하는 동안 Entry에 clear 단추가 표시 됨을 나타냅니다.WhileEditing indicates that a clear button will be displayed in the Entry, while it has focus and text.

다음 예제에서는 XAML에서 속성을 설정 하는 방법을 보여 줍니다.The following example shows setting the property in XAML:

<Entry Text="Xamarin.Forms"
       ClearButtonVisibility="WhileEditing" />

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var entry = new Entry { Text = "Xamarin.Forms", ClearButtonVisibility = ClearButtonVisibility.WhileEditing };

다음 스크린샷은 clear 단추가 사용 하도록 설정 된 Entry 를 보여 줍니다.The following screenshots show an Entry with the clear button enabled:

IOS 및 Android에서 지우기 단추가 있는 항목의 스크린샷

키보드 사용자 지정Customizing the Keyboard

사용자가 Entry 와 상호 작용할 때 제공 되는 키보드는 Keyboard 클래스에서 다음 속성 중 하나로 Keyboard 속성을 통해 프로그래밍 방식으로 설정할 수 있습니다.The keyboard that's presented when users interact with an Entry can be set programmatically via the Keyboard property, to one of the following properties from the Keyboard class:

  • Chat – 텍스트 작성 및 이모티콘이 유용한 경우에 사용합니다.Chat – used for texting and places where emoji are useful.
  • Default – 기본 키보드입니다.Default – the default keyboard.
  • Email – 전자 메일 주소를 입력할 때 사용합니다.Email – used when entering email addresses.
  • Numeric – 숫자를 입력할 때 사용합니다.Numeric – used when entering numbers.
  • Plain – 지정된 KeyboardFlags 없이 텍스트를 입력할 때 사용합니다.Plain – used when entering text, without any KeyboardFlags specified.
  • Telephone – 전화 번호를 입력할 때 사용합니다.Telephone – used when entering telephone numbers.
  • Text – 텍스트를 입력할 때 사용합니다.Text – used when entering text.
  • Url – 파일 경로 및 웹 주소를 입력하는 데 사용합니다.Url – used for entering file paths & web addresses.

이렇게 하면 다음과 같이 XAML로 수행할 수 있습니다.This can be accomplished in XAML as follows:

<Entry Keyboard="Chat" />

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var entry = new Entry { Keyboard = Keyboard.Chat };

각 키보드의 예제는 조리법 리포지토리에서 찾을 수 있습니다.Examples of each keyboard can be found in our Recipes repository.

또한 Keyboard 클래스에는 대소문자, 맞춤법 검사 및 제안 동작을 지정하여 키보드를 사용자 지정하는 데 사용할 수 있는 Create 팩터리 메서드가 있습니다.The Keyboard class also has a Create factory method that can be used to customize a keyboard by specifying capitalization, spellcheck, and suggestion behavior. KeyboardFlags 열거형 값은 사용자 지정된 Keyboard가 반환되는 메서드에 대한 인수로 지정됩니다.KeyboardFlags enumeration values are specified as arguments to the method, with a customized Keyboard being returned. KeyboardFlags 열거는 다음 값을 포함합니다.The KeyboardFlags enumeration contains the following values:

  • None – 키보드에 추가되는 기능이 없습니다.None – no features are added to the keyboard.
  • CapitalizeSentence – 입력된 각 문장의 첫 번째 단어의 첫 문자가 자동으로 대문자로 시작함을 나타냅니다.CapitalizeSentence – indicates that the first letter of the first word of each entered sentence will be automatically capitalized.
  • Spellcheck - 입력한 텍스트에 대해 맞춤법 검사를 수행할지를 나타냅니다.Spellcheck – indicates that spellcheck will be performed on entered text.
  • Suggestions - 입력한 텍스트에 대해 완성된 단어를 제안할지를 나타냅니다.Suggestions – indicates that word completions will be offered on entered text.
  • CapitalizeWord – 각 단어의 첫 문자가 자동으로 대문자로 시작함을 나타냅니다.CapitalizeWord – indicates that the first letter of each word will be automatically capitalized.
  • CapitalizeCharacter – 모든 문자가 자동으로 대문자로 시작함을 나타냅니다.CapitalizeCharacter – indicates that every character will be automatically capitalized.
  • CapitalizeNone – 자동 대소문자 표시가 이루어지지 않음을 나타냅니다.CapitalizeNone – indicates that no automatic capitalization will occur.
  • All – 입력한 텍스트에 대해 맞춤법 검사, 단어 완성 및 문장 첫 글자 대문자 입력이 이루어질 것임을 나타냅니다.All – indicates that spellcheck, word completions, and sentence capitalization will occur on entered text.

다음 XAML 코드 예제에서는 완성 단어를 제안하고 입력한 모든 글자를 대문자로 시작하도록 기본 Keyboard를 사용자 지정하는 방법을 보여 줍니다.The following XAML code example shows how to customize the default Keyboard to offer word completions and capitalize every entered character:

<Entry Placeholder="Enter text here">
    <Entry.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Entry.Keyboard>
</Entry>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var entry = new Entry { Placeholder = "Enter text here" };
entry.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

반환 키 사용자 지정Customizing the Return Key

@No__t_1 포커스가 있을 때 표시 되는 소프트 키보드의 반환 키 모양은 ReturnType 속성을 ReturnType 열거형 값으로 설정 하 여 사용자 지정할 수 있습니다.The appearance of the return key on the soft keyboard, which is displayed when an Entry has focus, can be customized by setting the ReturnType property to a value of the ReturnType enumeration:

  • Default – 특정 반환 키가 필요 하지 않으며 플랫폼 기본값이 사용 됨을 나타냅니다.Default – indicates that no specific return key is required and that the platform default will be used.
  • Done – "Done" 반환 키를 나타냅니다.Done – indicates a "Done" return key.
  • Go – "Go" 반환 키를 나타냅니다.Go – indicates a "Go" return key.
  • Next – "Next" 반환 키를 나타냅니다.Next – indicates a "Next" return key.
  • Search – "검색" 반환 키를 나타냅니다.Search – indicates a "Search" return key.
  • Send – "송신" 반환 키를 나타냅니다.Send – indicates a "Send" return key.

다음 XAML 예제에서는 반환 키를 설정 하는 방법을 보여 줍니다.The following XAML example shows how to set the return key:

<Entry ReturnType="Send" />

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var entry = new Entry { ReturnType = ReturnType.Send };

참고

반환 키의 정확한 모양은 플랫폼에 따라 달라 집니다.The exact appearance of the return key is dependent upon the platform. IOS에서 반환 키는 텍스트 기반 단추입니다.On iOS, the return key is a text-based button. 그러나 Android 및 유니버설 Windows 플랫폼에서 반환 키는 아이콘 기반 단추입니다.However, on the Android and Universal Windows Platforms, the return key is a icon-based button.

반환 키를 누르면 Completed 이벤트가 발생 하 고 ReturnCommand 속성으로 지정 된 모든 ICommand 실행 됩니다.When the return key is pressed, the Completed event fires and any ICommand specified by the ReturnCommand property is executed. 또한 ReturnCommandParameter 속성으로 지정 된 모든 objectICommand 매개 변수로 전달 됩니다.In addition, any object specified by the ReturnCommandParameter property will be passed to the ICommand as a parameter. 명령에 대한 자세한 내용은 명령 인터페이스를 참조하세요.For more information about commands, see The Command Interface.

맞춤법 검사 사용 및 사용 안 함Enabling and Disabling Spell Checking

@No__t_1 속성은 맞춤법 검사 사용 여부를 제어 합니다.The IsSpellCheckEnabled property controls whether spell checking is enabled. 기본적으로 속성은 true로 설정 됩니다.By default, the property is set to true. 사용자가 텍스트를 입력 하면 맞춤법 오류가 표시 됩니다.As the user enters text, misspellings are indicated.

그러나 사용자 이름을 입력 하는 것과 같은 일부 텍스트 입력 시나리오의 경우 맞춤법 검사는 부정적인 환경을 제공 하며 IsSpellCheckEnabled 속성을 false로 설정 하 여 사용 하지 않도록 설정 해야 합니다.However, for some text entry scenarios, such as entering a username, spell checking provides a negative experience and should be disabled by setting the IsSpellCheckEnabled property to false:

<Entry ... IsSpellCheckEnabled="false" />
var entry = new Entry { ... IsSpellCheckEnabled = false };

참고

@No__t_1 속성이 false로 설정 되 고 사용자 지정 키보드를 사용 하지 않는 경우 네이티브 맞춤법 검사기가 비활성화 됩니다.When the IsSpellCheckEnabled property is set to false, and a custom keyboard isn't being used, the native spell checker will be disabled. 그러나 Keyboard.Chat와 같이 맞춤법 검사를 사용 하지 않도록 설정 하는 Keyboard 설정 된 경우에는 IsSpellCheckEnabled 속성이 무시 됩니다.However, if a Keyboard has been set that disables spell checking, such as Keyboard.Chat, the IsSpellCheckEnabled property is ignored. 따라서 속성을 사용 하 여 명시적으로 사용 하지 않도록 설정 하는 Keyboard에 대 한 맞춤법 검사를 사용 하도록 설정할 수 없습니다.Therefore, the property cannot be used to enable spell checking for a Keyboard that explicitly disables it.

텍스트 예측 사용 및 사용 안 함Enabling and Disabling Text Prediction

@No__t_1 속성은 텍스트 예측 및 자동 텍스트 수정을 사용 하도록 설정할지 여부를 제어 합니다.The IsTextPredictionEnabled property controls whether text prediction and automatic text correction is enabled. 기본적으로 속성은 true로 설정 됩니다.By default, the property is set to true. 사용자가 텍스트를 입력 하면 단어 예측이 표시 됩니다.As the user enters text, word predictions are presented.

그러나 사용자 이름을 입력 하는 경우와 같은 일부 텍스트 입력 시나리오에서는 텍스트 예측 및 자동 텍스트 수정이 부정적 환경을 제공 하므로 IsTextPredictionEnabled 속성을 false으로 설정 하 여 사용 하지 않도록 설정 해야 합니다.However, for some text entry scenarios, such as entering a username, text prediction and automatic text correction provides a negative experience and should be disabled by setting the IsTextPredictionEnabled property to false:

<Entry ... IsTextPredictionEnabled="false" />
var entry = new Entry { ... IsTextPredictionEnabled = false };

참고

@No__t_1 속성이 false로 설정 되어 있고 사용자 지정 키보드를 사용 하지 않는 경우 텍스트 예측 및 자동 텍스트 수정을 사용할 수 없습니다.When the IsTextPredictionEnabled property is set to false, and a custom keyboard isn't being used, text prediction and automatic text correction is disabled. 그러나 텍스트 예측을 사용 하지 않도록 설정 하는 Keyboard 설정 된 경우에는 IsTextPredictionEnabled 속성이 무시 됩니다.However, if a Keyboard has been set that disables text prediction, the IsTextPredictionEnabled property is ignored. 따라서 속성을 사용 하 여 명시적으로 사용 하지 않도록 설정 하는 Keyboard에 대해 텍스트 예측을 사용 하도록 설정할 수 없습니다.Therefore, the property cannot be used to enable text prediction for a Keyboard that explicitly disables it.

Colors

다음 바인딩 가능한 속성을 통해 사용자 지정 배경 및 텍스트 색을 사용 하도록 항목을 설정할 수 있습니다.Entry can be set to use a custom background and text colors via the following bindable properties:

  • Textcolor – 텍스트의 색을 설정 합니다.TextColor – sets the color of the text.
  • BackgroundColor – 텍스트 뒤에 표시 되는 색을 설정 합니다.BackgroundColor – sets the color shown behind the text.

각 플랫폼에서 색을 사용할 수 있도록 하려면 특별 한 주의가 필요 합니다.Special care is necessary to ensure that colors will be usable on each platform. 각 플랫폼에는 텍스트와 배경색에 대 한 기본값이 다르기 때문에 설정 하는 경우에는 둘 다 설정 해야 하는 경우가 많습니다.Because each platform has different defaults for text and background colors, you'll often need to set both if you set one.

항목의 텍스트 색을 설정 하려면 다음 코드를 사용 합니다.Use the following code to set the text color of an entry:

XAML에서:In XAML:

<Entry TextColor="Green" />

C#:In C#:

var entry = new Entry();
entry.TextColor = Color.Green;

항목 TextColor 예

자리 표시자는 지정 된 TextColor의 영향을 받지 않습니다.Note that the placeholder is not affected by the specified TextColor.

XAML에서 배경색을 설정 하려면 다음을 수행 합니다.To set the background color in XAML:

<Entry BackgroundColor="#2c3e50" />

C#:In C#:

var entry = new Entry();
entry.BackgroundColor = Color.FromHex("#2c3e50");

항목 BackgroundColor 예제

선택한 배경색과 텍스트 색은 각 플랫폼에서 사용할 수 있고 자리 표시자 텍스트는 모호 하지 않도록 주의 해야 합니다.Be careful to make sure that the background and text colors you choose are usable on each platform and don't obscure any placeholder text.

이벤트 및 대화형 작업Events and Interactivity

항목은 두 개의 이벤트를 노출 합니다.Entry exposes two events:

  • 항목의 텍스트가 변경 될 때 발생 하는 TextChanged –입니다.TextChanged – raised when the text changes in the entry. 변경 전후에 텍스트를 제공 합니다.Provides the text before and after the change.
  • 사용자가 키보드에서 return 키를 눌러 입력을 종료 하면 Completed – 발생 합니다.Completed – raised when the user has ended input by pressing the return key on the keyboard.

참고

@No__t_3 를 상속 하는 VisualElement 클래스에도 FocusedUnfocused 이벤트가 있습니다.The VisualElement class, from which Entry inherits, also has Focused and Unfocused events.

완료Completed

@No__t_0 이벤트는 항목과의 상호 작용이 완료 될 때 대응 하는 데 사용 됩니다.The Completed event is used to react to the completion of an interaction with an Entry. 사용자가 키보드에서 return 키를 누르거나 UWP에서 Tab 키를 눌러 필드에 입력을 끝내 면 Completed 발생 합니다.Completed is raised when the user ends input with a field by pressing the return key on the keyboard (or by pressing the Tab key on UWP). 이벤트에 대 한 처리기는 일반 이벤트 처리기로, 발신자 및 EventArgs을 수행 합니다.The handler for the event is a generic event handler, taking the sender and EventArgs:

void Entry_Completed (object sender, EventArgs e)
{
    var text = ((Entry)sender).Text; //cast sender to access the properties of the Entry
}

완료 된 이벤트를 XAML로 구독할 수 있습니다.The completed event can be subscribed to in XAML:

<Entry Completed="Entry_Completed" />

및 C#:and C#:

var entry = new Entry ();
entry.Completed += Entry_Completed;

@No__t_1 이벤트가 발생 한 후에는 ReturnCommand 속성으로 지정 된 모든 ICommand 실행 되며 ReturnCommandParameter 속성에 의해 지정 된 object ICommand으로 전달 됩니다.After the Completed event fires, any ICommand specified by the ReturnCommand property is executed, with the object specified by the ReturnCommandParameter property being passed to the ICommand.

TextChangedTextChanged

@No__t_0 이벤트는 필드 내용의 변경에 대응 하는 데 사용 됩니다.The TextChanged event is used to react to a change in the content of a field.

EntryText 변경 될 때마다 TextChanged 발생 합니다.TextChanged is raised whenever the Text of the Entry changes. 이벤트 처리기는 TextChangedEventArgs의 인스턴스를 사용 합니다.The handler for the event takes an instance of TextChangedEventArgs. TextChangedEventArgsOldTextValueNewTextValue 속성을 통해 Entry Text의 이전 값과 새 값에 대 한 액세스를 제공 합니다.TextChangedEventArgs provides access to the old and new values of the Entry Text via the OldTextValue and NewTextValue properties:

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

@No__t_0 이벤트를 XAML로 구독할 수 있습니다.The TextChanged event can be subscribed to in XAML:

<Entry TextChanged="Entry_TextChanged" />

및 C#:and C#:

var entry = new Entry ();
entry.TextChanged += Entry_TextChanged;