Partager via

Bloc de texte enrichi

Les blocs de texte enrichi fournissent plusieurs fonctionnalités de disposition de texte avancée, que vous pouvez utiliser lorsque vous devez prendre en charge des paragraphes, des éléments d’interface utilisateur inline ou des dispositions de texte complexes.

Est-ce le contrôle approprié ?

Utilisez un élément RichTextBlock si vous devez prendre en charge plusieurs paragraphes, du texte sur plusieurs colonnes, d’autres dispositions de texte complexes ou des éléments d’interface utilisateur inline, tels que des images.

Utilisez un TextBlock pour afficher la majeure partie du texte non modifiable dans votre application. Vous pouvez l’utiliser pour afficher du texte à ligne unique ou multiligne, des liens hypertexte inline et du texte avec une mise en forme telle que gras, italique ou souligné. TextBlock fournit un modèle de contenu plus simple, donc généralement plus facile à utiliser, et peut offrir de meilleures performances de rendu de texte que RichTextBlock. Il est souvent privilégié pour le texte de l’interface utilisateur des applications. Bien que vous puissiez placer des sauts de ligne dans le texte, TextBlock est conçu pour afficher un seul paragraphe et ne prend pas en charge la mise en retrait du texte.

Pour plus d’informations sur le choix du contrôle de texte approprié, consultez l’article Contrôles de texte.

Recommendations

Consultez les articles Typographie et Instructions concernant les polices.

Créer un bloc de texte enrichi

Ouvrez l’application galerie WinUI 3 et consultez RichTextBlock en action

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir le code source sur GitHub

La propriété de contenu de RichTextBlock est la propriété Blocks , qui prend en charge le texte basé sur des paragraphes via l’élément Paragraph . Il n’a pas de propriété Text que vous pouvez utiliser pour accéder facilement au contenu texte du contrôle dans votre application. Cependant, RichTextBlock propose plusieurs fonctionnalités uniques que TextBlock ne fournit pas.

RichTextBlock prend en charge les éléments suivants :

  • Paragraphes multiples. Définissez le retrait de paragraphes en définissant la propriété TextIndent.
  • Éléments d’interface utilisateur inline. Utilisez un élément InlineUIContainer pour afficher des éléments d’interface utilisateur, tels que des images et des éléments inline avec votre texte.
  • Conteneurs de dépassement. Utilisez des éléments RichTextBlockOverflow pour créer des dispositions de texte sur plusieurs colonnes.

Paragraphs

Vous utilisez des éléments Paragraphe pour définir les blocs de texte à afficher dans un contrôle RichTextBlock. Chaque RichTextBlock doit inclure au moins un Paragraphe.

Vous pouvez définir la quantité de retraits pour tous les paragraphes d’un RichTextBlock en définissant la propriété RichTextBlock.TextIndent. Vous pouvez remplacer ce paramètre par certains paragraphes d’un RichTextBlock en définissant la propriété Paragraph.TextIndent sur une valeur différente.

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

Éléments d’interface utilisateur inline

La classe InlineUIContainer vous permet d’intégrer des éléments UIElement inline dans votre texte. Un scénario courant consiste à placer un élément Image inline dans votre texte. Vous pouvez également utiliser des éléments interactifs, tels que Button ou CheckBox.

Si vous voulez intégrer plusieurs éléments inline dans la même position, envisagez d’utiliser un panneau comme enfant InlineUIContainer unique, puis placez plusieurs éléments dans ce panneau.

Cet exemple montre comment utiliser un InlineUIContainer pour insérer une image dans un 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>

Conteneurs de dépassement

Vous pouvez utiliser un contrôle RichTextBlock avec des éléments RichTextBlockOverflow pour créer des dispositions sur plusieurs colonnes ou de page avancées. Le contenu d’un élément RichTextBlockOverflow est toujours issu d’un élément RichTextBlock. Vous liez des éléments RichTextBlockOverflow en les définissant comme les composants OverflowContentTarget d’un élément RichTextBlock ou d’un autre élément RichTextBlockOverflow.

Voici un exemple simple qui crée une disposition à deux colonnes. Consultez la section Exemples pour obtenir un exemple plus complexe.

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

Mise en forme du texte

Bien que RichTextBlock stocke du texte brut, vous pouvez appliquer différentes options de mise en forme afin de personnaliser la manière dont le texte est restitué dans votre application. Vous pouvez définir des propriétés de contrôle standard comme FontFamily, FontSize, FontStyle, Foreground et CharacterSpacing pour modifier l’apparence du texte. Vous pouvez également utiliser des éléments de texte inline et des propriétés Typography associées pour mettre en forme votre texte. Ces options affectent uniquement la manière dont RichTextBlock affiche le texte localement, afin qu’aucune mise en forme ne soit appliquée si vous copiez et collez le texte dans un contrôle de texte enrichi, par exemple.

Éléments inline

L’espace de noms Microsoft.UI.Xaml.Documents fournit un large éventail d’éléments de texte inline que vous pouvez utiliser pour mettre en forme votre texte, tels que la mise en gras, l’italique, Run, Span et LineBreak. Un moyen standard d’appliquer une mise en forme aux sections d’un texte consiste à placer le texte dans un élément Run ou Span, puis à définir les propriétés de cet élément.

Voici un Paragraph dont le texte de la première phrase est affiché en gras, bleu et 16 points.

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

Typography

Les propriétés jointes de la classe typographie fournissent l’accès à un ensemble de propriétés typographiques Microsoft OpenType. Vous pouvez définir ces propriétés associées sur RichTextBlock ou sur des éléments de texte inline individuels, comme indiqué ici.

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

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d’application Windows et WinUI 3, mais sont généralement applicables aux applications UWP qui utilisent WinUI 2. Consultez la référence de l’API UWP pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient des informations dont vous avez besoin pour utiliser le contrôle dans une application UWP ou WinUI 2.

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls .

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et modèles les plus récents pour tous les contrôles. WinUI 2.2 ou version ultérieure inclut un nouveau modèle pour ce contrôle qui utilise des angles arrondis. Pour plus d’informations, voir Rayon d’angle.

Contrôles de texte

Pour les concepteurs

Pour les développeurs (XAML)

  • Classe TextBox
  • Classe PasswordBox

Pour les développeurs (autres)

  • Last updated on