[C#, XAML] WPF 도구 상자 textblock과 textbox 차이 - 비교와 사용 예제

안녕하세요~~

블로그 주인 양햄찌입니다. 오늘도 WPF에 관련된 포스팅으로 찾아왔어요.

 

[WPF] TEXTBLOCK vs TEXTBOX

이 둘, 문자열에 관련된거인건 알겠는데 이름부터가 비슷해서 뭔 차이가 있는지 헷갈리죠~

 

공통으로 들어가는 단어는 text니까 글을 다루는 것을 알 수 있어요. 둘다 문자열을 출력해줍니다. 

하지만 하나는 Block으로 끝나고 하나는 Box로 끝나네요?!

block은 블록 즉 여러 블록이 합쳐져서 하나를 나타내는 듯한 덩어리 같은 늬앙스를 풍기고 박스는 하나의 큰 상자의 느낌입니다. 

 

여기서 봤을 때 유추할 수 있는 것은 block은 각각의 블록단위, 즉 개별(블록별)커스터마이징을 할 수 있고

box는 하나의 상자로 인식해 무언가를 담듯이 하나의 속성이 적용되는 어감을 인식할 수 있어요.

 

실제로 그런 차이가 있답니다 그럼 각각 살펴볼게요!

 

TEXTBLOCK 특징

TextBlock은 좀 더 미적으로 이쁘게 글을 표시하는거?에 좀 더 맞춰져있다고 하네요.

즉 block별, 텍스트별로 각기 다른 색깔을 적용할 수도 있고 폰트나 글자크기 줄간격 등 원하는대로 설정이 가능합니다.

 

   <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" 
               Margin="211,101,0,0" Height="169" Width="388" Background="Pink" FontSize="15">
            This is <Bold>Pink</Bold> TextBox
            <LineBreak/>
            마치 html처럼 중간중간 속성을 줄 수 있어
            <LineBreak/>
            <Run Background="Red">이 문장은 빨간 바탕으로!</Run>
  </TextBlock>

 

Grid 태그 사이에 요렇게 코드를 넣어줬어요.

오 TextBlock 태그 사이에 Run 태그도 있고 Bold 태그도 있고, 그 내부에서도 태그를 써서 내가 원하는 블럭에 스타일을 각기 적용시킬 수 있습니다. 

 

핑크상자가 TextBlock인데, 안에 빨간배경이 들어가기도 하고 진하게 Bold처리를 중간에 할 수도 있네요!

그런데 텍스트블럭은 보여주는 기능만 있어서 클릭해도 별다른 반응을 보이지 않습니다. 

 

- 문자열을 보여주는데 사용한다.

- 텍스트마다 다른 폰트색깔이나 배경색깔, 크기 등 다양한 속성을 각기 적용할 수 있다. 

- 각 라인별로 라인높이또한 다르게 지정할 수 있다. 

- 보여주기만 가능하고 선택될 수 없다. 편집도 불가능하다.

- 보여주기만 하기 때문에 TextBox보다 가볍다. 

 

TextBox 특징

 

TextBox는 하나의 박스이기 때문에 생각했던 느낌대로 하나의 색깔, 사이즈, 폰트만 적용될 수 있어요.

그리고 줄간격 또한 통일입니다. 

<TextBox x:Name="textBox" Height="162" Width="382" 
         HorizontalAlignment="Left" VerticalAlignment="top" 
         TextWrapping="Wrap" Background="Yellow" Margin="155,58,0,0">
              이 노란색 박스는 텍스트 박스야. 
              그런데 안에 bold태그도 안먹고 엔터역할을 하는 linebreak도 안먹어..[여기까지가 출력]
</TextBox>

 

이번엔 TextBox 특징을 체크해주기 위해 Grid사이에 위 코드를 넣어줍시다.

 

 

엔터가 없으니 답답하네요.

위 텍스트블럭처럼 안에 엔터역할을 하는 <LineBreak/>를 넣어줘볼까요?

에러 밑줄이 뜨는 것을 확인할 수 있어요.

참고로 textbox는 소스코드처럼 xml상에서 줄바꿈이 먹지 않아요. 그래서 줄바꿈을 하고 싶으면 UI xml단 말고 백단에서 다뤄줘야 합니다. 

 

암튼 위처럼 텍스트 박스 내부에는 다른 태그를 넣는 것은 허용되지 않습니다.

 

그런데 TextBlock이 없는 장점을 가지고 있으니! 그것은 바로 보여주는 기능과 편집 기능을 같이 가지고 있다는 겁니다.

노란색 박스 안을 클릭해보면 커서가 깜박거리면서 문자열을 쓸 수 있는 것을 확인할 수 있어요.

 

- 문자열을 보여주는데 사용한다.

- 텍스트 전체에 스타일별 한 특징만 적용할 수 있다. 한가지 글자색, 한가지 글자크기, 한가지 글자타입 등..

- 고정된 라인높이, 폭을 갖는다.

 

[공통점]

글자에 관련된 컴포넌트입니다. (공통으로 text가 들어가는 것만 봐도 넘나 당연한 것..)

가로 세로 크기를 지정하거나 (속성부여)

안에 글자가 얼마나 들어가느냐에 따라서 크기가 자동으로 조절되게 한다던가

가운데, 왼쪽 오른쪽 등 위치 조정이나 Wrap속성 등등... 차이점 빼고 속성들은 두 도구가 모두 동일합니다.

 

[결론 도출]

단순히 문자열을 이쁘게 보여줄 때에는 가벼운 TextBlock 이용. 출력뿐 아니라 입력또한 받으려면 TextBox를 사용하면 됩니다.

 

오늘 포스팅은 여기까지입니다. 광고클릭/공감/댓글 등은 정보공유를 위해 부지런히 움직이는 작성자에게 큰 동기가 됩니다. 오늘 하루도 고생 많으셨어요~! 하루 잘 마무리하시고 다음 포스팅에서 또 봐요~!