Windows Phone 7 SDK - Text 와 Button

밤새 건조한 방에서 잤더니 코가 건조해서 쌍 코피가 날 기세로 잠을 설쳤더니

오늘은 좀 피곤하네요. 그래서 간략하게 두 지만 해볼까 합니다.

- Text 관련 컨트롤

- Button 컨트롤

두 가지를 컨트롤을 한번에 해보도록 하죠.

 

백문이 불여일코딩 (百闻 不如一Coding) ! 따라쟁이가 되어봅시다.

 

Windows Phone Application 템플릿으로 이런 프로젝트를 만들겠습니다.

 

그럼 이런 페이지가 열리게 되죠

그럼 좌측 상단 Toolbox에서 다음 컨트롤을 드래그하여 디자이너로 옮겨봅시다.

Toolbox를 고정으로 제어하는건 스스로 하세요(핀셋 아이콘 낄낄)

 

총 세가지 컨트롤을 드래그하여 옮겼습니다.

첫 번째는 TextBlock, 두 번째는 TextBox, 세 번째는 Button 컨트롤입니다.

 

간략한 사용 예를 보기 위하여 우리는

TextBox 에 입력한 값을 Button을 누르면 TextBlock에 적용되도록 하는 프로그램을 만들어 봅시다.

 

[기본상식]

우리가 디자이너에 올린 Button은 디자이너모드 Propertie를 보면 button1이라는 이름이 붙어있습니다.

 

Properties 뷰를 통하여 우리는 해당 컨트롤(객체)에 사용되는 속성들(바인딩 데이터, 스타일 등)을 조절하게 되며

Properties 와 따라다니는 Events 탭을 통하여 이벤트 핸들러에서 사용할 메서드를 정의 할 수 있습니다.

 

TextBox, TextBlock도 Properties가 있으니 한번 훑어 보세요.

 

 

 

디자이너에서 Button 컨트롤 객체를 더블클릭 합니다.

그럼 .NET 개발하시던 분들은 낯익은 그 모습,

네 맞습니다 비하인드 코드로의 C#파일 내부가 보이게 됩니다.(그냥 F7을 누르면 보이기도 합니다)

 

다음과 같은 모습이지요.

저 아래 음영처리 된 부분이 button 컨트롤의 클릭 이벤트 시 동작하는 메서드가 되겠습니다.

 

다음과 같이 메서드를 수정합니다.

 

[시술 전]

private void button1_Click(object sender, RoutedEventArgs e) {                     }

[시술 후]

private void button1_Click(object sender, RoutedEventArgs e) {     this.textBlock1.Text = this.textBox1.Text; }

단 한 줄 추가 되었습니다.

C# 문법을 아시거나 대충 객체를 정의 하여 사용하는 언어를 사용해 보신 분들은 알만한 쉬운 문법이죠.

 

this.textBlock1.Text = this.textBox1.Text;

현재 객체 속의 textBlock1 객체의 Text 라는 속성(Propertie)에

현재 객체 속의 textBox1 객체의 Text 라는 속성을 할당하라.

 

여담이지만 TextBox 와 TextBlock 의 Text라는 속성의 자료 형은 string으로 동일합니다.

따라서 화면의 버튼을 누르게 되면 Textbox에 입력한(디버깅을 하셔서 TextBox 텍스트를 지우고 새 값을 입력하신 후)

값이 TextBlock으로 써지는 것을 확인 하실 수 있을 겁니다.

 

또는 F5를 눌러 디버깅화면으로 넘어 가 봅시다.

 

 


위의 순서로(중간에 페이지 하나 더 있는데 너무 빨리 지나가 캡쳐가 안되네요) 프로그램을 확인할 수 있고

프로그램 테스트를 해 봅시다.

 

 

자 우리가 원했던 대로 프로그램이 동작하네요.

어때요 참 쉽죠?



ps. toolbox에 있는 여러가지 컨트롤들로 연습해 보시길 바랍니다.
다음 포스트 에서는 WebBrowser 컨트롤 하나 하고 컨트롤은 그냥 넘기고 싶네요.