Formaterad textblock

Rika textblock innehåller flera funktioner för avancerad textlayout som du kan använda när du behöver stöd för stycken, infogade användargränssnittselement eller komplex textlayout.

Är det här rätt kontroll?

Använd en RichTextBlock- när du behöver stöd för flera stycken, flera kolumner eller andra komplexa textlayouter eller infogade gränssnittselement som bilder.

Använd en TextBlock för att visa de flesta skrivskyddade texter i din app. Du kan använda den för att visa text med en rad eller flera rader, infogade hyperlänkar och text med formatering som fet, kursiv eller understruken. TextBlock ger en enklare innehållsmodell, så det är vanligtvis enklare att använda, och det kan ge bättre prestanda för textåtergivning än RichTextBlock. Det är att föredra för de flesta appgränssnittstexter. Även om du kan placera radbrytningar i texten är TextBlock utformat för att visa ett stycke och stöder inte text indrag.

Mer information om hur du väljer rätt textkontroll finns i artikeln Textkontroller .

Rekommendationer

Se Typografi och riktlinjer för teckensnitt.

Skapa ett rikt textblock

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Innehållsegenskapen för RichTextBlock är egenskapen Blocks, som stöder styckebaserad text via elementet Stycke. Den har ingen egenskap Text som du kan använda för att enkelt komma åt kontrollens textinnehåll i din app. RichTextBlock innehåller dock flera unika funktioner som TextBlock inte tillhandahåller.

RichTextBlock stöder:

• Flera stycken. Ställ in indrag för stycken genom att ange egenskapen TextIndent.
• Infogade gränssnittselement. Använd en InlineUIContainer- för att visa gränssnittselement, till exempel bilder, infogade med texten.
• Överflödesbehållare. Använd RichTextBlockOverflow element för att skapa textlayouter med flera kolumner.

Paragrafer

Du använder elementen Stycke för att definiera vilka textblock som ska visas i en RichTextBlock-kontroll. Varje RichTextBlock bör innehålla minst ett stycke.

Du kan ange indragsbeloppet för alla stycken i en RichTextBlock genom att ange egenskapen RichTextBlock.TextIndent. Du kan åsidosätta den här inställningen för specifika stycken i en RichTextBlock genom att ange egenskapen Paragraph.TextIndent till ett annat värde.

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

Infogade gränssnittselement

Med klassen InlineUIContainer kan du bädda in valfri UIElement-inline med din text. Ett vanligt scenario är att placera en bild infogad med texten, men du kan också använda interaktiva element, till exempel en knapp eller kryssruta.

Om du vill bädda in fler än ett element infogat i samma position kan du överväga att använda en panel som en enda InlineUIContainer-underordnad och sedan placera flera element i panelen.

Det här exemplet visar hur du använder en InlineUIContainer för att infoga en bild i en 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>

Överfyllnadsbehållare

Du kan använda en RichTextBlock med RichTextBlockOverflow- element för att skapa flera kolumner eller andra avancerade sidlayouter. Innehållet för ett RichTextBlockOverflow-element kommer alltid från ett RichTextBlock-element. Du länkar RichTextBlockOverflow-element genom att ange dem som OverflowContentTarget för en RichTextBlock eller ett annat RichTextBlockOverflow.

Här är ett enkelt exempel som skapar en layout med två kolumner. Se avsnittet Exempel för ett mer komplext exempel.

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

Formatera text

Även om RichTextBlock lagrar oformaterad text kan du använda olika formateringsalternativ för att anpassa hur texten återges i din app. Du kan ange standardkontrollegenskaper som FontFamily, FontSize, FontStyle, Foreground och CharacterSpacing för att ändra textens utseende. Du kan också använda infogade textelement och typografianslutna egenskaper för att formatera texten. De här alternativen påverkar bara hur RichTextBlock visar texten lokalt, så om du kopierar och klistrar in texten i en RTF-kontroll tillämpas till exempel ingen formatering.

Inlinjeelement

Microsoft.UI.Xaml.Documents-namnområdet innehåller en mängd infogade textelement som du kan använda för att formatera texten, till exempel Fetstil, Kursiv, Run, Span och LineBreak. Ett vanligt sätt att tillämpa formatering på textavsnitt är att placera texten i ett Kör- eller Span-element och sedan ange egenskaper för elementet.

Här är ett stycke med den första frasen som visas i fet, blå, 16pt text.

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

Typografi

De bifogade egenskaperna för klassen Typography ger åtkomst till en uppsättning egenskaper för Microsoft OpenType-typografi. Du kan ange de här bifogade egenskaperna antingen på RichTextBlock eller på enskilda infogade textelement, som du ser här.

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

UWP och WinUI 2

API:er för den här kontrollen finns i namnområdet Windows.UI.Xaml.Controls .

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för den här kontrollen som använder rundade hörn. För mer information om hörnradien, se .

Relaterade artiklar

Textkontroller

För designers

• Riktlinjer för stavningskontroll
• Lägga till sökning
• Riktlinjer för textinmatning

För utvecklare (XAML)

• Textbox-klass
• PasswordBox-klass

För utvecklare (andra)

• String.Length-egenskap