Skip to content

Instantly share code, notes, and snippets.

@ceee
Created June 16, 2014 20:14
Show Gist options
  • Save ceee/f8ea78b531267a54fd50 to your computer and use it in GitHub Desktop.
Save ceee/f8ea78b531267a54fd50 to your computer and use it in GitHub Desktop.
Render UIElement to PNG
<Page
x:Class="BitmapToPNGTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BitmapToPNGTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<StackPanel Orientation="Vertical">
<Button Content="Render hidden UIElement to PNG" Click="RenderHiddenElement_Click" HorizontalAlignment="Center"
Padding="20" />
<Button Content="Render visible UIElement to PNG" Click="RenderVisibleElement_Click" HorizontalAlignment="Center"
Padding="20" />
</StackPanel>
<local:TestControl x:Name="VisibleTestControl" Width="300" Height="300" VerticalAlignment="Bottom" Margin="0 0 0 40" />
</Grid>
</Page>
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Graphics.Imaging;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=391641
namespace BitmapToPNGTest
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
private async void RenderHiddenElement_Click(object sender, RoutedEventArgs e)
{
// create UIElement
FrameworkElement element = new TestControl();
int width = 300;
int height = 300;
element.Width = width;
element.Height = height;
element.UpdateLayout();
element.Measure(new Size(width, height));
element.UpdateLayout();
element.Arrange(new Rect(0, 0, width, height));
element.UpdateLayout();
element.InvalidateArrange();
element.InvalidateMeasure();
element.UpdateLayout();
var bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(element);
await SavePngAsync(bitmap);
}
private async void RenderVisibleElement_Click(object sender, RoutedEventArgs e)
{
// get UIElement
FrameworkElement element = VisibleTestControl;
int width = 300;
int height = 300;
element.Width = width;
element.Height = height;
element.UpdateLayout();
element.Measure(new Size(width, height));
element.UpdateLayout();
element.Arrange(new Rect(0, 0, width, height));
element.UpdateLayout();
element.InvalidateArrange();
element.InvalidateMeasure();
var bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(element);
await SavePngAsync(bitmap);
}
private async Task SavePngAsync(RenderTargetBitmap renderTargetBitmap)
{
WriteableBitmap writeableBitmap = new WriteableBitmap((int)renderTargetBitmap.PixelWidth, (int)renderTargetBitmap.PixelHeight);
using (Stream stream = writeableBitmap.PixelBuffer.AsStream())
{
BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream.AsRandomAccessStream());
byte[] pixels = (await renderTargetBitmap.GetPixelsAsync()).ToArray();
encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, (uint)renderTargetBitmap.PixelWidth, (uint)renderTargetBitmap.PixelHeight, 96.0, 96.0, pixels);
await encoder.FlushAsync();
}
}
}
}
<UserControl
x:Class="BitmapToPNGTest.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BitmapToPNGTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="400"
d:DesignWidth="400">
<Grid Background="#00b4a8">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="White" Text="TestControl" FontSize="28" />
</Grid>
</UserControl>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment