Go Back   TechArena Community > ARENA > Guides & Tutorials
Become a Member!
Forgot your username/password?
Register Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



Vista Gadgets for Silverlight

Guides & Tutorials


Reply
 
Thread Tools Search this Thread
  #1  
Old 07-08-2010
Member
 
Join Date: Feb 2009
Posts: 117
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:
<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

Reply With Quote
  #2  
Old 07-08-2010
Member
 
Join Date: Feb 2009
Posts: 117
Re: Vista Gadgets for Silverlight

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:

Code:
<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:
Code:
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.
Reply With Quote
  #3  
Old 07-08-2010
Member
 
Join Date: Feb 2009
Posts: 117
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:
Code:
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.
Code:
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
Code:
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.
Reply With Quote
Reply

  TechArena Community > ARENA > Guides & Tutorials
Tags: , , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Vista Gadgets for Silverlight"
Thread Thread Starter Forum Replies Last Post
After reinstalling Gadgets my Gadgets disappeared on windows 7 Jaiya Windows Software 4 26-04-2011 08:09 AM
Gadgets disappear with time, then Add Gadgets dialog won't come on Windows 7 Agaev Operating Systems 5 18-08-2010 04:16 AM
Vista Sidebar Too Many Gadgets Displayed DLPolson Windows Software 1 19-03-2010 02:48 PM
Download all new Windows Vista Gadgets Miltongomes Customize Desktop 3 21-10-2008 05:36 PM
Vista Sidebar (Gadgets) - Gone missing! Debi Vista Help 4 11-05-2008 11:03 PM


All times are GMT +5.5. The time now is 01:23 PM.