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