TextBlock 컨트롤 - Inline formatting

지난 기사에서는 TextBlock 컨트롤의 핵심 기능인 간단한 문자열 표시 및 필요한 경우 줄 바꿈 기능을 살펴 보았습니다. 텍스트를 렌더링 할 때 기본 색상 외에 다른 색상을 사용하기도했지만 TextBlock의 모든 텍스트에 한가지 색상을 입히는것 이상을 원한다면 어떻게 해야 할까요?

다행히도 TextBlock 컨트롤은 인라인 콘텐트를 지원합니다. 이러한 작은 컨트롤과 유사한 구문은 모두 Inline 클래스를 상속합니다. 즉, 더 큰 텍스트의 일부로 인라인으로 렌더링 될 수 있습니다. 구문 작성시 AnchoredBlock, Bold, Hyperlink, InlineUIContainer, Italic, LineBreak, Run, Span 및 Underline이 지원됩니다. 다음 예제에서는 대부분을 살펴볼 것입니다.

Bold, Italic, Underline 태그

이것들은 아마도 가장 간단한 유형의 인라인 요소 일 것입니다. 이름만 봐도 이것들이 하는 일에 대해 알 수 있지만, 다음의 간단하고 빠른 예제를 통해 어떻게 사용하는지 볼 수 있습니다.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockInlineSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockInlineSample" Height="100" Width="300">
    <Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			TextBlock with <Bold>bold</Bold>, <Italic>italic</Italic> and <Underline>underlined</Underline> text.
		</TextBlock>
    </Grid>
</Window>

HTML의 경우와 마찬가지로 텍스트를 Bold 태그로 둘러 싸서 굵은 텍스트 등을 얻을 수 있습니다. 따라서 응용 프로그램에서 다양한 텍스트를 쉽게 만들고 표시 할 수 있습니다.

이 세 개의 태그는 모두 Span 을 상속받은 클래스이며, 텍스트에 원하는 효과를 만들기 위해 Span 요소의 특정 속성을 설정합니다. 예를 들어 Bold 태그는 Span 의 FontWeight 에 Bold 를 설정하고 Italic 은 FontStyle 에 Italic을 지정해서 이와 같은 효과를 냅니다.

LineBreak 태그

LineBreak 는 줄바꿈하는 태그로, 텍스트에 줄 바꿈을 할 위치에 삽입하기 만하면 됩니다. LineBreak 요소를 사용하는 예는 이전 장에서 이미 살펴봤습니다.

Hyperlink 태그

Hyperline 요소를 사용하면 텍스트에 링크를 포함 할 수 있습니다. 현재 Windows 테마에 맞는 스타일로 렌더링됩니다. 일반적으로 밑줄이 그어진 파란색 텍스트로 보이고 그 위에 마우스를 가져가면 마우스 커서가 손가락 모양으로 변경되는 효과를 가집니다. NavigateUri 속성을 사용하여 이동할 URL을 정의 할 수 있습니다. 다음은 그 예입니다.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockHyperlinkSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockHyperlinkSample" Height="100" Width="300">
	<Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			This text has a <Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="https://www.google.com">link</Hyperlink> in it.
		</TextBlock>
	</Grid>
</Window>

Hyperlink는 WPF Page의 내부에서도 Page 사이를 이동하는데에도 사용됩니다. 이 경우 예제에서와 같이 RequestNavigate 이벤트를 특별히 처리 할 필요는 없지만 일반 WPF 응용 프로그램에서 외부 URL로 링크를 걸려면 RequestNavigate 와 Process 클래스를 이용해 약간의 코딩이 필요합니다. cs 파일에 RequestNavigate 이벤트에 정의한 핸들러를 등록하고, RequestNavigate 이벤트가 발생하면 핸들러가 호출되고, 사용자 기본 브라우저를 띄워 링크 된 URL을 시작할 수 있습니다. 다음 예제를 살펴보십시오.

private void Hyperlink_RequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e)
{
	System.Diagnostics.Process.Start(e.Uri.AbsoluteUri);
}

Run

Run 요소를 사용하면 Span에서 가능한 모든 속성을 사용하여 문자열의 스타일을 지정할 수 있지만 일반 텍스트만 지정할 수 있고, Span 을 사용하면 다른 인라인 요소가 포함될 수 있습니다 . 그렇기 때문에 Span 요소를 더 유연하게 사용할 수 있고, 대부분의 경우 논리적으로 선택적해서 사용할 수 있습니다.

Span

Span 요소에는 특정 렌더링을 기본으로 설정해 놓은 것은 없고, 글꼴 크기, 스타일 및 두께, 배경색 및 글꼴색 등 거의 모든 종류의 렌더링을 직접 설정해서 사용하도록 되어 있습니다. Span 요소의 가장 큰 장점은 내부에 다른 인라인 요소를 허용하여 텍스트와 스타일의 고급 조합을 쉽게 수행 할 수 있다는 것입니다. 다음 예제에서는 인라인 Span 요소를 사용할 때 많은 Span 요소를 사용하여 다양한 조합을 보여줍니다.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSpanSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSpanSample" Height="100" Width="300">
    <Grid>
		<TextBlock Margin="10" TextWrapping="Wrap">
			This <Span FontWeight="Bold">is</Span> a
			<Span Background="Silver" Foreground="Maroon">TextBlock</Span>
			with <Span TextDecorations="Underline">several</Span>
			<Span FontStyle="Italic">Span</Span> elements,
			<Span Foreground="Blue">
				using a <Bold>variety</Bold> of <Italic>styles</Italic>
			</Span>.
		</TextBlock>
	</Grid>
</Window>

위의 예제와 같이, 특정 요소가 상황에 맞지 않거나 빈 캔버스에서부터 텍스트를 꾸미기를 원한다면 Span 을 선택하면 좋습니다.

C# 또는 코드에서의 사용법

보시다시피 XAML을 통해 텍스트 서식을 지정하는 것은 매우 쉽지만 경우에 따라 C#/cs 파일에서 텍스트를 직접 바꾸는 것이 필요하거나 이를 선호할 수도 있습니다. 코드에서 쓰는 법이 조금 더 불편하지만, 어떻게 작성하면 되는지에 대한 예가 아래에 있습니다.

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockCodeBehindSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockCodeBehindSample" Height="100" Width="300">
    <Grid></Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Media;

namespace WpfTutorialSamples.Basic_controls
{
	public partial class TextBlockCodeBehindSample : Window
	{
		public TextBlockCodeBehindSample()
		{
			InitializeComponent();
			TextBlock tb = new TextBlock();
			tb.TextWrapping = TextWrapping.Wrap;
			tb.Margin = new Thickness(10);
			tb.Inlines.Add("An example on ");
			tb.Inlines.Add(new Run("the TextBlock control ") { FontWeight = FontWeights.Bold });
			tb.Inlines.Add("using ");
			tb.Inlines.Add(new Run("inline ") { FontStyle = FontStyles.Italic });
			tb.Inlines.Add(new Run("text formatting ") { Foreground = Brushes.Blue });
			tb.Inlines.Add("from ");
			tb.Inlines.Add(new Run("Code-Behind") { TextDecorations = TextDecorations.Underline });
			tb.Inlines.Add(".");
			this.Content = tb;
		}
	}
}

가능성을 갖는 것은 대단한 일이며, 경우에 따라 이처럼 해야 할 수도 있습니다. 그러나 이 예를 보면 아마도 XAML을 훨씬 더 편하다고 평가받을 것입니다.