WPF: TextBlock & Label

TextBlock을 알아보자.

WPF에서 TextBlock은 말 그대로 Text를 처리하는 컨트롤 중 하나이다.

이렇게 Text를 처리하는 컨트롤로 Label이 있지만, Label은 짧은 1줄 정도의 텍스트를 처리하는 용도라고 한다면, TextBlock은 여러 줄의 문자열을 처리할 수 있다.

(대신, Label은 이미지를 담을 수도 있지만, TextBlock은 문자열만 담을 수 있다.)

간단한 예제를 한번 보자. (feat. 나라 사랑 ㅎㅎ) __φ(。。)

MyWPFApp.xaml

<Window x:Class="WpfApp1.MyWPFApp"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:WpfApp1"         mc:Ignorable="d"         Title="MainWindow" Height="180" Width="220"         ResizeMode="CanResizeWithGrip">     <Window.Resources>     </Window.Resources>     <Grid Margin="10">         <TextBlock Margin="10" FontSize="14"> 우리 나라 좋은 나라 대한민국 만세!!</TextBlock>     </Grid> </Window>

예제에서 볼 수 있듯이 <TextBlock>과 </TextBlock> 이라는 태그 안에 원하는 텍스트를 입력하면 쉽게 윈도우에 표시할 수 있다.

그러나, 윈도우 크기에 비해 긴 문자열을 입력했을 때 글자가 한번에 표시되지 않는다.

이럴 때 활용할 수 있는 몇 가지 방법을 알아보자. (´▽｀)ノ♪

MyWPFApp.xaml

<Window x:Class="WpfApp1.MyWPFApp"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:WpfApp1"         mc:Ignorable="d"         Title="MainWindow" Height="180" Width="220"         ResizeMode="CanResizeWithGrip">     <Window.Resources>     </Window.Resources>     <StackPanel>         <TextBlock Margin="10" FontSize="14" Foreground="Red"> 우리 나라 좋은 나라 대한민국 만세!!</TextBlock>         <TextBlock Margin="10" FontSize="14" Foreground="Blue" TextTrimming="CharacterEllipsis"> 우리 나라 좋은 나라 대한민국 만세!!</TextBlock>         <TextBlock Margin="10" FontSize="14" Foreground="Green" TextWrapping="Wrap"> 우리 나라 좋은 나라 대한민국 만세!!</TextBlock>     </StackPanel> </Window>

파란색으로 작성된 텍스트 블럭은 'TextTrimming'이라는 속성을 'CharacterEllipsis'로 했을 때의 결과를 보여준다.

윈도우 크기를 넘어서는 텍스트의 경우 '...'을 표시하여 뒤에 더 많은 글자가 있음을 나타내고 있다.

녹색으로 작성된 텍스트 블럭은 'TextWrapping'이라는 속성을 'Wrap'으로 했을 때의 결과를 보여준다.

윈도우 크기를 넘어서는 텍스트의 경우 자동으로 다음 줄에 이어서 텍스트를 표시한다.

텍스트 블럭에서 텍스트의 일부만 꾸미는 작업도 가능하다. (글자를 굵게 한다던지, 색상을 바꾼다던지...)

그럴 때는 'Span'을 사용한다.

MyWPFApp.xaml

<Window x:Class="WpfApp1.MyWPFApp"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:WpfApp1"         mc:Ignorable="d"         Title="MainWindow" Height="180" Width="220"         ResizeMode="CanResizeWithGrip">     <Window.Resources>     </Window.Resources>     <StackPanel>         <TextBlock Margin="10" FontSize="14" TextWrapping="Wrap">             우리 나라             <Span FontWeight="Bold" Foreground="Blue">좋은 나라</Span>             <Span Background="Black" Foreground="Yellow"> 대한민국 만세!!</Span>         </TextBlock>     </StackPanel> </Window>

Label을 알아보자.

Label은 텍스트를 처리하는 아주 간단한 컨트롤 중 하나이다.

텍스트를 처리하는 텍스트 블록과 달리 레이블은 Content 속성을 가지면서 다른 컨트롤을 다룰 수 있다.

그래서, 단순히 텍스트만을 처리하는 목적이라면 레이블에 비해 텍스트 블록을 사용하는 것이 훨씬 가볍다는 점을 기억하자!! ٩(ˊ〇ˋ*)و

다음의 예제를 한번 살펴보자!

MyWPFApp.xaml

<Window x:Class="WpfApp1.MyWPFApp"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:WpfApp1"         mc:Ignorable="d"         Title="MainWindow" Height="180" Width="220"         ResizeMode="CanResizeWithGrip">     <Window.Resources>     </Window.Resources>     <StackPanel Margin="10">         <Label Content="_ID:" Target="{Binding ElementName=txtID}" />         <TextBox Name="txtID" />         <Label Content="_PW:" Target="{Binding ElementName=txtPW}" />         <TextBox Name="txtPW" />     </StackPanel> </Window>

활성화 된 윈도우에서 'Alt' 키를 눌렀을 때  'ID' 와 'PW'의 머리글자에 밑 줄이 생기는 것을 확인할 수 있다.

그리고, 키보드로 머리글자를 눌렀을 때 각 레이블에 바인딩 되어 있는 텍스트 박스로 커서가 넘어가는 것도 확인할 수 있다. (⊙_⊙)

이런 액세스 키는 문자 앞의 밑줄(_)을 통해 지정할 수 있다. 바꿔 말하면, 꼭 첫 번째 문자일 필요는 없다는 의미이다. ㅎㅎ

Share: