Windows Phone - Texture (4)

Hello


One of the most common object in Windows Phone application is bitmap.
The image element displays bitmap.

Most popular bitmap format are :

• JPEG
• PNG
• GIF

Note that Silverlight supports only JPEG and PNG !!

The image class

Image is described by Image class.
Image element in XAML is decribed by <Image .../> in general <Image Source="uri"/> where source is the URI of the bitmap file.
URI is a representation of a resource on the internet or intranet.


I will demonstrate two use case regarding the resource location  :

• Bitmap reside localy 
• Bitmap reside on the internet

Local bitmap


Add directory to the project

Give the new directory a name -  Image.


Next add to Image directory bitmap file name LocalBitmap.jpg

A directory name Image was created at the same level as the project file and a LocalBitmap.jpg reside inside it.

The project looks now like this :

Now mark LocalBitmap.png, right click mouse, choose properties and change "Build Action" to Content and "Copy to Output Directory" to "Copy if newer".

Now after compilation this will copy LocalBitmap.jpg to the directory Image which reside on  the same directory as the xap file

Add to the MainPag.xaml the image element which point locally to the bitmap file

Run the application to get

LocalBitmap.zip


Internet Bitmap


Here the bitmap file reside somwhere on the internet.
So simple add the following image element.

Run the application and the result is :

InternetBitmap.zip

Dynamic bitmap load


The samples before handled static loading of bitmap i.e. the bitmap file path was written in the XAML and was known before the application was loaded. It was handled very well by Image.Source type ImageSource which is abstract class. If you think a little about these two samples you must admire the work done here. By simply adding a path into an Image element on the XAML you get a display of local bitmap file in one sample and a display of a bitmap file which reside on the internet (and naturally involve network API to access it) on a second sample.


When you need to do this dynamically it looks like this :

First i add two image elements to MainPage.xaml



Then i use BitmapSource which inherits ImageSource to load the bitmaps.
Bitmap loading is activated after a tap and handled by the static touch handler - this was covered in previous post (Touch of Touch (3))

Note that  LocalBitmap.jpg is added to the project  as done in LocalBitmap.zip

DynamicLoadBitmap.zip


Nathan