윈폰 매뉴얼

4-1-3.텍스트 박스

텍스트 박스는 사용자로부터 문자열을 입력받는 컨트롤이다. 단순 문자열이어서 서식은 적용할 수 없지만 여러 줄 입력은 가능하다. 폰트와 관련된 속성들은 Control로부터 상속받으며 다음 속성을 추가로 더 가진다.

속성	설명
AcceptsReturn	강제 개행을 허용할 것인가를 지정한다.
TextWrapping	자동 개행을 할 것인가를 지정한다.
IsReadOnly	읽기 전용 여부이다. 디폴트는 False이다.
MaxLength	입력받을 최대 문자 수를 지정한다. 디폴트는 0이며 제한이 없다.
CaretBrush	캐럿을 그릴 브러시이다.
LineHeight	줄간을 지정한다.
SelectedText	선택한 문자열이다.
SelectionStart	선택 문자열의 시작 오프셋
SelectionLength	선택 문자열의 길이
SelectionForeground	선택 문자열의 색상
SelectionBackground	선택 문자열의 배경색
HorizontalScrollBarVisibility	수평 스크롤 바를 보일 것인지를 지정한다.
VerticalScrollBarVisibility	수직 스크롤 바를 보일 것인지를 지정한다.

텍스트 블록에 비해 사용자가 직접 편집할 수 있으므로 이를 금지하기 위한 읽기 전용 속성이 있으며 입력 문자수를 제한하는 속성이 제공된다. 이 속성들을 사용하면 필요할 때만 입력을 허용하거나 정해진 길이 이상은 입력하지 못하도록 금지할 수 있다. 클립보드 동작이 가능하므로 선택 블록을 조사하거나 변경하는 속성들도 제공된다.

모바일 장비는 긴 문장보다는 이름이나 검색식 등 한 줄짜리 정보를 입력받는 경우가 많다. 그래서 디폴트 속성으로 생성시 딱 한 줄만 입력받으며 자동 개행도 하지 않고 강제 개행도 허용하지 않는다. 물론 원한다면 관련 속성을 조정하여 여러 줄을 입력받을 수도 있고 엔터키로 강제 개행할 수도 있다. 다음 예제로 텍스트 박스의 속성을 테스트해 보자.

TextBoxTest

<TextBox Height="200" TextWrapping="Wrap" AcceptsReturn="True"

Background="Yellow" BorderBrush="Red" BorderThickness="5"/>

</StackPanel>

</Grid>

첫 번째 텍스트 박스는 아무런 속성도 주지 않았다. 문자열이 오른쪽 끝에 닿으면 자동으로 스크롤되며 원하는만큼 길게 입력할 수 있지만 개행은 할 수 없다. 입력한 문자열은 코드에서 Text 속성을 읽음으로써 구할 수 있으며 코드에서 Text 속성을 변경하는 것도 물론 가능하다. IsReadOnly 속성을 지정하면 Text 속성으로 지정한 문자열을 읽을 수만 있으며 사용자가 값을 편집할 수는 없다. 물론 코드에서 Text 속성을 변경하여 문자열을 바꿀 수 있고 IsReadOnly 속성을 풀 수도 있다.

MaxLength 속성은 최대 입력 문자 수를 제한한다. 8자로 제한해 두었고 이미 5개의 문자가 입력되어 있으므로 추가로 3개의 문자만 더 입력할 수 있으며 그 이상의 문자 입력은 거부된다. MaxLength 속성은 사용자가 직접 입력할 수 있는 문자의 개수를 제한할 뿐이며 코드로는 더 많은 문자를 입력할 수 있다. 이 경우 사용자는 미리 입력된 문자를 지울 수는 있지만 더 추가하지는 못하며 MaxLength 이하로 삭제했을 경우는 제한 범위내에서 문자를 더 입력할 수 있다.

마지막 텍스트 박스는 옵션의 효과를 살펴보기 위해 가급적 많은 속성을 설정했다. 자동 개행을 허용하고 엔터키로 강제 개행도 지원하므로 여러 줄을 입력할 수 있다. 텍스트 박스의 하단에 닿으면 스크롤이 발생하며 아래쪽으로 얼마든지 긴 문장을 입력할 수 있다. 배경색은 노란색으로 하고 경계선은 빨간색 5픽셀 두께로 지정했다.

실행 직후에는 텍스트 박스만 보이지만 텍스트 박스를 탭하면 포커스를 주고 아래쪽에 화면 키보드가 열린다. 화면 키보드의 문자들을 클릭하여 입력하며 다른 곳을 탭하거나 Back 키를 누르면 키보드는 닫힌다. 에뮬레이터에서 Pause 키를 누르면 하드웨어 키보드가 활성화되므로 호스트 PC의 키보드로도 문자열을 입력할 수 있다. 하드웨어 키보드가 활성화되면 화면 키보드는 나타나지 않는다.

입력중에 임의 위치로 캐럿을 이동하거나 블록을 선택하여 클립보드 동작을 할 수도 있다. 아래쪽 텍스트 박스에 긴 문자열을 입력해 보자. 화면을 오래 누르고 있으면(Long Press) 위쪽에 빨간색의 캐럿이 나타나는데 이 캐럿을 드래그하여 원하는 곳으로 옮긴다. 캐럿은 누른 위치보다 더 위쪽에 나타나는데 이는 드래그중에 손가락이 문자열을 가리지 않도록 하기 위해서이다.

클립보드로 복사할 때는 복사할 영역을 먼저 선택한다. 단어를 탭하면 단어 전체가 선택되며 이 상태에서 아래쪽의 삼각형 마커를 드래그하여 선택 영역을 확장한다. 블록이 선택된 상태에서 BS키를 누르면 블록 전체가 삭제되며 다른 문자를 입력하면 대체된다. 블록 위쪽에 나타나는 복사 버튼을 누르면 선택 영역이 클립보드로 복사된다. 잘라내기 기능은 별도로 없으므로 복사 후 삭제해야 한다.

클립보드에 문자열을 복사하면 키보드 위쪽에 붙여넣기 버튼이 나타난다. 붙여 넣을 자리로 이동한 후 이 버튼을 누르면 클립보드의 문자열이 현재 캐럿 위치에 붙여진다. 붙여넣기 버튼은 계속 열린 채로 유지되므로 여러 번 붙여 넣을 수 있다. 클립보드는 시스템 전역적인 저장소이므로 다른 텍스트 박스는 물론이고 앱끼리도 문자열을 교환할 수 있다.

스마트폰의 문자 입력 장치는 무척 불편하고 비효율적이어서 데스크탑 키보드에 비할 바가 못된다. 게다가 사용자들은 무척 바쁜 사람들이고 책상에 편하게 앉아 입력하는 것도 아니다. 지하철에서 서서 입력할 수도 있고 한 손밖에 못쓰는 상황도 흔하다. 그래서 앱이 최대한 정확하고 빠르게 입력할 수 있도록 도와 주어야 하는데 가장 기본적인 방법은 입력할 가능성이 높은 문자들만 표시하는 것이다.

InputScope 속성은 텍스트 박스로 무엇을 입력받을 것인가를 지정한다. 입력받을 정보의 종류를 미리 예측하여 꼭 필요한 문자키만 화면 키보드에 보여줌으로써 사용자가 입력할 범위를 제한한다. 예를 들어 수치값을 입력받는다면 알파벳 키는 보여주지 않는 식이다. 가능한 값의 종류는 다음과 같다. 자세한 설명을 달지 않더라도 이름으로부터 어떤 문자를 입력받을지 대충 짐작할 수 있을 것이다.

Default

RegularExpression

FileName, FullFilePath

EmailUserName, EmailSmtpAddress, Url, LogOnName

PersonalFullName, PersonalMiddleName, PersonalNameSuffix

PostalAddress, AddressStreet, AddressCity, AddressCountryName

CurrencyAmount

Date, Time

Password

TelephoneNumber

Text, Chat

다음 예제로 InputScope 속성에 따라 화면 키보드가 어떻게 달라지는지 확인해 보자. 스택 패널에 여섯개의 텍스트 박스를 배치하고 각각 InputScore 속성을 다르게 주었다.

InputScopeTest

</StackPanel>

</Grid>

InputScore 속성에 따라 아래쪽에 열리는 화면 키보드의 모양과 동작이 달라진다. 위에서부터 순서대로 텍스트 박스를 탭하여 어떤 키보드가 열리는지 보자. 별다른 지정이 없으면 기본 키보드가 열린다.

기본 키보드에는 알파벳과 공백, 쉼표, 마침표 등 일반적인 문자열 입력에 주로 사용되는 문자들이 배치되어 있다. 왼쪽 아래의 &123 키를 누르면 숫자와 기호들을 입력할 수 있는 키보드로 바뀌며 모드 변환 버튼 위의 좌우 화살표(← →)버튼을 눌러 기호의 페이지를 변환한다. abcd 키를 누르면 다시 영문 모드로 돌아온다.

설정에서 언어를 한국어로 바꾸면 공백옆에 언어 변환키가 추가로 배치되어 한글도 입력 가능하다. 키의 개수가 많지 않으므로 알파벳, 숫자, 기호, 한글 등 여러 가지 모드를 스위칭해가며 문자를 입력하는 방식이다. 마침표를 길게 누르면 자주 사용하는 구두점 몇 개가 팝업으로 열려 모드를 바꾸지 않고도 입력할 수 있다.

기본 키보드는 거의 대부분의 문자를 입력할 수 있으므로 사실 제일 무난하다. 그러나 한글, 영문, 기호, 숫자를 골고루 입력하려면 모드 전환을 자주 해야 하므로 불편하다. 그래서 좀 더 전문적인 문자만 보여주는 옵션들이 있다. 다음은 Text 옵션을 선택한 키보드이다.

Text 옵션은 기본 키보드와 유사하되 자동 완성 기능을 제공한다는 점이 독특하다. kor 까지만 입력하면 이 문자들로 시작되는 단어 후보를 키보드 위쪽에 보여주며 후보를 클릭하면 단어가 완성된다. Congratulations 같은 긴 단어도 철자를 전부 타이핑할 필요없이 몇 번의 클릭만으로 쉽게 입력할 수 있다. 아쉽게도 한글에 대해서는 후보 단어 기능이 아직 제공되지 않는다.

공백 옆의 이모티콘 키를 누르면 이모티콘들이 키보드에 나타나 ^.^이나 ^_~ 같은 여러 문자를 한 번에 쉽게 입력할 수 있다. 기본 키보드로 이 문자열을 입력하려면 모드를 바꿔가며 여러 개의 키를 눌러야 하나 이모티콘 키는 훨씬 더 쉽다. 채팅이나 게시판에 글을 올릴 때 아주 유용한 기능이다. 다음은 주로 숫자를 입력하는 옵션이다.

Number 모드는 숫자키만 표시되어 오로지 숫자만 입력할 수 있다. 숫자 외에는 실수 입력을 위한 마침표와 수정을 위한 BS 키 정도만 있으며 마침표를 길게 누르면 음수나 쉼표가 팝업으로 열린다. 키 개수가 적은만큼 키가 큼직해서 누르기 편하며 오타가 발생할 가능성이 획기적으로 줄어든다. 가격이나 무게 등의 수치값을 입력할 때는 이 옵션이 가장 편리하다.

TelephoneNumber 옵션은 숫자 외에도 전화 번호를 구성하는 -라든가 *, # 같은 키가 추가로 나타난다. 마침표를 길게 누르면 괄호나 쉼표가 팝업으로 열리며 0을 길게 누르면 + 기호를 입력할 수 있다. 이 두 옵션은 다른 입력 모드로 바꾸는 키가 없어 제한된 문자만 입력 가능하며 따라서 엉뚱한 문자를 입력할 위험이 없다. 다음은 email과 인터넷 주소 입력 모드이다.

email 주소 입력의 편의를 위해 @ 문자키가 따로 배치되어 있어 기호 페이지로 이동하지 않아도 된다. 인터넷 주소 입력에 사용되는 Url 입력 모드는 @이 없는 대신 입력한 주소로 이동하는 → 버튼이 오른쪽 아래에 배치된다. 주소의 끝에 주로 추가되는 .com을 길게 누르면 .net이나 .org 같은 문자열이 팝업으로 열려 빠른 주소 입력을 도와준다. 한국어 키보드인 경우는 .co.kr과 .kr도 추가된다.

이 외에도 많은 입력모드들이 존재하며 모드마다 키의 구성이 약간씩 다르다. 모든 입력 모드의 공통점은 가급적이면 꼭 필요한 키만 표시함으로써 사용자의 입력 편의성과 시간을 절약해주는 것이다. 각 모드마다 어떤 키가 나타나는지는 직접 적용해서 살펴보기 바란다. 이름이 달라도 키보드 구성은 동일한 모드도 있고 윈도우폰이 아직 지원하지 않는 모드도 있다.

InputScope 속성으로 사용자의 입력 시간을 상당히 절약할 수 있지만 그럼에도 불구하고 모바일 폰에서 키 입력은 귀찮고 시간이 오래 걸리므로 좀 더 편리한 방법을 제공하는 것이 좋다. 가능하다면 키보드 입력을 최소화해야 한다. 예를 들어 테란, 저그, 프로토스 같이 셋 중 하나를 선택해야 한다면 문자열로 입력받는 것보다는 라디오 박스가 더 편리하고 1~10 사이의 값 중 하나를 입력받는다면 슬라이더를 사용하여 드래그하는 것이 더 빠르다.

텍스트 박스에서 가장 자주 발생하는 이벤트는 문자열이 편집될 때 발생하는 TextChanged 이벤트이다. 문자열이 변경될 때마다 특정한 작업을 수행해야 한다면 이 이벤트를 처리한다. 디폴트 이벤트이므로 디자인 뷰에서 텍스트 박스를 더블클릭하면 이 이벤트의 핸들러를 작성할 수 있다. 다음 예제는 입력된 글자가 3자 이상일 때만 OK 버튼을 활성화한다.

TextChanged

</StackPanel>

</Grid>

================================== CS =======================================

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)

{

btnOK.IsEnabled = (sender as TextBox).Text.Length >= 3;

}

사람 이름은 최소 3자 정도는 되어야 한다. 이름이 외자인 사람도 있어 이 예는 사실 좀 억지스럽지만 상품 코드나 학번처럼 길이가 고정된 경우는 반드시 형식에 맞추어야 한다. 문자열이 편집되는 TextChanged 이벤트를 처리하면 매 입력시마다 형식에 맞는지 점검하여 조치를 취할 수 있다.

버튼의 IsEnabled 속성이 False로 지정되어 있어 최초 실행하면 OK 버튼은 사용 금지 상태이다. 텍스트 박스에 글자를 3자 이상 입력하면 OK 버튼이 활성화되며 글자를 지우면 다시 금지된다. 매 입력시마다 이벤트를 받아 점검하므로 잘못된 정보를 입력할 위험이 없다.