Vista Gadgets for Silverlight

[machok]

Sponsored Links

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).

<Base type = "HTML" src = "default.html" />

And the javascript functions to call the animations are:

<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:

<Canvas 
      xmlns = "http://schemas.microsoft.com/client/2007" 
      xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" 
      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

[machok]

Windows Vista Gadget that allows Silverlight Handwriting and color selection.

GADGET OF THE MAIN SCREEN

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:

<Canvas 
      xmlns = "http://schemas.microsoft.com/client/2007" 
      xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" 
      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" /> 

      <InkPresenter 
    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; 
)

SETTING DISPLAY

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.

[machok]

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.

Finishing

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