본 자료는
1. SmartKeyboard 활용
[TYPE-1] 한/영 표준 키보드(Normal Type)
[TYPE-2] 숫자 입력 표준 키보드(Numerical Type)
2. SmartKeyPad 활용
[TYPE-3] 한/영 사용자 정의 키보드(Code를 사용한 설정)
[TYPE-4] 숫자(16진수) 입력 사용자 정의 키보드(KeyItemInfos를 사용한 설정)
[TYPE-5] 영문자 전용 사용자 정의 키보드(공용 KeyImage 사용)
순서로 진행합니다.
Windows CE에서 기본적으로 제공되는 키보드는 크기가 작아 사용하는데에 불편함이 있습니다. 이러한 불편함을 개선하여 만들어진 SmartKeyboard와 SmartKeyPad는 디자인을 할 수 있기 때문에 Windows CE에서 기본적으로 제공하는 키보드보다 SmartKeyboard 혹은 SmartKeyPad를 사용하는 것을 권장하고 있습니다. 본 자료는 SmartKeyboard와 SmartKeyPad를 사용해 제작할 수 있는 키보드의 형태와 디자인을 제시하고 제작 방법을 설명합니다.
1. SmartKeyboard 활용 [TYPE-1] 한/영 표준 키보드(Normal Type)SmartKeyboard | |
---|---|
형태 | [CASE-1] 이미지 사용 |
[CASE-2] 이미지 미사용 | |
[테마 사용] [속성 변경] |
|
키 구성 | 한글, 영문(대/소문자), 숫자, 각종 기호 |
형태 / Layout | 배치 변경 불가 |
변경 가능 요소 | 키 이미지, 키보드 배경 이미지, 키보드 크기, 키 테두리 라운드 여부, 키 텍스트 색상 등 |
구현 케이스 | - [CASE-1] 이미지 사용 - [CASE-2] 이미지 미사용 1) 테마 사용 : SmartKeyboard에 기본적으로 제공되는 테마를 적용 (이미지를 사용한 테마와 속성을 변경하여 제작한 테마가 있음) 2) 속성 변경 : Keyboard의 키 색상, 키 텍스트 색상 등을 직접 변경 |
SmartKeyboard | |
---|---|
형태 | [CASE-1] 이미지 사용 |
[CASE-2] 이미지 미사용 | |
[테마 사용] [속성 변경] |
|
키 구성 | 한글, 영문(대/소문자), 숫자, 각종 기호 |
형태 / Layout |
배치 변경 불가 |
변경 가능 요소 | 키 이미지, 키보드 배경 이미지, 키보드 크기, 키 테두리 라운드 여부, 키 텍스트 색상 등 |
구현 케이스 | - [CASE-1] 이미지 사용 - [CASE-2] 이미지 미사용 1) 테마 사용 : SmartKeyboard에 기본적으로 제공되는 테마를 적용 (이미지를 사용한 테마와 속성을 변경하여 제작한 테마가 있음) 2) 속성 변경 : Keyboard의 키 색상, 키 텍스트 색상 등을 직접 변경 |
[CASE-1] 이미지를 사용하는 경우
STEP-1 | 필요한 이미지 요소 |
---|
키 상태 | UP | DOWN | ||||
---|---|---|---|---|---|---|
적용 이미지 |
||||||
속성 | KeyUp Image1 |
KeyUp Image2 |
KeyUp Image3 |
KeyPress Image1 |
KeyPress Image2 |
KeyPress Image3 |
적용 리소스명 |
Resource1. UpImage1 |
Resource1. UpImage2 |
Resource1. UpImage3 |
Resource1. DownImage1 |
Resource1. DownImage2 |
Resource1. DownImage3 |
필요 이미지 개수 |
총 6개 |
STEP-2 | ThemeStyle 속성값을 CUSTOMIZED_SKIN으로 설정 후 키보드 이미지 적용 및 디자인 |
---|
- KeyUpImage1/KeyPressImage1 : 1x1 사이즈의 일반 키
- KeyUpImage2/KeyPressImage2 : 2x1 사이즈의 Enter 키
- KeyUpImage3/KeyPressImage3 : 4x1 사이즈의 SpaceBar 키
각 속성에 맞는 이미지를 알맞게 적용 후 세부적인 디자인(Key Text 색상/크기, Top/Left Margin 등)을 적용합니다.
// 키보드 타입을 일반으로 설정
smartKeyboard1.KeyboardType = SmartX.SmartKeyboard.KEYBOARDTYPES.NORMAL;
// 키보드 크기 설정
smartKeyboard1.Size = new Size(623, 243);
// 키보드에 이미지를 적용하기 위해 Theme Style을 CUSTOMIZED_SKIN으로 설정
smartKeyboard1.ThemeStyle = SmartX.SmartKeyboard.KEYBOARDTHEMESTYLE.CUSTOMIZED_SKIN;
// Up 상태의 이미지 설정
smartKeyboard1.KeyUpImage1 = Resource1.UpImage1;
smartKeyboard1.KeyUpImage2 = Resource1.UpImage2;
smartKeyboard1.KeyUpImage3 = Resource1.UpImage3;
// Down 상태의 이미지 설정
smartKeyboard1.KeyPressImage1 = Resource1.DownImage1;
smartKeyboard1.KeyPressImage2 = Resource1. DownImage2;
smartKeyboard1.KeyPressImage3 = Resource1. DownImage3;
// Up 상태의 폰트 컬러
smartKeyboard1.KeyTextColor = Color.MidnightBlue;
// Down 상태의 폰트 컬러
smartKeyboard1.KeyPressTextColor = Color.White;
[적용 완료 모습]
[CASE-2] 이미지 미적용 1) 테마 사용
SmartKeyboard는 Keyboard의 스타일을 변경할 수 있는 18가지의 테마를 제공하고 있습니다. 테마에는 이미지를 사용한 테마와 사용하지 않은 테마로 나뉩니다. ThemeStyle 속성으로 적용할 테마를 설정하여 스타일을 간단하게 변경할 수 있습니다.
// 키보드 타입을 일반으로 설정
smartKeyboard2.KeyboardType = SmartX.SmartKeyboard.KEYBOARDTYPES.NORMAL;
// 키보드 크기 설정
smartKeyboard2.Size = new Size(623, 243);
// 키보드의 테마 설정
smartKeyboard2.ThemeStyle = SmartX.SmartKeyboard.KEYBOARDTHEMESTYLE.COOLBLUE_SKIN;
[적용 완료 모습]
2) 속성 변경
SmartKeyboard의 ThemeStyle 속성값을 CUSTOMIZED_LITE로 설정 후 속성창에서 원하는 키의 디자인을 디자인 관련 속성값 변경을 통해 적용합니다.
// 키보드 타입을 일반으로 설정
smartKeyboard3.KeyboardType = SmartX.SmartKeyboard.KEYBOARDTYPES.NORMAL;
// 키보드 크기 설정
smartKeyboard3.Size = new Size(623, 243);
// 키보드의 속성을 변경하여 디자인하기 위해 ThemeStyle을 CUSTOMIZED_LITE로 설정
smartKeyboard3.ThemeStyle = SmartX.SmartKeyboard.KEYBOARDTHEMESTYLE.CUSTOMIZED_LITE;
// 키보드의 외곽선 굵기
smartKeyboard3.KeyOutLineWidth = 2;
// Up 상태의 폰트 컬러
smartKeyboard3.KeyTextColor = Color.MidnightBlue;
// Up 상태의 키 배경 색
smartKeyboard3.KeyFillColor = Color.SkyBlue;
// Up 상태의 외곽선 색
smartKeyboard3.KeyOutLineColor = Color.DarkGray;
// Down 상태의 폰트 컬러
smartKeyboard3.KeyPressTextColor = Color.SkyBlue;
// Down 상태의 키 배경 색
smartKeyboard3.KeyPressFillColor = Color.MidnightBlue;
// Down 상태의 외곽선 색
smartKeyboard3.KeyPressOutLineColor = Color.DarkGray;
[적용 완료 모습]
[TYPE-2] 숫자 입력 표준 키보드(Numerical Type)
SmartKeyboard | |
---|---|
형태 | [CASE-1] 이미지 사용 |
[CASE-2] 이미지 미사용 | |
[테마 사용] [속성 변경] |
|
키 구성 | 숫자 키 |
형태 / Layout | 배치 변경 불가 |
변경 가능 요소 | 키 이미지, 키보드 배경 이미지, 키보드 크기, 키 텍스트 색상 |
구현 케이스 |
- [CASE-1] 이미지 사용 - [CASE-2] 이미지 미사용 1) 테마 사용 : 제공되는 Keyboard의 테마를 적용(이미지를 사용한 테마와 속성을 변경하여 제작한 테마가 있음) 2) 속성 변경 : Keyboard의 키 색상, 키 텍스트 색상 등을 직접 변경 |
SmartKeyboard | |
---|---|
형태 | [CASE-1] 이미지 사용 |
[CASE-2] 이미지 미사용 | |
[테마 사용] [속성 변경] |
|
키 구성 | 숫자 키 |
형태 / Layout |
배치 변경 불가 |
변경 가능 요소 | 키 이미지, 키보드 배경 이미지, 키보드 크기, 키 텍스트 색상 |
구현 케이스 |
- [CASE-1] 이미지 사용 - [CASE-2] 이미지 미사용 1) 테마 사용 : 제공되는 Keyboard의 테마를 적용(이미지를 사용한 테마와 속성을 변경하여 제작한 테마가 있음) 2) 속성 변경 : Keyboard의 키 색상, 키 텍스트 색상 등을 직접 변경 |
[CASE-1] 이미지를 사용하는 경우
STEP-1 | 필요한 이미지 요소 |
---|
키 상태 | UP | DOWN | ||||
---|---|---|---|---|---|---|
적용 이미지 |
||||||
속성 | KeyUpImage1 | KeyUpImage2 | KeyPressImage1 | KeyPressImage2 | ||
적용 리소스명 |
Resource1.UpImage1 | Resource1.UpImage2 | Resource1.DownImage1 | Resource1.DownImage2 | ||
필요 이미지 개수 |
총 4개 |
STEP-2 | SmartKeyboard의 ThemeStyle 속성값을 CUSTOMIZED_SKIN으로 설정 후 키보드 이미지 적용 |
---|
- KeyUpImage1/KeyPressImage1 : 1x1 사이즈의 일반 키
- KeyUpImage2/KeyPressImage2 : 2x1 사이즈의 Enter 키
각 속성에 맞는 이미지를 알맞게 적용 후 세부적인 디자인(Key Text 색상/크기, Top/Left Margin 등)을 적용합니다.
// 키보드 타입을 Numerical으로 설정
smartKeyboard1.KeyboardType = SmartX.SmartKeyboard.KEYBOARDTYPES.NUMERICAL;
// 키보드 크기 설정
smartKeyboard1.Size = new Size(249, 249);
// 키보드에 이미지를 적용하기 위해 Theme Style을 CUSTOMIZED_SKIN으로 설정
smartKeyboard1.ThemeStyle = SmartX.SmartKeyboard.KEYBOARDTHEMESTYLE.CUSTOMIZED_SKIN;
// Up 상태의 이미지 설정
smartKeyboard1.KeyUpImage1 = Resource1.UpImage1;
smartKeyboard1.KeyUpImage2 = Resource1.UpImage2;
// Down 상태의 이미지 설정
smartKeyboard1.KeyPressImage1 = Resource1.DownImage1;
smartKeyboard1.KeyPressImage2 = Resource1.DownImage2;
// 배경 이미지 설정
smartKeyboard1.KeyBoardBackImage = Resource1.BackImage;
// Up 상태의 폰트 컬러
smartKeyboard1.KeyTextColor = Color.White;
// Down 상태의 폰트 컬러
smartKeyboard1.KeyPressTextColor = Color.White;
[적용 완료 모습]
[CASE-2] 이미지 미적용 1) 테마 사용
SmartKeyboard는 Keyboard의 스타일을 변경할 수 있는 18가지의 테마를 제공하고 있습니다. ThemeStyle 속성으로 적용할 테마를 설정하여 스타일을 간단하게 변경할 수 있습니다.
// 키보드 타입을 Numerical으로 설정
smartKeyboard2.KeyboardType = SmartX.SmartKeyboard.KEYBOARDTYPES.NUMERICAL;
// 키보드 크기 설정
smartKeyboard2.Size = new Size(249, 249);
// 키보드의 테마 설정
smartKeyboard2.ThemeStyle = SmartX.SmartKeyboard.KEYBOARDTHEMESTYLE.COOLBLUE_SKIN;
[적용 완료 모습]
2) 속성 변경
SmartKeyboard의 속성창에서 원하는 키의 디자인을 디자인 관련 속성값 변경을 통해 적용합니다.
// 키보드 타입을 Numerical으로 설정
smartKeyboard3.KeyboardType = SmartX.SmartKeyboard.KEYBOARDTYPES.NUMERICAL;
// 키보드 크기 설정
smartKeyboard3.Size = new Size(245, 246);
// 키보드의 속성을 변경하여 디자인하기 위해 ThemeStyle을 CUSTOMIZED_LITE로 설정
smartKeyboard3.ThemeStyle = SmartX.SmartKeyboard.KEYBOARDTHEMESTYLE.CUSTOMIZED_LITE;
// 배경 이미지 설정
smartKeyboard1.KeyBoardBackImage = Resource1.BackImage;
// 키보드의 외곽선 굵기
smartKeyboard3.KeyOutLineWidth = 1;
// Up 상태의 폰트 컬러
smartKeyboard3.KeyTextColor = Color.White;
// Up 상태의 키 배경 색
smartKeyboard3.KeyFillColor = Color.DarkOrange;
// Up 상태의 외곽선 색
smartKeyboard3.KeyOutLineColor = Color.Black;
// Down 상태의 폰트 컬러
smartKeyboard3.KeyPressTextColor = Color.SaddleBrown;
// Down 상태의 키 배경 색
smartKeyboard3.KeyPressFillColor = Color.White;
// Down 상태의 외곽선 색
smartKeyboard3.KeyPressOutLineColor = Color.Black;
[적용 완료 모습]
2. SmartKeyPad 활용 [TYPE-3] 한/영 사용자 정의 키보드(Code를 사용한 설정)
SmartKeyPad | |
---|---|
형태 | |
|
|
키 구성 | 한글/영문/숫자/각종 기호 |
형태 / Layout | 키 구성 및 위치 변경 가능 |
변경 가능 요소 | 모두 가능 |
구현 케이스 |
모든 키의 이미지를 제작하여 SetKetInfoAdd 메서드를 사용하여 KeyItem을 추가합니다.
|
SmartKeyPad | |
---|---|
형태 | |
|
|
키 구성 | 한글/영문/숫자/각종 기호 |
형태 / Layout |
키 구성 및 위치 변경 가능 |
변경 가능 요소 | 모두 가능 |
구현 케이스 |
모든 키의 이미지를 제작하여 SetKetInfoAdd 메서드를 사용하여 KeyItem을 추가합니다.
|
모든 키의 이미지를 제작하여 Code를 사용해 설정
STEP-1 | 필요한 이미지 요소 |
---|
키 상태 | 필요 이미지 | 필요 이미지 개수 |
||||
---|---|---|---|---|---|---|
UP 상태 |
... | 246개 | ||||
적용 리소스명 |
Resource1. Upkey_ㄱ |
Resource1. Upkey_ㄴ |
Resource1. Upkey_ㄷ |
Resource1. Upkey_space |
||
Down 상태 |
... | |||||
적용 리소스명 |
Resource1. Downkey_ㄱ |
Resource1. Downkey_ㄴ |
Resource1. Downkey_ㄷ |
Resource1. Downkey_space |
STEP-2 | Key Text 출력 비활성화 |
---|
smartKeyPad1.KeyTextVisible = false;
STEP-3 | 레이어별 구성될 키 정보 추가 |
---|
{
smartForm1.MainForm = this;
// Key Text를 포함한 이미지 사용하므로 Key Text를 미출력
smartKeyPad1.KeyTextVisible = false;
// 타겟 Label 설정
smartKeyPad1.TargetInputObject = labTarget1;
// Layer 0 : 한글 기본
smartKeyPad1.SetKeyInfoAdd(0, 0, 0, Resource1.Upkey_ㅂ, Resource1.Downkey_ㅂ, SmartX.SmartKeyPad_KeyItemInfos.KeyCode.ㅂ);
smartKeyPad1.SetKeyInfoAdd(58, 0, Resource1.Upkey_ㅈ, Resource1.Downkey_ㅈ, SmartX.SmartKeyPad_KeyItemInfos.KeyCode.ㅈ);
// 중략
smartKeyPad1.SetKeyInfoAdd(174, 197, Resource1.Upkey_space, Resource1.Downkey_space, SmartX.SmartKeyPad_KeyItemInfos.KeyCode.SpaceBar);
smartKeyPad1.SetKeyInfoAdd(493, 197, Resource1.Upkey_enter, Resource1.Downkey_enter, SmartX.SmartKeyPad_KeyItemInfos.KeyCode.Enter);
smartKeyPad1.Visible = true;
private void smartKeyPad1_OnKeyButtonUp(string strKeyText, int iLayer, object sender)
{
{
{
else if (strKeyText == "한영")
{
else if (strKeyText == ";12")
{
// 중략
else if (iLayer == 4)
{
{
[적용 완료 모습]
[TYPE-4] 숫자(16진수) 입력 사용자 정의 키보드(KeyItemInfos를 사용한 설정)
SmartKeyPad | |
---|---|
형태 | |
키 구성 | 16진수 Key배열 / Backspace / 초기화 |
형태 / Layout | 키 구성 및 위치 변경 가능 |
변경 가능 요소 | 모두 가능 |
구현 케이스 |
모든 키의 이미지를 제작하여 폼디자이너 창에서 SmartKeyPad_KeyItemInfos에 KeyItem을 추가합니다.
(폼 디자이너창에서 추가된 KeyItem을 확인할 수 있습니다.) |
SmartKeyPad | |
---|---|
형태 | |
키 구성 | 16진수 Key배열 / Backspace / 초기화 |
형태 / Layout |
키 구성 및 위치 변경 가능 |
변경 가능 요소 | 모두 가능 |
구현 케이스 |
모든 키의 이미지를 제작하여 폼디자이너 창에서 SmartKeyPad_KeyItemInfos에 KeyItem을 추가합니다.
(폼 디자이너창에서 추가된 KeyItem을 확인할 수 있습니다.) |
모든 키의 이미지를 제작하여 KeyItemInfos에 설정
STEP-1 | 필요한 이미지 요소 |
---|
키 상태 | 필요 이미지 | 필요 이미지 개수 |
||||
---|---|---|---|---|---|---|
UP 상태 |
... | 36개 | ||||
적용 리소스명 |
Resource1. Upkey_A |
Resource1. Upkey_B |
Resource1. Upkey_C |
Resource1. Upkey_clear |
||
Down 상태 |
... | |||||
적용 리소스명 |
Resource1. Downkey_A |
Resource1. Downkey_B |
Resource1. Downkey_C |
Resource1. Downkey_clear |
STEP-2 | Key Text 출력 비활성화 |
---|
smartKeyPad1.KeyTextVisible = true;
STEP-3 | 레이어별 구성될 키 정보 추가 |
---|
(※ SmartKeyPad의 KeyItems 속성에 반드시 SmartKeyPad_KeyItemInfos를 설정하시기 바랍니다.)
[SmartKeyPad_KeyItemInfos에 추가된 키 정의]
{
smartForm1.MainForm = this;
// Key Text를 포함한 이미지를 사용하므로 Key Text를 미출력
smartKeyPad2.KeyTextVisible = false;
// 타겟 Label 설정
smartKeyPad2.TargetInputObject = labTarget1;
private void smartKeyPad2_OnKeyButtonUp(string strKeyText, int iLayer, object sender)
{
{
[적용 완료 모습]
[TYPE-5] 영문자 전용 사용자 정의 키보드(공용 KeyImage 사용)
SmartKeyPad | |
---|---|
형태 | [CASE-1] 모든 키의 이미지 제작(Key Text 포함) |
키 구성 | 영문 대문자, 숫자/기호 |
형태 / Layout | 키 구성 및 위치 변경 가능 |
변경 가능 요소 | 모두 가능 |
구현 케이스 |
공용 키의 이미지를 제작하여 폼디자이너 창에서 SmartKeyPad_KeyItemInfos에 KeyItem을 추가합니다.
(폼 디자이너창에서 추가된 KeyItem을 확인할 수 있습니다.) |
SmartKeyPad | |
---|---|
형태 | [CASE-1] 모든 키의 이미지 제작(Key Text 포함) |
키 구성 | 영문 대문자, 숫자/기호 |
형태 / Layout |
키 구성 및 위치 변경 가능 |
변경 가능 요소 | 모두 가능 |
구현 케이스 |
공용 키의 이미지를 제작하여 폼디자이너 창에서 SmartKeyPad_KeyItemInfos에 KeyItem을 추가합니다.
(폼 디자이너창에서 추가된 KeyItem을 확인할 수 있습니다.) |
공용 키 이미지를 제작하여 KeyItemInfos에 설정
STEP-1 | 필요한 이미지 요소 |
---|
키 상태 | 필요 이미지 | 필요 이미지 개수 |
|
---|---|---|---|
UP 상태 |
4개 | ||
적용 리소스명 |
Resource1. Upkey_normal1 |
Resource1. Upkey_normal2 |
|
Down 상태 |
|||
적용 리소스명 |
Resource1. Downkey_normal1 |
Resource1. Downkey_normal2 |
STEP-2 | Key Text 출력 활성화 |
---|
smartKeyPad1.KeyTextVisible = true;
STEP-3 | 레이어별 구성될 키 정보 추가 |
---|
(※ SmartKeyPad의 KeyItems 속성에 반드시 SmartKeyPad_KeyItemInfos를 설정하시기 바랍니다.)
{
smartForm1.MainForm = this;
// Key Text를 포함하지 않은 이미지를 사용하므로 Key Text를 출력
smartKeyPad2.KeyTextVisible = true;
// 타겟 Label 설정
smartKeyPad2.TargetInputObject = labTarget1;
// 공용 키 이미지를 설정 - 폼 디자이너의 설정창에서 설정하거나 아래와 같이 코드로 설정합니다.
smartKeyPad2.KeyDownImageCommon = Resource1.DownKey_normal1;
smartKeyPad2.KeyUpImageCommon = Resource1.UpKey_normal1;
// 키를 눌렀다가 떼었을 때 발생되는 이벤트 : ";12"키 혹은 "영어"키를 클릭 레이어 변경
private void smartKeyPad2_OnKeyButtonUp(string strKeyText, int iLayer, object sender)
{
{
{
else if (iLayer == 1)
{
{
[적용 완료 모습]