Share via

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

  • Article

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:

https://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="https://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

  • Anonymous
    June 08, 2007
    PingBack from http://www.gottabemobile.com/HowToCreateASilverlightInkGadget.aspx

  • Anonymous
    June 08, 2007
    Some of you may have started playing around with Vista Sidebar Gadgets in order to create a unique experience

  • Anonymous
    June 08, 2007
    רבים מאיתנו השתעשעו (ועדיין משתעשעים) בפיתוח יישומי Sidebar Gadget בויסטה. רבים אחרים מאיתנו השתעשעו

  • Anonymous
    June 08, 2007
    Um das coisas bacanas do Windows Vista é o Sidebar que permite que tenhamos alguns gadgets sempre disponíveis

  • Anonymous
    June 08, 2007
    Oui, c'est tout à fait possible http://blogs.msdn.com/gavingear/archive/2007/06/07/how-to-create-an-ink-enabled-sidebar-gadget-using-silverlight.aspx

  • Anonymous
    June 11, 2007
    Gavin Gear has posted a sample on his blog of how to get Silverlight content into Vista's sidebar and

  • Anonymous
    June 13, 2007
    MSDN Canada runs a Gadget VS Gadget competition . Create a great Windows Vista Gadget and you have the

  • Anonymous
    July 04, 2010
    Do you know of a good tutorial on creating Sidebar Gadgets?