Ioan Lazarciuc's Weblog I program, therefore I exist.

2Aug/0861

Creating a Vista Sidebar Gadget Using Microsoft Silverlight

Introduction

Some while ago I did a post on how to create a Vista Sidebar gadget using JavaScript. I also mentioned that I tried to create the gadget using XBAP or Silverlight, but due to the limitations in those technologies at that time, I decided that I had to give up on too much of the Sidebar gadget specific functionality (flyouts, cross domain data retrieval).

More than 6 months have passed since then and now I am pleased to announce that I've changed my opinion regarding Silverlight Sidebar gadgets. Due to the fact that the Silverlight technology has matured a lot (version 2.0 beta 2 is now available), Sidebar gadgets can be developed using this technology, without sacrificing any Sidebar gadget specific functionality. This is due to the fact that there is full interoperability between Silverlight and the JavaScript code. Also, cross domain calls are now allowed in Silverlight, so retrieving data is no longer an issue. Furthermore, it has been greatly enhanced due to the fact that one can consume WCF services using Silverlight.

Getting Started

The first step is to have a look over the "classic" way of developing Sidebar gadgets. Even though most of the "hard work" can now be done in Silverlight, the "wiring", the guts of the whole gadget are still the classic ones, relying on JavaScript and HTML. Next, if you are not familiar with Silverlight development, I recommend you spend some time getting comfortable with Silverlight. For this you can visit http://www.silverlight.net and try out the tutorials there.

The result of my inquiries in this subject is a Visual Studio project template that can be used to quickly start development for a Silverlight Sidebar gadget. I got inspired by the template Tim Heuer has created for jump starting Sidebar gadget development using just JavaScript/HTML. The requirements for installing and using the template are:

  • Microsoft Visual Studio 2008 (Standard or better)
  • Microsoft Silverlight 2.0 beta 2
  • Silverlight Tools Beta 2 for Visual Studio 2008

After downloading the template installer from here, in order to install it, just run the downloaded file. The Visual Studio Content Installer will handle the rest (click next and ignore security warnings, because I did not sign the template).

After installing the template, in order to create a new Sidebar gadget, in Visual Studio click File->New->Project. You will notice that under the C# node, at the bottom, under "My Templates", a new entry has appeared: "Silverlight Sidebar Gadget". Give the solution a name and then click Ok.

NewProject

You will notice that 6 projects have been automatically added to the newly created solution: SilverlightSidebarGadgetWeb, SilverlightGadgetDocked, SilverlightGadgetUnDocked, SilverlightGadgetSettings, SilverlightGadgetFlyout and SilverlightGadgetUtilities. In order, these correspond to: the main gadget web site project that will actually end up being deployed (all content and code is added to this site), the Silverlight control that is displayed when the gadget is docked, the Silverlight control that is displayed when the gadget is undocked, the Silverlight control that is displayed on the settings page of the gadget, the Silverlight control that is displayed on the flyout page of the gadget and a utilities library for Silverlight, providing a managed code API for Sidebar gadgets. This API translates to calls in the JavaScript Sidebar Gadget API.

IMPORTANT: Due to limitations in the way the template is built, the Silverlight applications have to be added to the gadget's main project manually. This can be done by going to the Property Pages for the website project, the Silverlight Applications tab and then click add for each additional Silverlight project. Clear the "Add a test page that references the control" checkbox, and make sure the "Enable Silverlight debugging"checkbox is checked if you want debugging capabilities for Silverlight. Silverlight and JavaScript simultaneous debugging is not possible at the current time (Silverlight debugging requires disabling Script debugging from IE).

AddSilverlightApplications

In a later version of the project template this will no longer be required, but for that I have to add a custom Wizard to the project template that can prepare the projects in the template.

The code is commented, so I'm not going to cover it in detail. Also, for Sidebar gadget development guidance, read my previous post on the topic. The gadget is set up to use Silverlight controls for each page of the gadget. This is not required, and Silverlight controls can be removed from the project (along with their projects form the solution) as needed. There are 2 main classes defined in the SilverlightGadgetUtilities class: SilverlightGadget and SilverlightGadgetEvents. The first is used to access the JavaScript Sidebar Gadget API. The second is used to expose the JavaScript events related to a gadget as managed events in the Silverlight controls.

Known "bumps"

There are some things that will simply not work, no matter how hard you try to get them to work. Usually this is due to the fact that the current Sidebar gadget API or the gadget user experience provided by Microsoft does not allow it. These "hick-ups" are specified in the documentation comments of the classes or directly as comments.

Due to the fact that the Gadget JavaScript object does not allow attaching multiple event handlers for the same event, one must take care what event handler is registered for a particular event. Possible outcomes are: events that do not get triggered at all in the Silverlight controls, events that get triggered only in some Silverlight controls.

Due to the user experience with Sidebar gadgets, some events cannot be triggered in Silverlight controls: the Docked, Undocked events, all gadget events in the flyout, etc.

Some properties from the SilverlightGadget class are read-only even though the Sidebar gadget JavaScript API specifies that they are read-write. This is due to the fact that attempting to set those properties resulted in exceptions at runtime and those exceptions are most probably caused by the JavaScript API itself.

I tried to "discover" all such "bumps" that might appear and document them in the template directly. If there is something I missed or you have a question, please contact me or post a comment and I will try to modify the template to fix or document the issue. Also, any suggestions on improving this project template are welcomed.

I'm looking forward to seeing many Silverlight Sidebar gadgets being developed. If you create such a gadget using this project template, please let me know by posting a comment with a link to the Live Gallery page of the gadget or a link to a page describing it.

Once again, the link for the Visual Studio project template is displayed below.

FILE: SilverlightSidebarGadget.vsi

UPDATE: If you have Microsoft Visual Studio 2008 SP1 installed, you will need the Microsoft Visual Studio Tools Beta 2 for Visual Studio 2008 in order to be able to create Silverlight projects. This also means that you cannot use the provided template without installing the new version of the Silverlight Tools.

UPDATE 2: I’ve upgraded the projects in the template for Silverlight 3 Beta. The corresponding template can be found here.

UPDATE 3: I’ve created a version of the template for Silverlight 2 final. The corresponding template can be found here.

UPDATE 4: I’ve upgraded the projects in the template for Silverlight 3 RTW. The corresponding template can be found here.

UPDATE 5: I’ve created a version of the template using Visual Basic projects. The corresponding template can be found here.

UPDATE 6: I’ve created a version of the template for Visual Studio 2010, using the new extension format. The corresponding template can be found here.

Comments (61) Trackbacks (0)
  1. I found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you down the road!

  2. I’ve tried the template sample, added the projects as mentioned above, and copied all files from the web project into the Sidebar directory, and added the gadget to the sidebar, but it only displays the “Install Silverlight” button. I’ve had beta 2 installed for awhile and even tried restarting the sidebar with no results. I’ve recently updated to .NET 3.5 SP1, VS2008 SP1, and the SP VS Tools for Beta 2 Refresh.

    Thanks,

    John

  3. I think the issue may be that I’m running Windows Vista x64 and it is running a 64-bit version of the sidebar which there isn’t a 64-bit version of Silverlight…sigh.

  4. I just tested this by closing the default x64 version of the sidebar and running c:\program files (x86)\Windows Sidebar\sidebar.exe (32-bit version) and it loaded the gadget just fine.

    Thanks for the awesome work! I’m definitely looking forward to creating some cool gadgets with it.

  5. Hi,
    I’ve used this template to build silverlight gadgets with SL beta2 vesion.
    The gadget was working good. But after I updated to SL2 RC, I’m not able to view the gadget.

    S/W updates:
    VS2008 SP1
    Silverlight 2 RC
    Silverlight SDK

    Code updates:
    Updated all the type=”application/x-silverlight-2-b2″ to type=”application/x-silverlight-2″.

    Compiled the code using the latest VS SDK updates and installed the gadget. But no luck 🙁

    What are the other updates that we should be doing so that the gadget works on RC version of Silverlight.

    Thanks in advance.

  6. There are some breaking changes in the RC version. I was thinking of refreshing the templates to work with the RC (which is supposed to be feature complete) and also adding a Visual Basic variant of the template. So far, time has not been on my side these past few weeks, but i’m hoping to find some time soon.
    If you want to change the existing template, my guess is to leave the gadget’s html (mostly) intact, just copy-paste in changes that occur when creating a nw silverlight project using the RC, then save all code files for the silverlight projects, remove the old projects, add the new ones and put in the old code files. Since the controls themselves are pretty basic, i don’t think you’ll have to modify the SL code files (much).

  7. the update in the link above doesn’t appear to be a valid vsi?

  8. never mind 🙂 found the right way to download it!

  9. Hey thank you for this really great template!
    but i had to modify it befor it runs:

    i had to change this code snippet

    and replaced it with this one:

    You have to edit it in the gadget.html, settings.html and in the flyout.html

    after this everything works fine:)

    greetings from germany Joel

  10. Hey thank you for this really great template!
    but i had to modify it befor it runs:

    i had to change this code snippet
    object data=”data:application/x-silverlight,” type=”application/x-silverlight-2-b2″ width=”100%” height=”100%” id=”silgs”

    and replaced it with this one:
    object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ id=”silverlightControlObject” width=”100%” height=”100%”

    You have to edit it in the gadget.html, settings.html and in the flyout.html

    after this everything works fine:)

    greetings from germany Joel

  11. Hi

    I’m having a problem with the template, installed it, and it resides in the Project Templates/Visual C# directory (i’ve checked) however, it doesn’t come up in the My Templates section (or anywhere for that matter).

    What have I done wrong?

    Many Thanks in advance

    Jonathan

  12. Hello,
    Maybe you have two versions of Visual Studio and you’re checking with the wrong version…
    Also, check that the taget platform is .NET Framework 3.5 (yes, it sounds weird, it being a Silverlight project, but all VS C# projects have to be targeted towards a version of the .NET Framework).
    Hope this helps. If not, come back and we’ll try to figure it out.

  13. Hi again!

    Just tried installing VS2008 from scratch on another PC, did all the updates for VS2008, basically followed the instructions layed out on the http://silverlight.net/ site. But still no success, it doesn’t register that the template is there!

    Many Thanks

    Jonathan

  14. Hi cretz,

    Only one version of VS2008 installed, not even express in there to confuse the issue. It sees the projects that are in the projects directory of the “Visual Studio 2008” directory in the documents directory.

    It is definately targeting 3.5 of .NET!

    Many Thanks

  15. OK! This is weird!

    I’ve found it, but it’s not where it is supposed to be! It should be in the “Other Languages/Visual C#/Silverlight” section, however, I’ve found it in the “Other Languages/Visual C#/Visual C#” section.

    Oh well! Seeing it works in their as well, I’m not going to bother!

    Thanks for your help cretz!

  16. Please tell me if you have this file after installing the gadget template:
    \Visual Studio 2008\Templates\ProjectTemplates\Visual C#\SilverlightSidebarGadget.zip”

  17. Oh… you should have payed attention to the screenshot in the post.
    I marked the location of the template in the add new project with red arrows.
    Glad to see it worked out.

  18. I’ve solved it! *LMAO* My system seems to be having that “Homer” moment! Actually, both systems. If I place the file where you say (where it is supposed to be) it doesn’t come up in the templates, however, if I use “\Visual Studio 2008\Templates\ProjectTemplates\Visual C#\Silverlight\SilverlightSideBarGadget.zip” it resides in it’s proper place in the templates view in VS2008! Hmmm! Explain that one, or go and have a drink (tea, coffee or stronger) *LMAO*

    I know that I wasn’t having a Homer moment!

    Thanks again!

  19. I “designed” the template to show up in the Silverlight group for the new project window. I don’t know why it ends up in the C# folder. Probably something to do with the multi-project template handling. The installer does not take the ProjectSubType element when creating the folder hierarchy where the template zip file is deployed.

  20. Sorry m8 but does this template work with Silverlight 3?

  21. The template won’t work with silverlight 3, as it’s been configured for silverlight 2.
    I’ve created a version for silverlight 3 beta, available here.

  22. Is there any method that works to get this running in Silverlight 2 release?

    Jumping from one beta to another doesnt help those of us trying to build on this. I was amazed at the quality of this template but disappointed that I cant get it running with Silverlight 2 release.

    Joel’s solution of changing the object’s to ‘application/x-silverlight-2’ did not work for me.

    Thanks

  23. The version for Silverlight 2 release is avaliable here.
    Also, be aware that you cannot run silverlight sidebar gadgets in the 64 bit edition of the sidebar. You have to close it and manually start the 32 bit edition.

  24. I have created project using your template , but after building the project .XAP files are not created in client bin folder. what could be the reason

  25. Have a look in the post above where it says IMPORTANT:. If you have any entries in the Silverlight Applications tab of the website’s property pages, try removing them and re-adding them according to the method described there.
    Hope this helps.

  26. when i create a project using your template it’s creating the other five projects(SilverlightGadgetDocked,SilverlightGadgetFlyout,SilverlightGadgetSettings,SilverlightGadgetUnDocked,SilverlightGadgetUtilities) automatically. I have one more problem on clicking the button on gadget.html , the flyout is not comming out of sidebar instaed it is displaying there only. what could be the reason

  27. I developed a silverlight gadget . on clicking button( this is button is in gadget.html) it should open a flyout called flyout.html. on button click it is opening flyout.html, but the problem is , it is showing the flyout.html on the background of gadget.html and I am not able to see the contents and controls on flyout. Am I missing any settings. Please help me in this

  28. Can you please show me the code that you use to open the flyout?

  29. Great post! thanks!!
    Do you have a plan to make this project for Silverlight 3 RTM Ver?

  30. The updated version of the template for Silverlight 3 RTW is available here.

  31. Have you done anything for the Win7 Gadgets yet?

  32. Great post! Great template!
    Just one thing: why there is this ugly white frame around the flyout and how can I correct this problem. Furthermore i have to click to times the flyout button to get the complete width, else ca. 10px on the right are cut.
    But again: really great Template: thanks

  33. Howdy.. Great template! Oddly enough I’m having the same issues as Anne. My flyout looks fine except for the fact that the silverlight control doesn’t seem to be taking up the full (in my case 400 x 300) and is leaving a white border.

    Also, along the lines of what Anne says. Every button, combo-box and text box requires a double click to get to respond. It is almost as if the first click is just to get focus on the gadget and then the second click performs the action. Are we doing something stupid?

  34. Hey Kevin,
    For the buttons you can set btn.ClickMode = ClickMode.Press. Or (for the hole app) you can set windowless=false (in the gadget.html) but then you have the problem that you will not get the normal settings or close icon if you hover the gadget. That sucks little bit, but I think at this time there is no solution for the click-problem.

  35. Anne, Thanks! For those with similar issues and wanting to tweak this approach to use windowless=false there are a couple things you need to consider. Check out the following posts http://www.designerwpf.com/2008/12/03/tips-for-creating-a-silverlight-2-gadget-for-vista/ and http://silverlight.net/forums/t/48615.aspx

  36. The gadget template has all buttons set to ClickMode.Press, precisely for the reasons stated above. As for the windowless, I set it to false in order to be able to drag the gadget as one normally would. As for the border that appears around the flyout, I have no workaround for it yet. Still, it’s not such a deal-breaking issue as the one about buttons.

  37. I have built an application in Flash, I wanted to know, as to, if I can make a desktop gadget that also utilizes this Flash content?

  38. You can use flash content just as you would use silverlight content. In the end, all gadgets are web pages that use the internet explorer engine.

  39. I’m trying to create a silverlight gadget that can be used as a simple LOB application that will query an SQL Server database. I’ve installed the template and got the gadget to work with Silverlight 3. Everything works fine, except when I bind a datagrid to it’s datasource, the gadget does not display any of the records. I bind the datagrid in the Page_Loaded event of the silverlight control. Is the Page_Loaded event not being called due to the fact that the Gadget JavaScript object does not allow attaching multiple event handlers for the same event? I’ve tried placing the binding code in the evHelper_Undock function as well, but still no luck… What am I doing wrong? Thanks!

  40. Hi everyone..I fixed the visual problem in setting and flyout gadget..you must fix the css file for this pages. The body css property for setting.html and flyout.html must be set only with margin:0; and padding:0; : it’s sufficient for show the correct usercontrol in the gadget.

    And now one question: how connect my gadget for downloading information from internet without use a WFC service for proxy? Any ideas or sample code?

    sorry for my bad english ^_^’

  41. Super Template!
    But I’m having a pretty peculiar issue and I can’t seem to fix it. When I add the gadget to the sidebar it docks outside it. I can drag it inside the sidebar but everytime I close the gadget and add it to the sidebar again it docks outside in its docked form. Any ideas what the problem could be?

  42. This is great: thank you Hanamichi !!!

    @rik look into the utils.js, there you can set the size if the gadget is docked. Set it to small if the docked eventhandler was fired (maybe you can do it in the silverlight-app or if you have a constant size, do it in the utils.js)
    I hope I could help you.

  43. Can you build a vb template?

  44. Sorry for the delay in responding. I’ve added the VB template here.

  45. Hi,
    (Win 7 32)
    On VS2008 and Silverlight 2.0 template i get this problem : when i undock/dock example gadget, the position of dock panel move to top left corner of past undock position. i don t understand why and where i can solve this.help would be appreciated. for info do you continue to work over this template ?
    i would like to progress but… there is not a lot help at this time, i m not interested with pure javascript css html… i would really like to use silverlight 2 to use my favorite C# 😉

  46. I’ve tried creating a sidebar using yur template. It was great but after deploying I have discovered it freezes after I undocked then docked the sidebar. Did I do anything wrong?

  47. Hi Cretz,
    Thanks a lot for sharing the great template!!. But, I am facing the same issue which Anne noted that some content in the right side of flyout is getting cut. Please let me know if you have any workaround for it. And also, please let me know if you have some ideas on how to get the data from database onto the Gadget through WCF service using this template.

    Thanks!!
    Kiran

  48. Nice job. I was looking for template for VS2010, but the page said: “Item not yet published…”. Can you fix that please? Thanks in advance.


Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

No trackbacks yet.