Блок форматированного текста

  • Статья

Блоки форматированного текста предоставляют ряд функций для создания расширенного текстового макета, который можно использовать, чтобы обеспечить поддержку абзацев, встроенных элементов пользовательского интерфейса или сложных текстовых макетов.

Выбор правильного элемента управления

Используйте RichTextBlock, если вам требуется поддержка нескольких абзацев, разметка с несколькими столбцами или другие сложные текстовые макеты либо встроенные элементы пользовательского интерфейса, например изображения.

Для отображения в приложении текста «только для чтения», как правило, используется TextBlock. Его можно использовать для отображения однострочного или многострочного текста, строковых гиперссылок и текста с полужирным шрифтом, курсивом или подчеркиванием. TextBlock предоставляет более простую модель содержимого, поэтому обычно ее проще использовать и обеспечивает лучшую производительность отрисовки текста, чем RichTextBlock. Это предпочтительный способ для большинства текстов пользовательского интерфейса приложения. Хотя в тексте можно поместить разрывы строк, TextBlock предназначен для отображения одного абзаца и не поддерживает отступы текста.

Дополнительные сведения можно найти в статье об элементах управления текстом.

Рекомендации

См. руководство по типографии и шрифтам.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

Этот раздел содержит сведения, необходимые для использования элемента управления в приложении 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.
  • Строковые элементы пользовательского интерфейса. Используйте InlineUIContainer, чтобы отобразить элементы пользовательского интерфейса, например изображения, встроенными в текст.
  • Контейнеры переполнения. Используйте элементы RichTextBlockOverflow, чтобы создать текстовые макеты с несколькими столбцами.

Абзацы

Элементы Paragraph используются для определения текстовых блоков, которые будут отображаться внутри элемента управления RichTextBlock. Каждый элемент RichTextBlock должен включать хотя бы один элемент Paragraph.

Можно установить отступ для всех абзацев в элементе RichTextBlock, задав свойство RichTextBlock.TextIndent. Этот параметр можно переопределить для конкретных абзацев в элементе RichTextBlock, задав для свойства Paragraph.TextIndent другое значение.

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

Строковые элементы пользовательского интерфейса

Класс InlineUIContainer позволяет встроить в текст любой элемент UIElement. Распространенный сценарий — вставка элемента Image в текст, но можно использовать и интерактивные элементы, такие как Button или 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 связываются путем их настройки как OverflowContentTarget объекта RichTextBlock или другого элемента RichTextBlockOverflow.

Вот простой пример, создающий макет с двумя столбцами. Более сложные примеры см. в разделе "Примеры".

<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 отображает текст локально, поэтому если, например, скопировать и вставить текст в поле с форматом, форматирование не будет применено.

Строковые элементы

Пространство имен Microsoft.UI.Xaml.Documents предоставляет различные встроенные текстовые элементы, которые можно использовать для форматирования текста, например Полужирный, Курсив, Run, Span и LineBreak. Типичный способ применить форматирование к отдельным частям текста — это поместить текст в элемент Run или Span и задать свойства этого элемента.

Вот элемент Paragraph, первая фраза которого отображается полужирным шрифтом 16 пт в синем цвете.

<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)

Разработчикам (прочее)