Rich-Text-BlockRich text block

Rich-Text-Blöcke bieten verschiedene Features für erweitertes Textlayout, die Sie verwenden können, wenn Sie Unterstützung für Absätze, Inline-UI-Elemente oder komplexe Textlayouts benötigen.Rich text blocks provide several features for advanced text layout that you can use when you need support for paragraphs, inline UI elements, or complex text layouts.

Plattform-APIs: RichTextBlock-Klasse, RichTextBlockOverflow-Klasse, Paragraph-Klasse, Typography-KlassePlatform APIs: RichTextBlock class, RichTextBlockOverflow class, Paragraph class, Typography class

Ist dies das richtige Steuerelement?Is this the right control?

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.Use a RichTextBlock when you need support for multiple paragraphs, multi-column or other complex text layouts, or inline UI elements like images.

Verwenden Sie TextBlock zur Anzeige der überwiegenden Menge an schreibgeschütztem Text in Ihrer App.Use a TextBlock to display most read-only text in your app. Sie können es zum Anzeigen von einzeiligem oder mehrzeiligem Text, Inlinelinks und Text mit Formatierung, z. B. fett, kursiv oder unterstrichen, verwenden.You can use it to display single-line or multi-line text, inline hyperlinks, and text with formatting like bold, italic, or underlined. 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.TextBlock provides a simpler content model, so it's typically easier to use, and it can provide better text rendering performance than RichTextBlock. Er wird für den meisten UI-Text in Apps bevorzugt.It's preferred for most app UI text. Du kannst zwar Zeilenumbrüche in den Text einfügen, jedoch ist TextBlock zum Anzeigen eines einzelnen Absatzes vorgesehen und unterstützt keinen Texteinzug.Although you can put line breaks in the text, TextBlock is designed to display a single paragraph and doesn't support text indentation.

Weitere Informationen zur Auswahl des passenden Textsteuerelements finden Sie im Artikel Textsteuerelemente.For more info about choosing the right text control, see the Text controls article.

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn Sie die App XAML-Steuerelementekatalog installiert haben, klicken Sie hier, um die App zu öffnen und RichTextBlock in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see the RichTextBlock in action.

Erstellen eines Rich-Text-BlocksCreate a rich text block

Die Inhaltseigenschaft von RichTextBlock ist die Blocks-Eigenschaft, die über das Paragraph-Element absatzbasierten Text unterstützt.The content property of RichTextBlock is the Blocks property, which supports paragraph based text via the Paragraph element. Es bietet keine Text-Eigenschaft, die Sie zum einfachen Zugriff auf den Textinhalt des Steuerelements in Ihrer App verwenden können.It doesn't have a Text property that you can use to easily access the control's text content in your app. RichTextBlock bietet jedoch verschiedene einzigartige Features, die TextBlock nicht bereitstellt.However, RichTextBlock provides several unique features that TextBlock doesn't provide.

Von RichTextBlock unterstützte Features:RichTextBlock supports:

  • Mehrere Absätze.Multiple paragraphs. Legen Sie den Einzug für Absätze mit der TextIndent-Eigenschaft fest.Set the indentation for paragraphs by setting the TextIndent property.
  • Inline-UI-Elemente.Inline UI elements. Verwenden Sie einen InlineUIContainer, um UI-Elemente, z. B. Bilder, inline im Text anzuzeigen.Use an InlineUIContainer to display UI elements, such as images, inline with your text.
  • Überlaufcontainer.Overflow containers. Verwenden Sie RichTextBlockOverflow-Elemente, um mehrspaltige Textlayouts zu erstellen.Use RichTextBlockOverflow elements to create multi-column text layouts.

AbsätzeParagraphs

Sie definieren mit Paragraph-Elementen die Textblöcke, die in einem RichTextBlock Steuerelement angezeigt werden sollen.You use Paragraph elements to define the blocks of text to display within a RichTextBlock control. Jeder RichTextBlock sollte mindestens einen Paragraph enthalten.Every RichTextBlock should include at least one Paragraph.

Mit der RichTextBlock.TextIndent-Eigenschaft können Sie die Größe des Einzugs für alle Absätze in einem RichTextBlock festlegen.You can set the indent amount for all paragraphs in a RichTextBlock by setting the RichTextBlock.TextIndent property. 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.You can override this setting for specific paragraphs in a RichTextBlock by setting the Paragraph.TextIndent property to a different value.

<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-ElementeInline UI elements

Mit der InlineUIContainer-Klasse können Sie jedes UIElement inline im Text einbetten.The InlineUIContainer class lets you embed any UIElement inline with your text. Ein gängiges Szenario ist das Einfügen eines Inline-Elements vom Typ „Image“ in den Text. Sie können aber natürlich auch interaktive Elemente wie „Button“ oder „CheckBox“ verwenden.A common scenario is to place an Image inline with your text, but you can also use interactive elements, like a Button or CheckBox.

Wenn Sie mehrere Elemente inline an der gleichen Position einbetten möchten, können Sie ein Panel als einzelnes untergeordnetes InlineUIContainer-Element verwenden und dann mehrere Elemente in diesem Panel platzieren.If you want to embed more than one element inline in the same position, consider using a panel as the single InlineUIContainer child, and then place the multiple elements within that panel.

In diesem Beispiel wird veranschaulicht, wie mithilfe eines InlineUIContainer ein Bild in einen RichTextBlock eingefügt wird.This example shows how to use an InlineUIContainer to insert an image into a 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>

ÜberlaufcontainerOverflow containers

Sie können einen RichTextBlock mit RichTextBlockOverflow-Elementen verwenden, um mehrspaltige Seitenlayouts oder andere erweiterte Seitenlayouts zu erstellen.You can use a RichTextBlock with RichTextBlockOverflow elements to create multi-column or other advanced page layouts. Der Inhalt für ein RichTextBlockOverflow-Element stammt immer aus einem RichTextBlock-Element.The content for a RichTextBlockOverflow element always comes from a RichTextBlock element. Sie verknüpfen RichTextBlockOverflow-Elemente, indem Sie sie als OverflowContentTarget eines RichTextBlock-Elements oder eines anderen RichTextBlockOverflow-Elements festlegen.You link RichTextBlockOverflow elements by setting them as the OverflowContentTarget of a RichTextBlock or another RichTextBlockOverflow.

Hier ist ein einfaches Beispiel, in dem ein zweispaltiges Layout erstellt wird.Here's a simple example that creates a two column layout. Ein komplexeres Beispiel finden Sie im Abschnitt „Beispiele“.See the Examples section for a more complex example.

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

Obwohl der RichTextBlock Nur-Text speichert, können Sie verschiedene Formatierungsoptionen anwenden, um das Rendern des Texts in der App anzupassen.Although the RichTextBlock stores plain text, you can apply various formatting options to customize how the text is rendered in your app. Sie können Standard-Steuerelementeigenschaften, z. B. FontFamily, FontSize, FontStyle, Foreground und CharacterSpacing festlegen, um das Erscheinungsbild des Texts zu ändern.You can set standard control properties like FontFamily, FontSize, FontStyle, Foreground, and CharacterSpacing to change the look of the text. Sie können den Text auch mit Inlinetextelementen und angefügten Typografie-Eigenschaften formatieren.You can also use inline text elements and Typography attached properties to format your text. Diese Optionen beeinflussen nur die lokale Anzeige des Texts im RichTextBlock. Wenn Sie den Text kopieren und z. B. in ein Rich-Text-Steuerelement einfügen, wird daher keine Formatierung angewendet.These options affect only how the RichTextBlock displays the text locally, so if you copy and paste the text into a rich text control, for example, no formatting is applied.

Inline-ElementeInline elements

Der Windows.UI.Xaml.Documents-Namespace bietet eine Vielzahl von Inlinetextelementen, mit denen Sie Text formatieren können, z. B. Bold, Italic, Run, Span und LineBreak.The Windows.UI.Xaml.Documents namespace provides a variety of inline text elements that you can use to format your text, such as Bold, Italic, Run, Span, and LineBreak. Ein typisches Verfahren zum Formatieren von Textabschnitten ist das Einfügen des Texts in ein Run-Element oder Span-Element und das anschließende Festlegen der Eigenschaften für das Element.A typical way to apply formatting to sections of text is to place the text in a Run or Span element, and then set properties on that element.

Dies ist ein Paragraph, in dem der erste Ausdruck als fett formatierter blauer Text mit dem Schriftgrad 16 pt angezeigt wird.Here's a Paragraph with the first phrase shown in bold, blue, 16pt text.

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

TypografieTypography

Die angefügten Eigenschaften der Typografie-Klasse ermöglichen den Zugriff auf eine Reihe von Microsoft OpenType-Typografieeigenschaften.The attached properties of the Typography class provide access to a set of Microsoft OpenType typography properties. Sie können diese angefügten Eigenschaften entweder für den RichTextBlock oder für einzelne Inlinetextelemente festlegen, wie hier gezeigt.You can set these attached properties either on the RichTextBlock, or on individual inline text elements, as shown here.

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

EmpfehlungenRecommendations

Siehe „Typografie“ und „Richtlinien für Schriftarten“.See Typography and Guidelines for fonts.

Beispielcode herunterladenGet the sample code

TextsteuerelementeText controls

Für DesignerFor designers

Für Entwickler (XAML)For developers (XAML)

Für Entwickler (Sonstige)For developers (other)