Results 1 to 3 of 3

Thread: Vista Gadgets for Silverlight

  1. #1
    Join Date
    Feb 2009

    Vista Gadgets for Silverlight

    Creating a Vista Gadget using Silverlight

    We know that the Gadget for Windows Vista are relatively simple to create, you can actually download a video to develop. Now if you build a gadget is similar to creating a website, then why not try Silverlight, so you can embed XAML to the Desktop.

    The first step is to build in Expression Blend design, with the dimensions height: 130px and width: 130px. (Size acceptable in the sidebar). We will hold a fund with a gradient and also we will use a png.

    Then we will create an animation, simply turn and increases the size of PNG, for when the user moves the cursor over the gadget, and other animation, reversing to return to original state.

    Remember, for you easier, choose "Duplicate" and then apply "Reverse."

    With this we have two animations one called "on" and another called "off" which will be invoked from javascript Default.html Archive (Remember to file setear gadget.xml to be the body of gadget).

    HTML Code:
    <Base type = "HTML" src = "default.html" />
    And the javascript functions to call the animations are:

    HTML Code:
    <Script language = "jscript"> 
    on function (sender, args) ( 
        sender.findName ("on"). begin (); 
    off function (sender, args) ( 
        sender.findName ("off"). begin (); 
    </ Script>
    and calls to these functions in the XAML file:

    HTML Code:
          xmlns = "" 
          xmlns: x = "" 
          Width = "130" Height = "130" x: Name = "Page" MouseEnter = "on"   MouseLeave = "off" mlns: Microsoft_Expression_DesignModel_Platform = "clr-namespace: Microsoft. Expression. DesignModel. Platform; assembly = Microsoft.Expression.DesignModel">
    Our folder, it would be:
    C: \ Program Files \ Windows Sidebar \ Gadgets \ BatterySL.Gadget

  2. #2
    Join Date
    Feb 2009

    Re: Vista Gadgets for Silverlight

    Windows Vista Gadget that allows Silverlight Handwriting and color selection.


    We will choose a good png for the background of our gadget, after some searching I found this picture that I liked:

    For this, as before, we will use Microsoft Expression Blend 2.0, we can prove it (in the form of a normal web page) to go to refine our super gadget.

    Design and Dimensions.

    We will design the gadget with dimensions 130px width and height of 182px (remember it is a decent size considering it is a gadget on the sidebar).

    The box is kind InkPresenter that will allow us writing in this text box, plus the background is "transparent." The XAML code for the page is as follows:

          xmlns = "" 
          xmlns: x = "" 
          Width = "130" Height = "182" 
          x: Name = "Page" Loaded = "root_Loaded"> 
         <Image Canvas.Left = "48" Width = "200" Height = "200" Source = "img / file.png" Stretch = "Fill" Canvas.Top = "-6" /> 
        x: Name = "CuadroTinta" // CuadroTinta means Ink Painting
        Background = "transparent" 
        Width = "130" Height = "182" 
       MouseMove = "LapizMouseMove" 
    MouseLeftButtonDown = "LapizMouseDown" 
        MouseLeftButtonUp = "LapizMouseUp" Canvas.Top = "2" /> 
    </ Canvas>
    Creating behavior Gadget

    If we look a bit this code, we realize that the item has seteado InkPresenter three event handlers:
    • MouseMove = "LapizMouseMove"
    • MouseLeftButtonDown = "LapizMouseDown"
    • MouseLeftButtonUp = "LapizMouseUp"

    These functions are called from the Default.aspx which refers to tintas.js file that contains:
    LapizMouseDown function (sender, args) 
    (   inkPresenter.CaptureMouse (); 
       newStroke = silverlight.content.createFromXaml ('<Stroke/>'); 
       newStroke.StylusPoints.AddStylusPoints (args.GetStylusPoints (inkPresenter)); 
       newStroke.DrawingAttributes.Color = color; 
       newStroke.DrawingAttributes.Width = 2; 
       newStroke.DrawingAttributes.Height = 2; 
       inkPresenter.Strokes.Add (newStroke) 
    // While the mouse is moving, we are adding items to stroke 
    LapizMouseMove function (sender, args) 
       if (newStroke! = null) 
          newStroke.StylusPoints.AddStylusPoints (args.GetStylusPointsinkPresenter)); 
    // Release the mouse button 
    LapizMouseUp function (sender, args) 
       newStroke = null; 

    First, create the color boxes, which helps the user to select the color of the line to draw, the text has a small effect of "reflection", this effect is achieved using the flip tool and then occupied the alpha in the text (to be blurry). The pictures, are the color name which represent, and this has a reason, because we will use the name of tables as arguments to functions setean the colors of the line. The animations generated basically increasing the size of each of the tables.

  3. #3
    Join Date
    Feb 2009

    Re: Vista Gadgets for Silverlight

    Behavior Configuration Screen

    You must add the following lines in the html file that represents the start screen gadget Default.html.
    System.Gadget.onSettingsClosed = SettingsClosed;
    System.Gadget.settingsUI = "Setting.html
    In the file that each table Setting.XAML we call the functions called to create the animation:
    MouseEnter = "amarilloOn" MouseLeave = "amarilloOff" MouseLeftButtonDown = "amarilloClick"   Cursor = "Hand"> 
    The following features serve to activate animations (... On) in the event MouseEnter 
    // Disable (Off ..) enables the animation when it is on the table and MouseLeave 
    // (... Click) when clicking on the box. 
    // To make it easier for x: Name of the elements have the name of the color 
    // So that we pass as argument the name of the sender to the marker function. 
    negroOn function (sender, args) 
       (Sender.findName (negroOn "). Begin ();   ) 
    negroOff function (sender, args) 
      (Sender.findName (negroOff "). Begin ();) 
    negroClick function (sender, args) 
    (Marker (sender.Name, sender);        )
    additions and functions serves to increase the edge of the selected color box to make it faster in terms of programming, we return the StrokeThickness of all elements to 1, and then change the StrokeThickness the selected object. With the subject line seteamos color = color to the variable when executing the function associated with onSettingsClosing gadget is written in the selected color value.
    function bookmark (object sender) ( 
        sender.findName ("yellow"). StrokeThickness = "1"; 
        sender.findName ("blue"). StrokeThickness = "1"; 
        sender.findName ("red"). StrokeThickness = "1"; 
        sender.findName ("black"). StrokeThickness = "1"; 
        sender.findName ("green"). StrokeThickness = "1"; 
        sender.findName (object). StrokeThickness = "3"; 
        color = object; 
    When you close the window, and that pushed the OK button
    System.Gadget.onSettingsClosing = function (event) ( 
        if (event.closeAction == event.Action.commit) ( 
            if (color! = "") ( 
                System.Gadget.Settings.write ("color", color); 
            Event.cancelable = false; 
    Also remember that when you close this window, pass the values to update the value on the screen, this is where we use the following line of code:
    System.Gadget.onSettingsClosed = SettingsClosed;
    That is, when you close the window setting, SettingsClosed function is executed.


    After configuring the XML Manifest Gadget we only run our Gadget. I think that many users will get help from this tutorial.

Similar Threads

  1. Replies: 4
    Last Post: 26-04-2011, 08:09 AM
  2. Replies: 5
    Last Post: 18-08-2010, 04:16 AM
  3. Vista Sidebar Too Many Gadgets Displayed
    By DLPolson in forum Windows Software
    Replies: 1
    Last Post: 19-03-2010, 02:48 PM
  4. Download all new Windows Vista Gadgets
    By Miltongomes in forum Customize Desktop
    Replies: 3
    Last Post: 21-10-2008, 05:36 PM
  5. Vista Sidebar (Gadgets) - Gone missing!
    By Debi in forum Vista Help
    Replies: 4
    Last Post: 11-05-2008, 11:03 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts