TextBlock

 TextBlock

http://cafe.naver.com/uxbakery.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=65 (UXBAKERY로 오세요~~그림은 다시 올리기 귀찮아서..;)

 

글꼴을 만들어 봅시다.

 

최종 소스는 아래와 같습니다.

 

<Grid x:Name="LayoutRoot">  <StackPanel>   <TextBlock Text="TextBlock Test" TextWrapping="Wrap" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>   <TextBlock  Text="TextBlock Test" TextWrapping="Wrap" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Baseline"/>   <TextBlock  Text="TextBlock Test" TextWrapping="Wrap" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Strikethrough"/>   <TextBlock  Text="TextBlock Test" TextWrapping="Wrap" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Overline"/>   <TextBlock  Text="TextBlock Test" TextWrapping="Wrap" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Baseline,Underline,Strikethrough,Overline"/>   </StackPanel>  </Grid>

 

 

1. 블랜드를 열어봅니다. 스택패널을 만듭니다.

 

2. <TextBlock>을 가져다 놓습니다.

 

3. 속성 탭을 열어봅니다.

4. 브러쉬탭의 Foregroud를 지정합니다. 색을 지정해서 색깔을 바꾸고

 

 

5. 레이아웃에서 width와 height를 지정할 수 있는데 이것은 텍스트블록의 크기입니다.

6. 공용속성 탭의 Text를 TextBlock Test로 바꿉니다. 글자가 바뀌고요.

 

7. 텍스트 탭의 글꼴을 지정합니다. FontFamily로 지정이 됩니다. 여기에서는 Arial Unicode MS 로 지정 하였습니다.

 

8. 폰트 사이즈는 적당히 줍니다. Xaml에 가서 px로 줘도 크기 변화가 없습니다. 기본이 픽셀이라는 의미 입니다. cm으로 바꾸면 상당히 커집니다. in으로 인치, pt등의 단위를 사용합니다.

<TextBlock Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px"/>

 

 

 

9. FontWeight를 지정합니다. 두께가 볼드나 아니냐 에따라서 Bold/Nomal로 바뀝니다.

위의 그림에서는 B 라고 된 버튼을 누르면 됩니다.

 

 

 

10. i 를 누르면 FontStyle을 지정할수 있습니다. 이텔릭이나, 노멀이냐입니다.

<TextBlock Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Italic" />

 

 

 

12. 텍스트 블록을 똑같은 것을 복사해서 놓습니다.

 

<TextBlock Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Italic" />

<TextBlock Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Italic" />

 

 

13. Oblique를 씁니다. 이텔릭과의 차이점은 이텔릭은 글자자체가 이텔릭은 별도의 글꼴로서 전혀다른 형태를 가진 문자 인데 반해, 오브리퀴는 글자자체를 찌그러트려 글자의 품질을 떨어 트릴 수 있다는 것입니다.

 

<TextBlock Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Italic" />

<TextBlock Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" />

 

 

 

11. 그리고 텍스트블럭을 3개 더 만듦니다. 총 5개 입니다.  TextDecoration이 언더라인의 줍니다.

그리고 Baseline 이나 Strikethrough, Overline등을 사용할 수 있지요

 

<TextBlock Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Italic" TextDecorations="Underline"/>	그냥 밑줄 입니다.
<TextBlock  Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Baseline"/>	빈칸에도 밑줄이 생깁니다.
<TextBlock  Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Strikethrough"/>	중앙을 통과하는 줄 입니다.
<TextBlock  Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Overline"/>	아래쪽으로 조금 떨어진 상태로 밑줄이 생깁니다.

 

 

12. 조합도 가능합니다.

 <TextBlock  Text="TextBlock Test" FontFamily="Arial Unicode MS" FontSize="20px" FontWeight="Bold" FontStyle="Oblique" TextDecorations="Baseline,Underline,Strikethrough,Overline"/>

 

 

이렇게 만들어 집니다 텍스트블록 끄읕~