Reader Level:
Article

Rendering Image Using Pixel Buffer in Windows Store Apps

By Gaurav Gupta on Nov 22, 2012
In this article I will how you how to load an image using Pixel Buffer or PBuffer by using WritableBitmap in Windows Store Apps using XAML.

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.

File-Open-Picker-In-Windows-STore-apps.jpg

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

Load-Image-Using-Pixel-Buffer-In-Windows-STore-apps.jpg

Gaurav Gupta

I am a student and Developer. I like to explore new technologies, mostly working on web development.

COMMENT USING