Rich-Text-Block

  • Artikel

Rich-Text-Blöcke bieten verschiedene Features für das erweiterte Textlayout, die Sie verwenden können, wenn Sie Unterstützung für Absätze, Inline-UI-Elemente oder komplexe Textlayouts benötigen.

Ist dies das richtige Steuerelement?

Verwenden Sie richTextBlock, wenn Sie Unterstützung für mehrere Absätze, mehrspaltige oder andere komplexe Textlayouts oder Inline-UI-Elemente wie Bilder benötigen.

Verwenden Sie einen TextBlock , um den schreibgeschützten Text in Ihrer App anzuzeigen. Sie können es verwenden, um einzeiligen oder mehrzeiligen Text, Inlinelinks und Text mit Formatierung wie Fett, Kursiv oder Unterstrichen anzuzeigen. 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 die meisten App-UI-Text bevorzugt. Du kannst zwar Zeilenumbrüche in den Text einfügen, aber TextBlock ist zum Anzeigen eines einzelnen Absatzes vorgesehen und unterstützt keinen Texteinzug.

Weitere Informationen zur Auswahl des passenden Textsteuerelements finden Sie im Artikel Textsteuerelemente.

Empfehlungen

Siehe Typografie und Richtlinien für Schriftarten.

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. WinUI 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Erstellen eines Rich-Text-Blocks

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

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

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:

Absätze

Sie definieren mit Paragraph-Elementen die Textblöcke, die in einem RichTextBlock Steuerelement angezeigt werden sollen. Jeder RichTextBlock sollte mindestens einen Absatz enthalten.

Sie können den Einzugsbetrag 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-UI-Elemente

Mit der InlineUIContainer-Klasse können Sie jedes UIElement inline im 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 CheckBox-Element verwenden.

Wenn Sie mehrere Elemente inline an derselben Position einbetten möchten, sollten Sie ein Panel als untergeordnetes InlineUIContainer-Element verwenden und dann die mehreren Elemente innerhalb dieses Bereichs platzieren.

In diesem Beispiel wird gezeigt, wie Sie ein InlineUIContainer verwenden, um ein Bild in einen RichTextBlock 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 einen RichTextBlock mit RichTextBlockOverflow-Elementen verwenden, um mehrspaltige Seitenlayouts 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 eines RichTextBlock oder eines anderen RichTextBlockOverflow festlegen.

Hier ist ein einfaches Beispiel, das ein zweiSpaltenlayout 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 RichTextBlock Nur-Text speichert, können Sie verschiedene Formatierungsoptionen anwenden, um anzupassen, wie der Text in Ihrer App gerendert wird. Sie können Standardsteuerelementeigenschaften wie FontFamily, FontSize, FontStyle, Foreground und 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 der RichTextBlock den Text lokal anzeigt. Wenn Sie den Text also kopieren und in ein Rich-Text-Steuerelement einfügen, wird beispielsweise keine Formatierung angewendet.

Inlineelemente

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

Hier ist ein Absatz mit dem ersten Ausdruck, der fett formatiert, blau, 16 pt Text 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 RichTextBlock 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>

Beispielcode herunterladen

Textsteuerelemente

Für Designer

Für Entwickler (XAML)

Für Entwickler (Sonstige)