Rendering Image Using Pixel Buffer in Windows Store Apps

This article describes an alternative way to load the image into a WriteableBitmap using FileOpenPicker in Windows Store Apps using XAML.

Introduction

Here I will show you how to load an image using PixelBuffer. The Pixel buffer or pBuffer is an extension to OpenGL which allows off-screen rendering. It expands upon Vertex Buffer Objects (VBO) in order to store not only vertex data but also pixel data into the buffer objects.

In my previous article I will show you how to load an image using File Stream in Windows Store Apps. You can see it from here:

http://www.c-sharpcorner.com/UploadFile/99bb20/loading-image-from-file-stream-in-windows-store-apps/

Now let's start to load an image using a PixelBuffer object.

Step 1

Create a Blank Windows Store Apps using XAML.

Step 2

Here is code of XAML markup for UI.

<Grid x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Button x:Name="Button1" Content="Select image..." Margin="0,0,10,0" Grid.Row="2"Grid.Column="0" />
<Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
<Image x:Name="Image1" Stretch="None" />
</Grid>
</Grid>

Step 3

Add some namespace to use the libraries.

using System.Threading.Tasks;

using Windows.Graphics.Imaging;

using Windows.Storage.Pickers;

using Windows.Storage;

using Windows.Storage.Streams;
using Windows.UI.Xaml.Media.Imaging;

Step 4

Now, create an object of FileOpenPicker to pick the file from the system, also add the filter type for the file.

FileOpenPicker picker = new FileOpenPicker();

picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

picker.FileTypeFilter.Add(".png");

picker.FileTypeFilter.Add(".jpeg");

picker.FileTypeFilter.Add(".jpg");

picker.FileTypeFilter.Add(".bmp");

Step 5

Pick the file using the PickSingleFileAsync() method, as in:

StorageFile file = await picker.PickSingleFileAsync();

Step 6

Check if the file is null. If not then open the file in stream.

if (file != null)

{

using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))

}

Now Scale the image to the appropriate size.

BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);
BitmapTransform transform = new BitmapTransform()
{
ScaledWidth = Convert.ToUInt32(WriteableBitmap.PixelWidth),
ScaledHeight = Convert.ToUInt32(WriteableBitmap.PixelHeight)
};

Load an image into WriteableBitmap by decoding it into a byte stream.

PixelDataProvider pixelData = await decoder.GetPixelDataAsync
(

BitmapPixelFormat.Bgra8,BitmapAlphaMode.Straight,transform,ExifOrientationMode.IgnoreExifOrientation,

ColorManagementMode.DoNotColorManage
);

byte[] sourcePixels = pixelData.DetachPixelData();

Open a stream to copy the image contents to the WriteableBitmap's pixel buffer.

using (Stream stream = WriteableBitmap.PixelBuffer.AsStream())

{

await stream.WriteAsync(sourcePixels, 0, sourcePixels.Length);

}

Now, Redraw the WriteableBitmap.

WriteableBitmap.Invalidate();

Step 7

Full code of the .cs file:

using Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Navigation;

using Windows.UI.Xaml.Media.Imaging;

using System;

using System.Threading.Tasks;

using Windows.Graphics.Imaging;

using Windows.Storage.Pickers;

using Windows.Storage;

using Windows.Storage.Streams;

using Windows.System.Threading;

namespace Images

{

public sealed partial class LoadImage : Page
{

public Scenario4()

{

this.InitializeComponent();

}

protected async override void OnNavigatedTo(NavigationEventArgs e)

{

}

private WriteableBitmap WriteableBitmap;

private async void LoadImageUsingPixelBuffer_Click(object sender, RoutedEventArgs e)

{

FileOpenPicker picker = new FileOpenPicker();

picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

picker.FileTypeFilter.Add(".png");

picker.FileTypeFilter.Add(".jpeg");

picker.FileTypeFilter.Add(".jpg");

picker.FileTypeFilter.Add(".bmp");

StorageFile file = await picker.PickSingleFileAsync();

if (file != null)

{

using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))

{

BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);

BitmapTransform transform = new BitmapTransform() {

ScaledWidth = Convert.ToUInt32(WriteableBitmap.PixelWidth),

ScaledHeight = Convert.ToUInt32(WriteableBitmap.PixelHeight)};

PixelDataProvider pixelData = await decoder.GetPixelDataAsync(

BitmapPixelFormat.Bgra8,BitmapAlphaMode.Straight,transform,ExifOrientationMode.IgnoreExifOrientation,
ColorManagementMode.DoNotColorManage);

byte[] sourcePixels = pixelData.DetachPixelData();

using (Stream stream = WriteableBitmap.PixelBuffer.AsStream())

{

await stream.WriteAsync(sourcePixels, 0, sourcePixels.Length);

}

}

WriteableBitmap.Invalidate();

}

}

}

}

Step 8

Now, run the app and see the output.

Select the image using FileOpenPicker contract.



You will see the image displayed on the screen using the PixelBuffer object.