Render XAML to PNG
See original GitHub issueHi! 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:
But result image rendered with low quality:
Increasing font size to 50 can increase quality:
How i can render xaml “like a designer” by code on Linux?
Avalonia version 0.8.0, .NET Core 2.2
Issue Analytics
- State:
- Created 4 years ago
- Comments:12 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You should make sure to use the same font on all systems when you want a similar result everywhere.
I can confirm that setting
RenderOptions.TextRenderingMode="Antialias"
does work with version11.0.999-cibuild0032897-beta
, although it has to be set on everyTextBlock
, it does not inherit like WPF’sSystem.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.