RenderTargetBitmap Captures Blurry Text Without Background Set on Root Control

[lindexi]

Describe the bug

When using RenderTargetBitmap to capture a screenshot of a control in Avalonia, the resulting image contains blurry text if the root-level child control does not have a background color set. However, when a white background is explicitly applied to the root-level child control, the captured image renders clear and sharp text.

To Reproduce

1. Create a new Avalonia application.
2. In MainView.axaml, add a TextBlock with the text "Hello World" and two buttons: TakeSnapshotButton and TakeSnapshotWithFixButton.
3. Configure the following button behaviors:
   • TakeSnapshotButton: Captures a screenshot using RenderTargetBitmap and saves it as 1.png.
   • TakeSnapshotWithFixButton: Sets the RootGrid's background color to white before capturing the screenshot using RenderTargetBitmap, saving it as 2.png.

Example code:

MainView.axaml:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:bunaylenerkeLailurlairfea="clr-namespace:KarhelearkuDemkunalhaw"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="KarhelearkuDemkunalhaw.Views.MainView">
  <Grid x:Name="RootGrid">
      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Hello World"></TextBlock>

      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,300,10,10">
          <Button x:Name="TakeSnapshotButton" Click="TakeSnapshotButton_OnClick"
                  ToolTip.Tip="Take Snapshot to 1.png file. And you can find the blur text.">Take Snapshot</Button>
          <Button x:Name="TakeSnapshotWithFixButton" Margin="10,0,10,0" Click="TakeSnapshotWithFixButton_OnClick"
                  ToolTip.Tip="Take Snapshot to 2.png file. And you can find the clear text.">Take Snapshot with fix</Button>
      </StackPanel>
  </Grid>
</UserControl>

MainView.axaml.cs:

public partial class MainView : UserControl
{
    public MainView()
    {
        InitializeComponent();
    }

    private void TakeSnapshotButton_OnClick(object? sender, RoutedEventArgs e)
    {
        var mainView = this;

        var renderTargetBitmap =
            new RenderTargetBitmap(new PixelSize((int) mainView.Bounds.Width, (int) mainView.Bounds.Height), new Vector(96, 96));
        renderTargetBitmap.Render(mainView);

        var file = Path.Join(AppContext.BaseDirectory, "1.png");
        renderTargetBitmap.Save(file, 100);
    }

    private void TakeSnapshotWithFixButton_OnClick(object? sender, RoutedEventArgs e)
    {
        RootGrid.Background = Brushes.White;
        Dispatcher.UIThread.InvokeAsync(() =>
        {
            var mainView = this;

            var renderTargetBitmap =
                new RenderTargetBitmap(new PixelSize((int) mainView.Bounds.Width, (int) mainView.Bounds.Height), new Vector(96, 96));
            renderTargetBitmap.Render(mainView);

            var file = Path.Join(AppContext.BaseDirectory, "2.png");
            renderTargetBitmap.Save(file, 100);

            RootGrid.Background = Brushes.Transparent;
        });
    }
}

You can find all my project code in https://github.com/lindexi/lindexi_gd/tree/86ff9a4bb65e2775fb71d34f34283b68b5ab1605/AvaloniaIDemo/KarhelearkuDemkunalhaw

Run the project and click both buttons in sequence:

• Clicking TakeSnapshotButton generates 1.png.
• Clicking TakeSnapshotWithFixButton generates 2.png.

Observe the differences between the generated images.

• 1.png: The text appears blurry (see below).

- **`2.png`**: The text is rendered clearly after setting a white background on the root container.

Expected behavior

The text should render clearly in both cases, regardless of whether a background color is explicitly set on the root-level child control.

Avalonia version

11.3.2

OS

Windows

Additional context

Reference: #2464

[maxkatz6]

IIRC, that by design with cleartype text rendering - it cannot work well on transparent background, cc @Gillibald
You can use RenderOptions.TextRenderingMode to disable that - more importantly you can set it for RenderTargetBitmap, and remove after.

[lindexi]

@maxkatz6 Thank you very much. Do you means

        var originMode = RenderOptions.GetTextRenderingMode(mainView);
        RenderOptions.SetTextRenderingMode(mainView, TextRenderingMode.Antialias);
        var renderTargetBitmap =
            new RenderTargetBitmap(new PixelSize((int) mainView.Bounds.Width, (int) mainView.Bounds.Height), new Vector(96, 96));
        renderTargetBitmap.Render(mainView);
        RenderOptions.SetTextRenderingMode(mainView, originMode);

?