How To: Create an Ink-Enabled Sidebar Gadget Using Silverlight


Have you ever said to yourself “Hmmmm… I have some ideas for Sidebar gadgets… I should really learn how to create one” Well, the good news is, it’s rather easy to create sidebar gadgets! In fact, it’s easy to create Sidebar gadgets that use Silverlight content. In this post, I’ll show you how to use Silverlight to create an inkable surface on a sidebar gadget.


 


Here’s the example running on my desktop:



 


Here’s the complete article that I used to learn how to create sidebar gadgets:


http://msdn2.microsoft.com/en-us/library/ms723694.aspx


 


Step 1: Create a directory under “%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets” called foo.gadget where “foo” is the name of your gadget


 


Step 2: Create the main HTML file for your gadget – for this example, that HTML looks like the following:






<html>


<head>


    <title>Silverlight Ink Note</title>


    <style>


        body


        {


            margin: 0;


            width: 153px;


            height: 200px;


        }


        #gadgetContent


        {


            width: 153px;


            top: 24px;


            text-align: center;


            font-family: Tahoma;


            font-size: 10pt;


            position: absolute;


        }


        #background


        {


            width: 153px;


            height: 200px;


            position: absolute;


            z-index: -1;


            background-repeat: no-repeat;


        }


    </style>


    <script type="text/javascript" src="silverlight.js"></script>


    <script type="text/javascript" src="createsilverlight.js"></script>


    <script type="text/javascript" src="ink.js"></script>


</head>


<body>


    <g:background


        src="clipboard.png"


        id="SLInkNoteBg"  


        style="position:absolute;width:153px;height:200px;z-index:-1"/>


    <span


        id="gadgetContent"


        style="font-family: Tahoma; font-size: 10pt;">


    <table width="103" cellspacing="0" cellpadding="0" height="140" border="0" background="transparent.gif">


        <tbody>


                <tr><td height="33"/></tr>


            <tr>


                        <td align="middle" valign="middle">


                    <div id='agControlHost1' class='playerDiv' background="none">


                        <script type="text/javascript">


                            createSilverlight();


                        </script>


                    </div>


                </td>


            </tr>


        </tbody>


    </table>


    </span>


</body>


</html>


 


Step 3: Add the gadget.xml file. This is the configuration file for the gadget. For this example, that XML looks like the following:










<?xml version="1.0" encoding="utf-8" ?>


<gadget>


    <name>Silverlight Ink Note</name>


    <namespace>Example.You</namespace>


    <version>1.0.0.0</version>


    <author name="Gavin Gear">


        <info url="http://blogs.msdn.com/gavingear" />


    </author>


    <copyright>&#169; 2006</copyright>


    <description>Silverlight Ink In Sidebar Demo</description>


    <hosts>


        <host name="sidebar">


            <base type="HTML" apiVersion="1.0.0" src="Silverlight_Note.html" />


            <permissions>Full</permissions>


            <platform minPlatformVersion="1.0" />


        </host>


    </hosts>


</gadget>


 


Step 4: Add the supporting Silverlight files (createsilverlight.js, Silverlight.js, ink.xaml, ink.js, clipboard.png, transparent.png) to the gadget directory (see attachment to this blog post)


 


Step 5: Open sidebar (if not open), click the + icon at the top of sidebar to add gadgets, and then double click on the icon for the gadget you just created.


 


That’s it! It’s really quite easy to create gadgets from Silverlight content!


 


Later,


Gavin

SilverlightInkSidebarGadget.zip

Comments (8)

  1. Some of you may have started playing around with Vista Sidebar Gadgets in order to create a unique experience

  2. רבים מאיתנו השתעשעו (ועדיין משתעשעים) בפיתוח יישומי Sidebar Gadget בויסטה. רבים אחרים מאיתנו השתעשעו

  3. Um das coisas bacanas do Windows Vista é o Sidebar que permite que tenhamos alguns gadgets sempre disponíveis

  4. Gavin Gear has posted a sample on his blog of how to get Silverlight content into Vista’s sidebar and

  5. MSDN Canada runs a Gadget VS Gadget competition . Create a great Windows Vista Gadget and you have the

  6. ge-force says:

    Do you know of a good tutorial on creating Sidebar Gadgets?

Skip to main content