서식 있는 텍스트 블록

  • 아티클

서식 있는 텍스트 블록은 단락, 인라인 UI 요소 또는 복잡한 텍스트 레이아웃을 지원해야 할 때 사용할 수 있는 고급 텍스트 레이아웃을 위한 몇 가지 기능을 제공합니다.

올바른 컨트롤인가요?

여러 단락, 다중 열 또는 기타 복잡한 텍스트 레이아웃 또는 이미지와 같은 인라인 UI 요소를 지원해야 하는 경우에는 RichTextBlock을 사용합니다.

TextBlock을 사용하여 앱에서 대부분의 읽기 전용 텍스트를 표시합니다. 이를 사용하여 한 줄 또는 여러 줄 텍스트, 인라인 하이퍼링크, 굵게, 기울임꼴 또는 밑줄 같은 서식이 있는 텍스트를 표시할 수 있습니다. TextBlock은 단순한 콘텐츠 모델을 제공하므로 일반적으로 사용하기가 더 쉽고, RichTextBlock보다 뛰어난 텍스트 렌더링 성능을 제공할 수 있습니다. 대부분의 앱 UI 텍스트에 선호됩니다. 텍스트에 줄 바꿈을 넣을 수는 있지만, TextBlock은 단일 단락을 표시하도록 설계되었으며 텍스트 들여쓰기를 지원하지 않습니다.

올바른 텍스트 컨트롤을 선택하는 방법에 대한 자세한 내용은 텍스트 컨트롤 문서를 참조하세요.

권장 사항

글꼴 입력 체계 및 지침을 참조하세요.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 일반적으로 WinUI 2를 사용하는 UWP 앱에 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

이 컨트롤용 API는 Windows.UI.Xaml.Controls 네임스페이스에 있습니다.

최신 WinUI 2를 사용하여 모든 컨트롤에 대한 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 이상에는 둥근 모서리를 사용하는 이 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.

서식 있는 텍스트 블록 만들기

WinUI 3 갤러리 앱을 열고 작동 중인 RichTextBlock을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

RichTextBlock의 콘텐츠 속성은 Blocks 속성인데, 이는 Paragraph 요소를 통해 단락 기반 텍스트를 지원합니다. 여기에는 앱에서 컨트롤의 텍스트 콘텐츠에 쉽게 액세스하는 데 사용할 수 있는 Text 속성이 없습니다. 그러나 RichTextBlock은 TextBlock에서 제공하지 않는 여러 고유한 기능을 제공합니다.

RichTextBlock은 다음을 지원합니다.

  • 여러 단락. TextIndent 속성을 설정하여 단락의 들여쓰기를 설정합니다.
  • 인라인 UI 요소. InlineUIContainer를 사용하여 이미지 같은 UI 요소를 텍스트와 인라인으로 표시합니다.
  • 오버플로 컨테이너. RichTextBlockOverflow 요소를 사용하여 다중 열 텍스트 레이아웃을 만듭니다.

단락

Paragraph 요소를 사용하여 RichTextBlock 컨트롤 내에 표시할 텍스트 블록을 정의합니다. 모든 RichTextBlock에 하나 이상의 단락이 포함되어야 합니다.

RichTextBlock.TextIndent 속성을 설정하여 RichTextBlock의 모든 단락에 대한 들여쓰기 크기를 설정할 수 있습니다. Paragraph.TextIndent 속성을 다른 값으로 설정하여 RichTextBlock의 특정 단락에 대해 이 설정을 재정의할 수 있습니다.

<RichTextBlock TextIndent="12">
  <Paragraph TextIndent="24">First paragraph.</Paragraph>
  <Paragraph>Second paragraph.</Paragraph>
  <Paragraph>Third paragraph. <Bold>With an inline.</Bold></Paragraph>
</RichTextBlock>

인라인 UI 요소

InlineUIContainer 클래스를 사용하면 텍스트와 함께 모든 UIElement 인라인을 포함할 수 있습니다. 일반적인 시나리오는 이미지를 텍스트와 인라인으로 배치하는 것이지만, 단추 또는 CheckBox 같은 대화형 요소도 사용할 수 있습니다.

한 위치에 둘 이상의 요소를 인라인으로 포함하려면 패널을 단일 InlineUIContainer 자식으로 사용한 다음 해당 패널 안에 여러 요소를 배치하는 것이 좋습니다.

이 예제는 InlineUIContainer를 사용하여 RichTextBlock에 이미지를 삽입하는 방법을 보여줍니다.

<RichTextBlock>
    <Paragraph>
        <Italic>This is an inline image.</Italic>
        <InlineUIContainer>
            <Image Source="Assets/Square44x44Logo.png" Height="30" Width="30"/>
        </InlineUIContainer>
        Mauris auctor tincidunt auctor.
    </Paragraph>
</RichTextBlock>

오버플로 컨테이너

RichTextBlock을 RichTextBlockOverflow 요소와 함께 사용하여 다중 열 또는 기타 고급 페이지 레이아웃을 만들 수 있습니다. RichTextBlockOverflow 요소용 콘텐츠는 항상 RichTextBlock 요소에서 제공됩니다. RichTextBlockOverflow 요소들을 RichTextBlock 또는 다른 RichTextBlockOverflow의 OverflowContentTarget으로 설정하여 연결합니다.

다음은 두 열 레이아웃을 만드는 간단한 예입니다. 더 복잡한 예는 예제 섹션을 참조하세요.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <RichTextBlock Grid.Column="0" 
                   OverflowContentTarget="{Binding ElementName=overflowContainer}" >
        <Paragraph>
            Proin ac metus at quam luctus ultricies.
        </Paragraph>
    </RichTextBlock>
    <RichTextBlockOverflow x:Name="overflowContainer" Grid.Column="1"/>
</Grid>

텍스트 서식 지정

RichTextBlock은 일반 텍스트를 저장하지만 다양한 서식 지정 옵션을 적용하여 앱에서 텍스트가 렌더링되는 방식을 사용자 지정할 수 있습니다. FontFamily, FontSize, FontStyle, Foreground, CharacterSpacing 같은 표준 컨트롤 속성을 설정하여 텍스트의 모양을 변경할 수 있습니다. 인라인 텍스트 요소 및 Typography 연결 속성을 사용하여 텍스트의 서식을 지정할 수도 있습니다. 이러한 옵션은 RichTextBlock이 로컬에서 텍스트를 표시하는 방식에만 영향을 주므로, 예를 들어 서식 있는 텍스트 컨트롤에 텍스트를 복사하여 붙여넣는 경우에는 서식이 적용되지 않습니다.

인라인 요소

The Microsoft.UI.Xaml.Documents 네임스페이스는 Bold, Italic, Run, Span, LineBreak 같이 텍스트의 서식을 지정하는 데 사용할 수 있는 다양한 인라인 텍스트 요소를 제공합니다. 텍스트 섹션에 서식을 적용하는 일반적인 방법은 Run 또는 Span 요소에 텍스트를 배치한 다음 해당 요소에서 속성을 설정하는 것입니다.

다음은 첫 번째 구가 파란색의 굵은 16pt 텍스트로 표시된 단락입니다.

<Paragraph>
    <Bold><Span Foreground="DarkSlateBlue" FontSize="16">Lorem ipsum dolor sit amet</Span></Bold>
    , consectetur adipiscing elit.
</Paragraph>

입력 체계

Typography 클래스의 연결된 속성은 Microsoft OpenType 입력 체계 속성 집합에 대한 액세스 권한을 제공합니다. 다음과 같이 RichTextBlock 또는 개별 인라인 텍스트 요소에서 이러한 연결된 속성을 설정할 수 있습니다.

<RichTextBlock Typography.StylisticSet4="True">
    <Paragraph>
        <Span Typography.Capitals="SmallCaps">Lorem ipsum dolor sit amet</Span>
        , consectetur adipiscing elit.
    </Paragraph>
</RichTextBlock>

샘플 코드 가져오기

텍스트 컨트롤

디자이너용

개발자용(XAML)

개발자용(기타)