Posts
80
Comments
214
Trackbacks
0
Silverlight for Windows Embedded tutorial (step 3)

After the first two tutorial steps were published on this blog I received many requests about using images inside a Silverlight for Windows Embedded application. This is the topic of this post.
To be able to load and use image files (jpegs,bmps,gifs) inside your application you should include the imaging library components in your OSDesign.
Those component are not included automatically when you add the XAML runtime (the runtime can run also without the imaging components, it will simply not load your images!).
To display an image inside your application user interface you have to use the image control of Silverlight.
This is a very simple XAML file that includes just an Image object and a button:


<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ImgTest.Page"
    Width="640" Height="480" x:Name="ImagePage">
    <Grid x:Name="LayoutRoot" Background="White">
        <Image Margin="17,25,25,103" x:Name="MyImage" Source="\Windows\img01.JPG"/>
        <Button Height="49" Margin="259,0,253,28" VerticalAlignment="Bottom" Content="Button" x:Name="MyButton" Click="OnClick"/>
    </Grid>
</UserControl>

The image object is named "MyImage" and the button is named "MyButton".

We also have an OnClick event handler for the Click event of the button.

We can create a new Win32 application inside platform builder.

Using the XAML2CPP we can generate some code for us.

We will just have to include "XAML2CPP.h" inside your main C++ source file to use the code that XAML2CPP created for us:

#include "XAML2CPP.h" 

We also have to include "XAML2CPP.rc" inside the rc file of our application to include the XAML code as a resource inside our application.

XAML2CPP has created a base class that we can use to implement our own class and handle the OnClick event:

class ImagePage : public TImagePage<ImagePage>  {  ...  }


In this sample we will just swap two images inside the image control each time you click on the button.
We have to declare a state flag (to be able to swap images) and two IXRBitmapImagePtr objects to store our bitmaps.

    bool state;          IXRBitmapImagePtr    img01;     IXRBitmapImagePtr    img02;   

A very simple constructor will reset the state:

    ImagePage()     {          state=false;          }  

The main initialization will be performed inside our Init method (it's not a good idea to put this kind of initialization code inside the constructor because some API calls may fail and you don't have a way to return an error code from a C++ constructor).

    virtual HRESULT Init(HINSTANCE hinstance,IXRApplication* app)          {             ...     } 

Inside our Init method we have to call the Init method of our base class (declared by XAML2CPP), and check its return code for errors:

        HRESULT retcode;                    if (FAILED(retcode=TImagePage<ImagePage>::Init(hinstance,app)))              return retcode;

We declared two IXRBitmapImagePtr objects but we still haven't initialized them.
To create a Silverlight for Windows Embedded object we should use the CreateObject method of the IXRApplication object:

        if (FAILED(retcode=app->CreateObject(IID_IXRBitmapImage,&img01)))              return retcode;         if (FAILED(retcode=app->CreateObject(IID_IXRBitmapImage,&img02)))              return retcode;

The we can load the bitmaps and store them inside the IXRBitmapImagePtr objects:

        if (FAILED(retcode=img01->SetUriSource(TEXT("\\Windows\\img01.jpg"))))                           return retcode;         if (FAILED(retcode=img02->SetUriSource(TEXT("\\Windows\\img02.jpg"))))              return retcode;

In the OnClick event handler we just have to swap the image displayed by the MyImage object and change the state flag:

    HRESULT OnClick(IXRDependencyObject* source,XRMouseButtonEventArgs* args)      {                    HRESULT retcode;                    if (FAILED(retcode=MyImage->SetSource(state?img01:img02)))                          return retcode;                   state=state?false:true;                  return S_OK;           }

The main function of this sample is quite simple and it's not much different for the WinMain functions of the previous samples (just the class name changes):

int WINAPI WinMain(HINSTANCE hInstance,                       HINSTANCE hPrevInstance,                       LPTSTR     lpCmdLine,                       int       nCmdShow)  {      if (!XamlRuntimeInitialize())              return -1;          HRESULT retcode;            IXRApplicationPtr app;          if (FAILED(retcode=GetXRApplicationInstance(&app)))          return -1;        ImagePage imagepage;        if (FAILED(imagepage.Init(hInstance,app)))          return -1;        UINT exitcode;        if (FAILED(imagepage.GetVisualHost()->StartDialog(&exitcode)))          return -1;        return 0;   }

You can download the full source code of this sample here:

http://cid-9b7b0aefe3514dc5.skydrive.live.com/self.aspx/.Public/ImageTest.zip

 

posted on Wednesday, November 18, 2009 9:54 AM Print
Comments
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Eddy
11/19/2009 2:54 PM
Hi Valter,
Thanks for your tutorial for Silverlight for Windows Embedded. your tutorial and ur effort make me encourage to learn silerlight. really thanks.
and i really expect to see your further tutorial. also im a subscriber for it.

with your tutorial, i have tried to make 'ListBox' in order to implement UX likewise iPod. but it's not easy for me.
can i expect to how to handle ListBox on the next tutorial ?
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Rj
12/1/2009 4:32 AM
im relatively new to CE and silverlight and your 3-part tutorial really helped me to understand. thanks Valter!

i still need to setup my system to see how this works.
Gravatar
# Performance of Silverlight for Windows Embedded
Winter
12/1/2009 8:58 AM
Hi, thanks for the tutorial. Do you have information about the performance of Silverlight for Windows Embedded?

Thanks,

Winter
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Oliver
12/10/2009 1:10 AM
Hey Valter,

these are great tutorials to get started with Silverlight for Windows Embedded. I'm trying to develop my Silverlight application with Visual Studio 2008. There does not seem to be a platform builder for this VS version, so I decided to export an SDK of my OSDesign to be able to develop the application only. My problem is, that not all header files seem to be included in the SDK. For example pwinuser.h is missing for some reason. Should it be part of the SDK? If not, from where should I include it?

Thanks for your help!
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
12/15/2009 12:59 AM
To Winter:

Performances may vary from platform to platform. Silverlight for Windows Embedded supports hardware acceleration and if that is supported by your BSP performances can be greatly improved also on not-so-fast processors.

to Oliver:

you may need to add some files to your SDK copying them from WINCE600\PUBLIC\OAK\INC. Inside the SDK options dialog you can find a tab that allows you to add some files to the SDK. Place them in the inc directory and you'll be able to build your code in VS2008.
good luck!
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Dhanesh
1/4/2010 9:16 PM
hi
thanx for toutorial.
I have configured acording to this example and even run the "ImageTest" project ,but the image is not displayed.....
and after building the OSImage it shows
................
Error 5 Error: Could not find file 'E:\WINCE600\OSDesigns\LGOSDesign\LGOSDesign\RelDir\TheEmulatorBSP_ARMV4I_Debug\img01.jpg' on disk
**************
what to do??? Please help
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Rj
2/27/2010 6:19 PM
This is great work Valter! Please allow me a few questions.

When you said "...you should include the imaging library components in your OSDesign.", does this mean I need to add the image files (jpg,bmp,png) in the OSDesign? Please pardon my inexperience.

I also found this function in MSDN but try as I might, I couldn't make it work. Would you show us how to make this work.

IXRApplication::LoadImageFromFile http://msdn.microsoft.com/en-us/library/ee503929.aspx

Thanks in advance!
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
3/1/2010 12:26 AM
Hi Rj,
to be able to load and display images you should add the imaging components inside your OS image by selecting them from the Catalog.
If you go to the catalog window (choose view\other windows\catalog in Visual Studio) you can type "imaging" in the search box and find the list of components related to the different image formats (gif,jpg etc.). Select the ones that you need inside your application.
The images (bitmaps) can be included in the OS image or loaded from a mass-storage device.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Urmik
4/7/2010 8:42 PM
Hi valter
Thanks for the tutorial...I have made one xaml file that contains more than one images from Expression bland..I took new subproject and i added my xaml file as a resources in that.Now with help of ur XAML2CPP tool i got different 5 files.Than i copied those 5 files in my subproject as well as images.I have written cpp code and include xaml2cpp.rc in my rc file.
but in that i got 2 files in resources and after build i got following error
pwinuser.h file is missing
and my application .exe is not made.
I checked gesture support as well as those file in both places as u mentioned in ur previous blog. but still pwinuser.h error is there...please help...thanks
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
4/28/2010 11:23 PM
Ciao Urmik,
pwinuser.h is not part of the SDK. It should be included from the WINCE600\PUBLIC\COMMON\OAK\INC directory of your Windows CE install. If you don't have platform builder you should ask this file to someone who has PB installed on his machine (maybe the people that develop the device that you are using).
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Marie
4/30/2010 3:25 AM
Can you help with an explanation please? When I copy the XAML from this post to a new Blend2 project, then test it, the IDE gives an error regarding the .cs file. On your 2 previous tutorials, this did not happen. I suspect there is something about the image specification in the XAML that may be causing this error. I use Blend2 to run your tutorial XAML files and then take them to WIN 6.0 R3 using your XAML2CPP tool. This process helps me to get a complete understanding. Please help.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
5/4/2010 3:48 AM
Ciao Marie,
this may happen because I put some event handler names in the XAML and those are not implemented in the .cs code generated by blend. Can you post the full error message?
You can also use other XAML editor like Kaxaml to view the XAML code.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Marie
5/27/2010 10:31 AM
Sorry for the delay...here is the full error message:
Build project: ImageTest.sln, Targets: Build
__________________________________________________
Project "T:\Blend\ImageTest\ImageTest\ImageTest.sln" (Build target(s)):

__________________________________________________
Project "T:\Blend\ImageTest\ImageTest\ImageTest.sln" is building "T:\Blend\ImageTest\ImageTest\ImageTest\ImageTest.csproj" (default targets):

c:\WINDOWS\Microsoft.NET\Framework\v3.5\Csc.exe /noconfig /nowarn:1701,1702 /nostdlib+ /errorreport:prompt /warn:4 /define:DEBUG;TRACE /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\mscorlib.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Core.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Windows.Browser.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Windows.dll" /reference:"c:\Program Files\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\System.Xml.dll" /debug+ /debug:full /optimize- /out:obj\Debug\ImageTest.dll /resource:obj\Debug\ImageTest.g.resources /target:library App.xaml.cs Page.xaml.cs Properties\AssemblyInfo.cs T:\Blend\ImageTest\ImageTest\ImageTest\obj\Debug\App.g.cs T:\Blend\ImageTest\ImageTest\ImageTest\obj\Debug\Page.g.cs
Page.xaml.cs(18,4): error CS0103: The name 'InitializeComponent' does not exist in the current context
Done building project "ImageTest.csproj" -- FAILED.
Build failed.

Yes, it looks like a .cs code problem and I think I understand how to correct it but please respond for verification.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
5/27/2010 11:14 PM
@marie
I changed those XAML files outside of blend and this may lead to problems with the C# project that blend mantains for the XAML file you are editing.
On Windows CE XAML is currently supported only in native applications, so I don't need to build the C# code. If you want to share your XAML between CE and the desktop it's better to do all your editing in blend so you'll leverage its integration with Visual Studio for the .NET (PC) side.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
LuZengHui
6/1/2010 7:27 PM
the content is very good and usefull!
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Jiang Qibing
6/3/2010 1:59 AM
Hello,I'm a Chinese student and I'm sorry I'm not good at English.I want to know how I can display a image which is CEBLOB type in my program in a Silverlight for Embedded UI.I want to display images stored in EDB.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
6/14/2010 10:41 PM
@Jiang
This depends on how you store your images inside the database.
If you are able to convert them to a Windows Bitmap (HBITMAP) you can use the SetBitmapSource method of the IXRBitmapImage to create image objects that can be used inside a Silverlight for Windows Embedded application.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
George
6/25/2010 2:50 AM
Hi all
Thanks Valter for the great tutorial!
I would like to ask how can I display a larger image?
I tried the tutorial using a 500 KB JPG file and it could not be displayed

Thank you in advaced
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
8/9/2010 7:45 PM
@George
Did you try with smaller jpg images and they work?
The image size is bigger than the size of your device screen?
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Zhanghu
8/4/2011 5:10 PM
Hi Valter,

Thank you for these great tutorials!

I'm new to silverlight, I'm developing a camera application under windows CE 6. I used to paint the camera image data onto the window handle with StretchDIBits function, now I want to use silverlight for GUI, but I don't know how to do that. I'm already done some experiment, now I can show a bmp with IXRImage control, but it's too slow to transfer DIB data(come from camera) to HBITMAP, then show it with IXRImage control.
Gravatar
# re: Silverlight for Windows Embedded tutorial (step 3)
Valter Minute
8/4/2011 6:47 PM
@Zhanghu
If you don't need to apply transformations to your camera image (and I suppose that this is not the case), you can implement a Win32 control (using StrechDIBits to update it) and embed it inside your Silverlight UI.
Here
http://technet.microsoft.com/en-au/library/ee502772(WinEmbedded.60).aspx
you can find some informations about how to implement this control.
It will have some limitations, it can't be transformed (rotated etc.) and it can't use transparencies (it will be rendered on top of other controls), but this may be OK for a camera video stream.

Post Comment

Title *
Name *
Email
Comment *  
Verification
Toradex logo

Cookies in Use
Tag Cloud