Everything is image!!!

...every thing is image...image is everything...One of the most popular tag line said by some anonymous philosopher, holds its ground everywhere, even for our dude Silverlight. In addition to data, silver(nick name for silverlight, both short and cool at the same time) did understand how much image hold its importance in this cruel world. It is because of this, Silverlight provides so many classes for image processing. In this post we are going to look at some of them. Basically what we are going to do is to create a project where we take the snap of a control and store it in an object. In the next post or so, we will be uploading that object's content to a file on our hard drive.
So without wasting time in taking, let's get started,  my mom is already scolding me to go to the market. 

First step is to create a silverlight application, 'UploadingImage'.

Next is to create scenario that what exactly we'll be going to do. Actually what I am thinking is to keep it simple and sweet just like my imaginary girlfriend. Okay jokes apart, so we'll be having two controls one image control and one canvas in xaml and we'll take snapshot of canvas, create its stream and using that stream we will create an image and assign it to the image control. Sounds pretty cool huh! so lets get started.

Here's what my xaml of the user control looks like.

 <UserControl x:Class="Uploading.MainPage"  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   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"  
   mc:Ignorable="d"  
   d:DesignHeight="300" d:DesignWidth="400">  
   <Grid x:Name="LayoutRoot" Background="White">  
     <Grid.ColumnDefinitions>  
       <ColumnDefinition Width="198*" />  
       <ColumnDefinition Width="202*" />  
     </Grid.ColumnDefinitions>  
     <Grid.RowDefinitions>  
       <RowDefinition Height="253*" />  
       <RowDefinition Height="47*" />  
     </Grid.RowDefinitions>  
     <Canvas Grid.Column="1" Background="BurlyWood" Name="Canvals1">  
       <Rectangle Fill="Black" Width="150" Height="200"/>  
       <Ellipse Fill="Aqua" Width="100" Height="100" Canvas.Left="102" Canvas.Top="147"></Ellipse>  
       </Canvas>  
     <Image Name="image2" Stretch="Fill" />  
     <Button Content="Snap" Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="60,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" />  
   </Grid>  
 </UserControl>  

I've created canvas here containing a rectangle filled with black and an ellipse filled with Aqua color. The snap of how this xaml rendered as design is shown below

On the right is how the canvas rendered and on the left we have the image control where we will display the snapped image. I also have taken a button below, which will take snap of the canvas when clicked. I initially thought to take the snap of a beautiful girl instead of the ugly canvas, but then I drop the idea as my mom was in the room whole time. :)

Okay, all set to go, just we need to write code to take snap, the sole of everything.

Here is one important note, in WPF we gets the PngBitmapEncoder class in 

System.Windows.Media.Imaging namespace, but in silverlight it didn't support that class :/ Poor fellow silver :( Well though, we have another way, what we can do is to use Telerik.Windows.Media.Imaging namespace were the class is accessible in silverlight too. 

So first of all we will create the writeable bitmap of the frame work element we are using, here it's canvas. So add the following function in your code behind file. In my case it's mainpage.cs.

     private static BitmapSource GetBitmapSource(FrameworkElement element)  
     {  
       Size imageSize = GetImageSize(element);  
       var writeableBitmap = new WriteableBitmap((int)imageSize.Width, (int)imageSize.Height);  
       writeableBitmap.Render((UIElement)element, (Transform)null);  
       writeableBitmap.Invalidate();  
       return (BitmapSource)writeableBitmap;  
     }  
     internal static Size GetImageSize(FrameworkElement element)  
     {  
       return new Size(element.ActualWidth, element.ActualHeight);  
     }  

The GetBitmap function returns the BitmapSource. Finally we will encode that source and create stream from it. Following function will do that for us.

 [SuppressMessage("Microsoft.Security", "CA2122:DoNotIndirectlyExposeMethodsWithLinkDemands")]  
     internal static void Export(FrameworkElement element, Stream stream, BitmapEncoder encoder)  
     {  
       BitmapSource elementImage = GetBitmapSource(element);  
       encoder.Frames.Add(BitmapFrame.Create(elementImage));  
       encoder.Save(stream);  
     }  

Okay our all beautiful functions are ready. Now in the click event of the button Snap, we will create an instance of Memory stream. Basically what it does is to allocate a memory to the object where the object can store the incoming stream. Next create an instance of Bitmap Image and pass the stream to it so as to create an image from the stream.
And finally the biggy! set our image control's source to the Bitmap image instance.

 private void button1_Click(object sender, RoutedEventArgs e)  
     {  
       MemoryStream stream = new MemoryStream();  
       Export(Canvals1,stream,new PngBitmapEncoder());  
       BitmapImage img = new BitmapImage();  
       img.SetSource(stream);  
       image2.Source = img;  
     }  

Bingo! we are done. Execute the code F5 is the key. If everything is fine and if it's your day, the code will compile without any error. Yo mamma! mine did. It's my day...it's my day...
Now to take the snapshot, click on the snap button below. Hell yeah! snapshot taken. Everything worked fine. In the next post we will be uploading this snapped image to the hard drive by converting the stream to bytes. I promise next time it would be the pic of a beautiful girl, instead of the ugly looking creepy canvas...I know for that I have to look for a room where mom would not come :)