question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Render XAML to PNG

See original GitHub issue

Hi! I’m trying use Avalonia to render XAML to image file.

Code (copy-paste from TestBase):

var xaml = AvaloniaXamlLoader.Parse(File.ReadAllText(@"stamp.xaml"));
SkiaPlatform.Initialize();
var target = xaml as Grid;
var pixelSize = new PixelSize((int)target.Width, (int)target.Height);
var size = new Size(target.Width, target.Height);
var dpiVector = new Vector(96, 96);
using (var renderBitmap = new RenderTargetBitmap(pixelSize, dpiVector))
{
	target.Measure(size);
	target.Arrange(new Rect(size));
	renderBitmap.Render(target);
	renderBitmap.Save("result.png");
}

XAML content:

<Grid
	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"
	Width="250"
	Height="100"
	Margin="1"
	VerticalAlignment="Center">
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="120"/>
		<ColumnDefinition Width="20"/>
		<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<Border>
		<TextBlock x:Name="RegistrationDate" FontFamily="Arial" FontSize="14" HorizontalAlignment="Center">Text</TextBlock>
	</Border>
	<Border Grid.Column="2">
		<TextBlock x:Name="RegistrationNumber" FontSize="12">[ХХ-012345]</TextBlock>
	</Border>
</Grid>

In designer xaml rendered correctly: image

But result image rendered with low quality: image

Increasing font size to 50 can increase quality: image

How i can render xaml “like a designer” by code on Linux?

Avalonia version 0.8.0, .NET Core 2.2

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Gillibaldcommented, Apr 24, 2019

You should make sure to use the same font on all systems when you want a similar result everywhere.

0reactions
ghelyarcommented, Apr 11, 2023

I can confirm that setting RenderOptions.TextRenderingMode="Antialias" does work with version 11.0.999-cibuild0032897-beta , although it has to be set on every TextBlock, it does not inherit like WPF’s System.Windows.Media.TextOptions.TextRenderingModeProperty, so you can’t just set it on the root element, which is annoying but not a deal breaker for us.

avalonia_out

Read more comments on GitHub >

github_iconTop Results From Across the Web

Saving XAML custom control as a jpg/png file
You can save a Framework element to PNG by using this function: public void ExportToPng(Uri path, FrameworkElement element) { if (path ...
Read more >
Convert your XAML file to PNG
A free and fast online tool to convert your XAML (Extensible Application Markup Language) file to a .PNG (Portable Network Graphics) file.
Read more >
Free Online XAML to PNG Converter
Our XAML imaging tool will accurately convert your XAML file into a PNG image file using our high quality internal 2D rendering to...
Read more >
Convert XAML Vector Graphic to PNG
How to convert XAML to PNG with the Sample Data ... Download the XAMLtoPNG.zip file and store it in a dedicated folder. Create...
Read more >
Convert Xaml To Png
Convert Xaml To Png · Download and install the latest version of Filestar. · Right click on one or more Xaml file(s) on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found