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

  • Статья

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

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

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

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

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

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

Ознакомьтесь с типографией и рекомендациями по шрифтам.

UWP и WinUI 2

Внимание

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

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии содержит новый шаблон для этого элемента управления, использующего округленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Создание блока форматированного текста

  • Важные API: класс RichTextBlock, класс RichTextBlockOverflow, класс Paragraph, класс Typeography

Откройте приложение коллекции WinUI 3 и просмотрите RichTextBlock в действии.

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

Свойство содержимого RichTextBlock — это свойство Blocks , которое поддерживает текст на основе абзаца с помощью элемента Paragraph . У него нет свойства Text , которое можно использовать для легкого доступа к текстовому содержимому элемента управления в приложении. Однако RichTextBlock предусматривает несколько уникальных возможностей, которые недоступны с элементом TextBlock.

RichTextBlock поддерживает:

  • Несколько абзацев. Задайте отступ для абзацев, задав свойство TextIndent .
  • Встроенные элементы пользовательского интерфейса. Используйте InlineUIContainer для отображения элементов пользовательского интерфейса, таких как изображения, встроенные в текст.
  • Контейнеры переполнения. Используйте элементы RichTextBlockOverflow для создания макетов текста с несколькими столбцами.

Абзацы

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

Вы можете задать отступ для всех абзацев в 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. Распространенный сценарий заключается в том, чтобы поместить изображение в строку с текстом, но вы также можете использовать интерактивные элементы, такие как 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, чтобы изменить внешний вид текста. Вы также можете использовать встроенные текстовые элементы и вложенные свойства typeography для форматирования текста. Эти параметры влияют только на то, как RichTextBlock отображает текст локально, поэтому если вы копируете и вставляете текст в элемент управления форматированным текстом, например, форматирование не применяется.

Встроенные элементы

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

Вот абзац с первой фразой, показанной в полужирном, синем, 16pt тексте.

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

Оформление текста

Присоединенные свойства класса Typeography предоставляют доступ к набору свойств типографии Microsoft OpenType. Эти присоединенные свойства можно задать в RichTextBlock или на отдельных встроенных текстовых элементах, как показано здесь.

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

Получение кода примера

  • Пример коллекции WinUI. Просмотрите все элементы управления XAML в интерактивном формате.

Текстовые элементы управления

Для конструкторов

Для разработчиков (XAML)

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