Created
June 16, 2014 20:14
-
-
Save ceee/f8ea78b531267a54fd50 to your computer and use it in GitHub Desktop.
Render UIElement to PNG
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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