Freigeben über

Rich-Textblock

Rich-Textblöcke bieten mehrere Features für das erweiterte Textlayout, die Sie verwenden können, wenn Sie Unterstützung für Absätze, Inline-Benutzeroberflächenelemente oder komplexe Textlayouts benötigen.

Ist dies das richtige Steuerelement?

Verwenden Sie ein RichTextBlock-Element, wenn Sie Unterstützung für mehrere Absätze, mehrspaltige oder andere komplexe Textlayouts oder Inline-Benutzeroberflächenelemente wie Bilder benötigen.

Verwenden Sie TextBlock zur Anzeige der überwiegenden Menge an schreibgeschütztem Text in Ihrer App. Sie können damit einzeiligen oder mehrzeiligen Text, Inlinelinks und Text mit Formatierungen wie fett, kursiv oder unterstrichen anzeigen. TextBlock stellt ein einfacheres Inhaltsmodell bereit. Daher ist er in der Regel einfacher zu verwenden und bietet eine bessere Leistung beim Rendern von Text als RichTextBlock. Es wird für den meisten Text in der Benutzeroberfläche von Apps bevorzugt. Du kannst zwar Zeilenumbrüche in den Text einfügen, jedoch ist TextBlock zum Anzeigen eines einzelnen Absatzes vorgesehen und unterstützt keinen Texteinzug.

Weitere Informationen zum Auswählen des richtigen Textsteuerelements finden Sie im Artikel "Textsteuerelemente ".

Empfehlungen

Siehe „Typografie und Richtlinien für Schriftarten“.

Erstellen eines Rich-Textblocks

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie das RichTextBlock-Element in Aktion.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Abrufen der App aus dem Microsoft Store oder Abrufen des Quellcodes auf GitHub

Die Inhaltseigenschaft von RichTextBlock ist die Blocks-Eigenschaft , die absatzbasierten Text über das Paragraph-Element unterstützt. Es verfügt nicht über eine Texteigenschaft , mit der Sie auf einfache Weise auf den Textinhalt des Steuerelements in Ihrer App zugreifen können. RichTextBlock bietet jedoch verschiedene einzigartige Features, die TextBlock nicht bereitstellt.

RichTextBlock unterstützt Folgendes:

  • Mehrere Absätze. Legen Sie den Einzug für Absätze fest, indem Sie die TextIndent-Eigenschaft festlegen.
  • Inline-Benutzeroberflächenelemente. Verwenden Sie einen InlineUIContainer , um UI-Elemente, z. B. Bilder, inline mit Ihrem Text anzuzeigen.
  • Überlaufcontainer. Verwenden Sie RichTextBlockOverflow-Elemente , um mehrspaltige Textlayouts zu erstellen.

Absätze

Mithilfe von Paragraph-Elementen definieren Sie die Textblöcke, die in einem RichTextBlock-Steuerelement angezeigt werden sollen. Jedes RichTextBlock-Element sollte mindestens einen Absatz enthalten.

Sie können den Einzugswert für alle Absätze in einem RichTextBlock festlegen, indem Sie die RichTextBlock.TextIndent-Eigenschaft festlegen. Sie können diese Einstellung für bestimmte Absätze in einem RichTextBlock überschreiben, indem Sie die Paragraph.TextIndent-Eigenschaft auf einen anderen Wert festlegen.

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

Inline-Benutzeroberflächenelemente

Mit der InlineUIContainer-Klasse können Sie alle UIElement-Elemente inline mit Ihrem Text einbetten. Ein gängiges Szenario besteht darin, ein Bild inline mit Ihrem Text zu platzieren, Sie können aber auch interaktive Elemente wie eine Schaltfläche oder ein Kontrollkästchen verwenden.

Wenn Sie mehrere Elemente inline an derselben Position einbetten möchten, sollten Sie einen Bereich als einzelnes untergeordnetes InlineUIContainer-Element verwenden und dann mehrere Elemente innerhalb dieses Bereichs platzieren.

In diesem Beispiel wird gezeigt, wie Sie ein InlineUIContainer-Element verwenden, um ein Bild in ein RichTextBlock-Element einzufügen.

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

Überlaufcontainer

Sie können ein RichTextBlock mit RichTextBlockOverflow-Elementen verwenden, um mehrspaltige oder andere erweiterte Seitenlayouts zu erstellen. Der Inhalt für ein RichTextBlockOverflow-Element stammt immer aus einem RichTextBlock-Element. Sie verknüpfen RichTextBlockOverflow-Elemente, indem Sie sie als OverflowContentTarget-Element eines RichTextBlock-Elements oder eines anderen RichTextBlockOverflow-Elements festlegen.

Hier ist ein einfaches Beispiel, das ein Layout mit zwei Spalten erstellt. Ein komplexeres Beispiel finden Sie im Abschnitt „Beispiele“.

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

Formatieren von Text

Obwohl das RichTextBlock-Element Nur-Text-Inhalt enthält, können Sie verschiedene Formatierungsoptionen anwenden, um anzupassen, wie der Text in Ihrer App dargestellt wird. Sie können Standardeigenschaften wie Schriftfamilie, Schriftgröße, Schriftart, Vordergrund und Zeichenabstand (FontFamily, FontSize, FontStyle, Foreground, CharacterSpacing) festlegen, um das Aussehen des Texts zu ändern. Sie können auch Inlinetextelemente und angefügte Typografieeigenschaften verwenden, um den Text zu formatieren. Diese Optionen wirken sich nur darauf aus, wie das RichTextBlock-Element den Text lokal anzeigt. Wenn Sie den Text also beispielsweise kopieren und in ein Rich-Textsteuerelement einfügen, wird keine Formatierung angewendet.

Inlineelemente

Der Microsoft.UI.Xaml.Documents Namespace bietet eine Vielzahl von Inline-Textelementen, mit denen Sie Ihren Text formatieren können, z. B. Bold, Italic, Run, Span und LineBreak. Eine typische Möglichkeit zum Anwenden von Formatierungen auf Textabschnitte besteht darin, den Text in ein Run- oder Span-Element zu platzieren und dann Eigenschaften für dieses Element festzulegen.

Hier ist ein Absatz, dessen erster Satz fett formatiert, blau und mit der Textgröße 16 pt angezeigt wird.

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

Typografie

Die angefügten Eigenschaften der Typografieklasse bieten Zugriff auf eine Reihe von Microsoft OpenType-Typografieeigenschaften. Sie können diese angefügten Eigenschaften entweder für das RichTextBlock-Element oder für einzelne Inlinetextelemente festlegen, wie hier gezeigt.

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

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

Wir empfehlen die Verwendung der neuesten WinUI 2 zum Abrufen der aktuellsten Stile und Vorlagen für alle Steuerelemente. Windows UI enthält ab Version 2.2 eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Textsteuerelemente

Für Designer

Für Entwickler (XAML)

Für Entwickler (andere)

  • Last updated on