avancerad textredigeringsruta

Du kan använda en RichEditBox-kontroll för att ange och redigera RTF-dokument som innehåller formaterad text, hyperlänkar, bilder, matematiska ekvationer och annat rtF-innehåll. Du kan göra en RichEditBox skrivskyddad genom att ange egenskapen IsReadOnly till true.

Är det här rätt kontroll?

Använd en RichEditBox för att visa och redigera textfiler. Du använder inte en RichEditBox för att hämta användarindata till din app på samma sätt som du använder andra standardrutor för textinmatning. I stället använder du den för att arbeta med textfiler som är separata från din app. Du sparar vanligtvis text som angetts i en RichEditBox i en .rtf fil.

Om det primära syftet med textrutan med flera rader är att skapa skrivskyddade dokument (till exempel blogginlägg eller innehållet i ett e-postmeddelande), och dessa dokument kräver RTF, använder du ett RTF-block i stället.
Använd en oformaterad textinmatningskontroll när du samlar in text som endast används och inte spelas upp på nytt för användarna.
Använd en indatakontroll för oformaterad text för alla andra scenarier.

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

Recommendations

När du skapar en rik text ruta, tillhandahåller du formatknappar och implementerar deras åtgärder.
Använd ett teckensnitt som överensstämmer med appens stil.
Gör textkontrollens höjd tillräckligt hög för att rymma typiska inmatningar.
Låt inte textinmatningskontrollerna växa i höjd medan användarna skriver.
Använd inte en textruta med flera rader när användarna bara behöver en enda rad.
Använd inte en RTF-kontroll om en oformaterad textkontroll är tillräcklig.

Examples

Denna rika redigeringsruta har ett rikt textdokument öppet i sig. Formaterings- och filknapparna är inte en del av den omfattande redigeringsrutan, men du bör tillhandahålla minst en minimal uppsättning formateringsknappar och implementera deras åtgärder.

En RTF-ruta med ett öppet dokument

Skapa en omfattande redigeringsruta

Viktiga API:er:RichEditBox-klass, dokumentegenskap, egenskapen IsReadOnly, egenskapen IsSpellCheckEnabled

Öppna WinUI 3-galleriappen och se RichEditBox i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

Som standard stöder RichEditBox stavningskontroll. Om du vill inaktivera stavningskontroll anger du egenskapen IsSpellCheckEnabled till false. Mer information finns i artikeln Riktlinjer för stavningskontroll .

Du använder dokumentegenskapen för RichEditBox för att hämta innehållet. Innehållet i en RichEditBox är ett ITextDocument-objekt , till skillnad från RichTextBlock-kontrollen, som använder Block-objekt som innehåll. ITextDocument-gränssnittet tillhandahåller ett sätt att läsa in och spara dokumentet i en dataström, hämta textområden, få den aktiva markeringen, ångra och göra om ändringar, ange standardformateringsattribut, och så vidare.

Det här exemplet visar hur du redigerar, läser in och sparar en RTF-fil (.rtf) i en RichEditBox.

<RelativePanel Margin="20" HorizontalAlignment="Stretch">
    <RelativePanel.Resources>
        <Style TargetType="AppBarButton">
            <Setter Property="IsCompact" Value="True"/>
        </Style>
    </RelativePanel.Resources>
    <AppBarButton x:Name="openFileButton" Icon="OpenFile"
                  Click="OpenButton_Click" ToolTipService.ToolTip="Open file"/>
    <AppBarButton Icon="Save" Click="SaveButton_Click"
                  ToolTipService.ToolTip="Save file"
                  RelativePanel.RightOf="openFileButton" Margin="8,0,0,0"/>

    <AppBarButton Icon="Bold" Click="BoldButton_Click" ToolTipService.ToolTip="Bold"
                  RelativePanel.LeftOf="italicButton" Margin="0,0,8,0"/>
    <AppBarButton x:Name="italicButton" Icon="Italic" Click="ItalicButton_Click"
                  ToolTipService.ToolTip="Italic" RelativePanel.LeftOf="underlineButton" Margin="0,0,8,0"/>
    <AppBarButton x:Name="underlineButton" Icon="Underline" Click="UnderlineButton_Click"
                  ToolTipService.ToolTip="Underline" RelativePanel.AlignRightWithPanel="True"/>

    <RichEditBox x:Name="editor" Height="200" RelativePanel.Below="openFileButton"
                 RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>

private async void OpenButton_Click(object sender, RoutedEventArgs e)
{
    // Open a text file.
    Windows.Storage.Pickers.FileOpenPicker open =
        new Windows.Storage.Pickers.FileOpenPicker();
    open.SuggestedStartLocation =
        Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;
    open.FileTypeFilter.Add(".rtf");

    Windows.Storage.StorageFile file = await open.PickSingleFileAsync();

    if (file != null)
    {
        try
        {
            Windows.Storage.Streams.IRandomAccessStream randAccStream =
        await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

            // Load the file into the Document property of the RichEditBox.
            editor.Document.LoadFromStream(Windows.UI.Text.TextSetOptions.FormatRtf, randAccStream);
        }
        catch (Exception)
        {
            ContentDialog errorDialog = new ContentDialog()
            {
                Title = "File open error",
                Content = "Sorry, I couldn't open the file.",
                PrimaryButtonText = "Ok"
            };

            await errorDialog.ShowAsync();
        }
    }
}

private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    Windows.Storage.Pickers.FileSavePicker savePicker = new Windows.Storage.Pickers.FileSavePicker();
    savePicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;

    // Dropdown of file types the user can save the file as
    savePicker.FileTypeChoices.Add("Rich Text", new List<string>() { ".rtf" });

    // Default file name if the user does not type one in or select a file to replace
    savePicker.SuggestedFileName = "New Document";

    Windows.Storage.StorageFile file = await savePicker.PickSaveFileAsync();
    if (file != null)
    {
        // Prevent updates to the remote version of the file until we
        // finish making changes and call CompleteUpdatesAsync.
        Windows.Storage.CachedFileManager.DeferUpdates(file);
        // write to file
        Windows.Storage.Streams.IRandomAccessStream randAccStream =
            await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);

        editor.Document.SaveToStream(Windows.UI.Text.TextGetOptions.FormatRtf, randAccStream);

        // Let Windows know that we're finished changing the file so the
        // other app can update the remote version of the file.
        Windows.Storage.Provider.FileUpdateStatus status = await Windows.Storage.CachedFileManager.CompleteUpdatesAsync(file);
        if (status != Windows.Storage.Provider.FileUpdateStatus.Complete)
        {
            Windows.UI.Popups.MessageDialog errorBox =
                new Windows.UI.Popups.MessageDialog("File " + file.Name + " couldn't be saved.");
            await errorBox.ShowAsync();
        }
    }
}

private void BoldButton_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
        charFormatting.Bold = Windows.UI.Text.FormatEffect.Toggle;
        selectedText.CharacterFormat = charFormatting;
    }
}

private void ItalicButton_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
        charFormatting.Italic = Windows.UI.Text.FormatEffect.Toggle;
        selectedText.CharacterFormat = charFormatting;
    }
}

private void UnderlineButton_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
        if (charFormatting.Underline == Windows.UI.Text.UnderlineType.None)
        {
            charFormatting.Underline = Windows.UI.Text.UnderlineType.Single;
        }
        else {
            charFormatting.Underline = Windows.UI.Text.UnderlineType.None;
        }
        selectedText.CharacterFormat = charFormatting;
    }
}

Använda en omfattande redigeringsruta för matematiska ekvationer

RichEditBox kan visa och redigera matematiska ekvationer med UnicodeMath. Ekvationerna lagras och hämtas i MathML 3.0-format .

RichEditBox-kontrollen tolkar som standard inte indata som matematik. Om du vill aktivera matematiskt läge anropar du SetMathMode på egenskapen TextDocument och skickar värdet RichEditMathMode.MathOnly (om du vill inaktivera matematiskt läge anropar du SetMathMode men skickar värdet NoMath).

richEditBox.TextDocument.SetMathMode(Microsoft.UI.Text.RichEditMathMode.MathOnly);

På så sätt kan UnicodeMath-indata identifieras automatiskt och konverteras till MathML i realtid. Om du till exempel anger 4^2 konverteras till 4² och 1/2 konverteras till 1/2. Se WinUI 3-galleriappen för fler exempel.

Om du vill spara matematikinnehållet i en omfattande redigeringsruta som en MathML-sträng anropar du GetMathML.

richEditBox.TextDocument.GetMathML(out String mathML);

Om du vill ange matematikinnehållet i en omfattande redigeringsruta anropar du SetMathML och skickar in en MathML-sträng.

Välj rätt tangentbord för textkontrollen

För att hjälpa användarna att ange data med hjälp av pektangentbordet eller soft input panel (SIP) kan du ange textkontrollens indataomfång så att det matchar den typ av data som användaren förväntas ange. Standardlayouten för tangentbord är vanligtvis lämplig för att arbeta med RTF-dokument.

Mer information om hur du använder indataområden finns i Använd indataområde för att ändra skärmtangentbordet.

Feedback

Var den här sidan till hjälp?

Last updated on 2026-02-25