2008/06/04 02:02
[세티의 실버라이트] 7. 텍스트 Silverlight2008/06/04 02:02
원글출처: http://silverlight.net/quickstarts/silverlight10/text.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요~ 세티 입니다. 이번 시간에는 실버라이트에서 지원하는 TextBlock 엘리먼트의 특징에 대해 살펴보겠습니다. TextBlock 엘리먼트는 실버라이트에 텍스트를 추가하는데 사용되는 엘리먼트 입니다
머 맨날 말로만 하는 것보다는 역시나 직접 만들어 보는게 훨씬 낫겠죠?
먼저 <canvas>의 하위에 자식 엘리먼트로 <TextBlock> 태그를 넣습니다. 그리고 시작 블럭과 끝 블럭 사이에 적절한 문자열을 집어 넣습니다. 저는 "SETI's Silverlight" 라는 글자를 넣도록 하겠습니다.
멋지게 렌더링된 결과를 볼 수 있습니다. 추가적인 설명을 하자면 앞서 언급한 Clip과 Opacity, 그리고 이번에 언급중인TextBlock 엘리먼트와 같은 UIElement 들은 속성값 설정을 통해 그 결과를 렌더링 하게 됩니다.
TextBlock 엘리먼트는 다음의 속성들을 포함합니다.
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
텍스트
(TEXT)
(TEXT)
안녕하세요~ 세티 입니다. 이번 시간에는 실버라이트에서 지원하는 TextBlock 엘리먼트의 특징에 대해 살펴보겠습니다. TextBlock 엘리먼트는 실버라이트에 텍스트를 추가하는데 사용되는 엘리먼트 입니다
머 맨날 말로만 하는 것보다는 역시나 직접 만들어 보는게 훨씬 낫겠죠?
먼저 <canvas>의 하위에 자식 엘리먼트로 <TextBlock> 태그를 넣습니다. 그리고 시작 블럭과 끝 블럭 사이에 적절한 문자열을 집어 넣습니다. 저는 "SETI's Silverlight" 라는 글자를 넣도록 하겠습니다.
멋지게 렌더링된 결과를 볼 수 있습니다. 추가적인 설명을 하자면 앞서 언급한 Clip과 Opacity, 그리고 이번에 언급중인TextBlock 엘리먼트와 같은 UIElement 들은 속성값 설정을 통해 그 결과를 렌더링 하게 됩니다.
TextBlock 엘리먼트는 다음의 속성들을 포함합니다.
- FontSize - 픽셀 단위
- FontStyle - 이탤릭이나 노멀을 선택
- FontStretch - UltraCondensed,
ExtraCondensed,Condensed,SemiCondensed,Normal,Medium,SemiExpanded,Expanded,ExtraExpanded, 또는UltraExpanded를 선택 - FontWeight - Extralight, Thin, light, normal, medium, senibold, bold, extrabold, black, extrablack을 선택
- FontFamily
- Foreground
이 속성을 TextBlock 엘리먼트에 사용하고, 그것을 렌더링 했을 때의 결과는 아래와 같습니다.
TextBox 엘리먼트에 Run 엘리먼트를 추가 사용함으로써 TextBlock에 다른 폰트 속성을 적용할 수 있습니다.
FontFamily는 첫번째에 설정된 폰트를 이용하지 못할 때 그 다음 폰트를 이용하고자 할 때 사용되며, "Portable User Interface" 라는 속성값은 디바이스의 특성과 관계없이 모든 기계에서 항상 이용이 가능합니다. 아래는 FontFamily에 대한 코드와 렌더링 결과 입니다.
이상으로 TextBlock과 그 속성들에 대해 살펴 보았습니다. 다음 시간에는 실버라이트를 이용한 Media 엘리먼트에 대해 살펴보도록 하겠습니다.
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 9. 애니메이션(animations) (0) | 2008/06/11 |
|---|---|
| [세티의 실버라이트] 8. 미디어 (2) | 2008/06/09 |
| [세티의 실버라이트] 7. 텍스트 (0) | 2008/06/04 |
| [세티의 실버라이트] 6. Images (2) | 2008/06/01 |
| [세티의 실버라이트] 5. 공통 그래픽 속성 (0) | 2008/06/01 |
| [세티의 실버라이트] 4. 그림 그리기와 색칠하기 (0) | 2008/06/01 |
