Delen via

Rtf-tekstblok

  • Artikel

Tekstblokken met opmaak bieden verschillende functies voor geavanceerde tekstindeling die u kunt gebruiken wanneer u ondersteuning nodig hebt voor alinea's, inline UI-elementen of complexe tekstindelingen.

Is dit de juiste controle?

Gebruik een RichTextBlock wanneer u ondersteuning nodig hebt voor meerdere alinea's, meerdere kolommen of andere complexe tekstindelingen of inline ui-elementen zoals afbeeldingen.

Gebruik een TextBlock om het merendeel van de alleen-lezen tekst in uw app weer te geven. U kunt deze gebruiken om tekst met één regel of meerdere regels, inline-hyperlinks en tekst weer te geven met opmaak zoals vet, cursief of onderstreept. TextBlock biedt een eenvoudiger inhoudsmodel, dus het is doorgaans eenvoudiger te gebruiken en kan betere prestaties bieden voor het weergeven van tekst dan RichTextBlock. Deze heeft de voorkeur voor de meeste tekst van de gebruikersinterface van de app. Hoewel u regeleinden in de tekst kunt plaatsen, is TextBlock ontworpen om één alinea weer te geven en ondersteunt geen tekstinspringing.

Zie het artikel Tekstbesturingselementen voor meer informatie over het kiezen van het juiste tekstbesturingselement.

Aanbevelingen

Zie Typografie en richtlijnen voor lettertypen.

Een rich text-blok maken

Open de App WinUI 3 Gallery en bekijk de RichTextBlock in actie

De WinUI 3 Gallery app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Download de app uit de Microsoft Store of haal de broncode op GitHub-

De inhoudseigenschap van RichTextBlock is de eigenschap Blokken, die ondersteuning biedt voor tekst op paragraafbasis via het element Alinea. Het heeft geen eigenschap Text die u kunt gebruiken om eenvoudig toegang te krijgen tot de tekstinhoud van het besturingselement in uw app. RichTextBlock biedt echter verschillende unieke functies die TextBlock niet biedt.

RichTextBlock ondersteunt:

  • Meerdere alinea's. Stel de inspringing voor alinea's in door de eigenschap TextIndent in te stellen.
  • Inline UI-elementen. Gebruik een InlineUIContainer om UI-elementen, zoals afbeeldingen, inline weer te geven met uw tekst.
  • Overloopcontainers. Gebruik RichTextBlockOverflow elementen om tekstindelingen met meerdere kolommen te maken.

Paragrafen

U gebruikt Alinea--elementen om tekstblokken te definiëren die moeten worden weergegeven in een RichTextBlock controle-element. Elke RichTextBlock moet ten minste één alinea bevatten.

U kunt de inspringing voor alle alinea's in een RichTextBlock instellen door de eigenschap RichTextBlock.TextIndent in te stellen. U kunt deze instelling overschrijven voor specifieke alinea's in een RichTextBlock door de eigenschap Alinea.TextIndent in te stellen op een andere waarde.

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

Met de klasse InlineUIContainer kunt u een UIElement inline opnemen in uw tekst. Een veelvoorkomend scenario is het inline plaatsen van een afbeelding met uw tekst, maar u kunt ook interactieve elementen gebruiken, zoals een knop of selectievakje.

Als u meer dan één element inline in dezelfde positie wilt insluiten, kunt u overwegen om een paneel te gebruiken als het enige InlineUIContainer-kind en vervolgens de meerdere elementen in dat paneel te plaatsen.

In dit voorbeeld ziet u hoe u een InlineUIContainer gebruikt om een afbeelding in te voegen in een 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>

Overstroomcontainers

U kunt een RichTextBlock gebruiken met RichTextBlockOverflow elementen om meerdere kolommen of andere geavanceerde pagina-indelingen te maken. De inhoud voor een RichTextBlockOverflow-element is altijd afkomstig van een RichTextBlock-element. U koppelt RichTextBlockOverflow-elementen door deze in te stellen als de OverflowContentTarget van een RichTextBlock of een andere RichTextBlockOverflow.

Hier volgt een eenvoudig voorbeeld waarmee een indeling van twee kolommen wordt gemaakt. Zie de sectie Voorbeelden voor een complexer voorbeeld.

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

Tekst opmaken

Hoewel in RichTextBlock tekst zonder opmaak wordt opgeslagen, kunt u verschillende opmaakopties toepassen om aan te passen hoe de tekst in uw app wordt weergegeven. U kunt standaardbesturingselementeigenschappen zoals FontFamily, FontSize, FontStyle, Foreground en CharacterSpacing instellen om het uiterlijk van de tekst te wijzigen. U kunt ook inlinetekstelementen en typografie-eigenschappen gebruiken om de tekst op te maken. Deze opties zijn alleen van invloed op hoe de tekst lokaal wordt weergegeven in RichTextBlock, dus als u de tekst kopieert en plakt in een rich text-besturingselement, wordt er bijvoorbeeld geen opmaak toegepast.

Inline-elementen

De Microsoft.UI.Xaml.Documents naamruimte biedt diverse inline tekstelementen die u kunt gebruiken om uw tekst op te maken, zoals Vet, Cursief, Uitvoeren, Span en LineBreak. Een typische manier om opmaak toe te passen op tekstsecties is door de tekst in een element Uitvoeren of Span te plaatsen en vervolgens eigenschappen op dat element in te stellen.

Hier is een alinea met de eerste woordgroep in vet, blauw, en in 16pt weergegeven.

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

Typografie

De gekoppelde eigenschappen van de Typografie klasse bieden toegang tot een set Typografie-eigenschappen van Microsoft OpenType. U kunt deze gekoppelde eigenschappen instellen op richTextBlock of op afzonderlijke inlinetekstelementen, zoals hier wordt weergegeven.

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

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API voor dit bedieningselement bevindt zich in de Windows.UI.Xaml.Controls naamruimte.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie hoekstraalvoor meer informatie.

tekstbedieningselementen

Voor ontwerpers

Voor ontwikkelaars (XAML)

Voor ontwikkelaars (andere)