Bloc de texte riche

  • Article

Les blocs de texte enrichi fournissent plusieurs fonctionnalités pour la disposition de texte avancée que vous pouvez utiliser lorsque vous avez besoin de la prise 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 RichTextBlock lorsque vous avez besoin de la prise en charge de plusieurs paragraphes, de plusieurs colonnes ou d’autres dispositions de texte complexes ou d’éléments d’interface utilisateur inline tels que des images.

Utilisez un TextBlock pour afficher le texte le plus en lecture seule 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 préférable pour la plupart des textes de l’interface utilisateur de l’application. Même si vous pouvez insérer des sauts de ligne dans le texte, TextBlock est conçu pour n’afficher qu’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.

Recommandations

Consultez typographie et instructions pour les polices.

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 qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de 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 fonctionnalités les plus récents pour tous les contrôles. WinUI version 2.2 ou ultérieure inclut pour ce contrôle un nouveau modèle qui utilise des angles arrondis. Pour plus d’informations, consultez Rayons des angles.

Créer un bloc de texte enrichi

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

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou 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 :

Paragraphes

Vous utilisez des éléments Paragraph 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 retrait pour tous les paragraphes d’un RichTextBlock en définissant la propriété RichTextBlock.TextIndent . Vous pouvez remplacer ce paramètre pour des paragraphes spécifiques dans un RichTextBlock en définissant la propriété Paragraph.TextIndent sur une autre valeur.

<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’incorporer n’importe quel élément UIElement inline avec votre texte. Un scénario courant consiste à placer une image inline avec votre texte, mais vous pouvez également utiliser des éléments interactifs, tels qu’un bouton ou une case à cocher.

Si vous souhaitez incorporer plusieurs éléments inline dans la même position, envisagez d’utiliser un panneau comme enfant InlineUIContainer unique, puis placez les 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 de capacité

Vous pouvez utiliser un RichTextBlock avec des éléments RichTextBlockOverflow pour créer plusieurs colonnes ou d’autres mises en page avancées. Le contenu d’un élément RichTextBlockOverflow provient toujours d’un élément RichTextBlock. Vous liez des éléments RichTextBlockOverflow en les définissant comme OverflowContentTarget d’un RichTextBlock ou d’un autre 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 pour personnaliser le rendu du texte dans votre application. Vous pouvez définir des propriétés de contrôle standard telles que 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 jointes typographiques pour mettre en forme votre texte. Ces options affectent uniquement la façon dont RichTextBlock affiche le texte localement. Par conséquent, si vous copiez et collez le texte dans un contrôle de texte enrichi, par exemple, aucune mise en forme n’est appliquée.

É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, tel que Gras, Italique, Run, Span et LineBreak. Une façon classique d’appliquer la mise en forme à des sections de texte consiste à placer le texte dans un élément Run ou Span, puis à définir des propriétés sur cet élément.

Voici un paragraphe avec la première expression affichée en gras, bleu, texte de 16pts.

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

Typographie

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 jointes sur RichTextBlock ou sur des éléments de texte inline individuels, comme illustré ici.

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

Obtenir l’exemple de code

Contrôles de texte

Pour les concepteurs

Pour les développeurs (XAML)

Pour les développeurs (autres)