IdealProgrammer.com » Silverlight

creating a widget for windows 7 using silverlight

asp.net videos — Thu, 11 Nov 2010 16:06:07 +0000

At its simplest form a Windows gadget is comprised of a .html file and a .xml file. Think of it as a mini-web site, with the .html file representing the site's visual components and the .xml file the gadget config or definition. Of course, as a web site, most gadgets are going to have the usual suspects: css, JavaScript, image files, and—best of all—Silverlight.

The purpose of this post is to allow me to do some research on what Windows gadgets are, how to write them, and, most importantly, how to leverage Silverlight to make gadget development easier and more fun.

What is a Windows Gadget?

When I ask this question, I mean what is a Windows gadget, really? I already know what they are, but what's inside the .gadget file? It's easy to see. Gadget files, which use the .gadget file extension, are just compressed .zip files (much like a .xap in Silverlight). If you change the .gadget extension to .zip, you can then view the files inside just like any other ZIP archive.

Conversely, when you install a .gadget file, its contents are uncompressed to the following location:

C:\Users\\AppData\Local\Microsoft\Windows Sidebar\Gadgets

I'll take a quick look at The Weather Channel gadget (one of the best, IMO):

As you can see, it has all the basic components of a standard web site. There are multiple .html files because this gadget, like many others, has a variety of views, each one based on the different gadget states: docked, undocked, fly-out (floating).

<< Visual Studio 2010 Keyboard & Mouse Shortcuts | The IIS SEO Toolkit >>

Writing a (Completely Useless) Windows 7 Gadget using Silverlight

November 11, 2009 21:12

   2: <gadget>

   3:   <name>Gadget Name Herename>

   4:   <namespace>YourCompanyNameHerenamespace>

   5:   <version>1.0.0.0version>

   6:   <author name=”Company Name Here”>

   7:     <info url=”http://contoso.com” text=”Visit our Web site” />

   8:     <logo src=”logo.png” />

   9:   author>

  10:   <copyright>© 2007copyright>

  11:   <description>your gadget descriptiondescription>

  12:   <icons>

  13:     <icon width=”64” height=”64” src=”icon.png” />

  14:   icons>

  15:   <hosts>

  16:     <host name=”sidebar”>

  17:       <base type=”HTML” apiVersion=”1.0.0” src=”gadget.html” />

  18:       <permissions>fullpermissions>

  19:       <platform minPlatformVersion=”0.3” />

  20:     host>

  21:   hosts>

  22: gadget>

About Me

Writing a (Completely Useless) Windows 7 Gadget using Silverlight

November 11, 2009 21:12

   2: <gadget>

3: <name>Gadget Name Herename>

4: <namespace>YourCompanyNameHerenamespace>

5: <version>1.0.0.0version>

6: <author name=”Company Name Here”>

7: <info url=”http://contoso.com” text=”Visit our Web site” />

8: <logo src=”logo.png” />

9: author>

10: <copyright>© 2007copyright>

11: <description>your gadget descriptiondescription>

12: <icons>

13: <icon width=”64” height=”64” src=”icon.png” />

14: icons>

15: <hosts>

16: <host name=”sidebar”>

17: <base type=”HTML” apiVersion=”1.0.0” src=”gadget.html” />

18: <permissions>fullpermissions>

19: <platform minPlatformVersion=”0.3” />

20: host>

21: hosts>

22: gadget>

View Plain

Donavon says this about the XML content:

Most of the elements in the definition file are used for displaying the gadget in the gallery. The one truly functional element is the src attribute of the base element—this points to the HTML file that will kickstart the gadget. I make it a practice to name this file gadget.html, but any valid filename will do.

So it's the XML file that acts as a bridge between the gadget hosting app (still sidebar.exe in Windows 7) and the gadget itself.

Creating a Windows Gadget using Silverlight

Creating a gadget that uses Silverlight is surprisingly easy.

1.) Start with a basic Silverlight Application project:

I'll call mine SilverlightGadget.

I'll host the control in an ASP.NET Web Site and use Silverlight 3:

Once the project is created, you can delete the SilverlightGadgetTestPage.aspx from the web site (we aren't going to use it). I also renamed the SilverlightGadgetTestPage.html file to just gadget.html as Donavon recommends.

2.) Next, add a new .xml file to the web site. I called this file gadget.xml to match the naming of the HTML file. Copy the generic contents shown above into this new file. You can update information in the file as you see fit. For purposes of this demo, I'll just leave it the way it is except for the gadget's which I'll call SilverlightGadget. The really important line is this file is:

Make sure "src" points to your HTML file.

3.) In gadget.html, we have a couple of changes to make:

a. Make the "html, body" style read "height: 80px; width: 130px;"

   1: html, body {

2: height: 80px;

3: width: 130px;

4: }

View Plain

Make sure to remove the overflow style. It was causing me problems, specifically causing horizontal and vertical scrollbars to display.

The height value was arbitrary; you'll want to adjust based on the content of your gadget. But the width of 130px was a maximum under Vista for a docked gadget. In Windows 7, however, this doesn't seem to apply as I was able to make the gadget as wide as I wanted. Still, all of the other docked gadgets that I have do not exceed this width, so I went with the standard 130px.

b. Add the following param to the list of object tags:

This seemed to have the effect of enabling the gadget handles when you mouseover the gadget.

4.) Now, in the XAML, I'll remove the height and width attributes from the UserControl and add a simple button inside the default grid. This gives me:

   1: <UserControl x:Class="SilverlightGadget.MainPage"

2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

6: mc:Ignorable="d">

7:

8: <Grid x:Name="LayoutRoot" Background="RosyBrown">

9: <Button Background="AliceBlue" Width="70" Height="30" Content="Click" />

10: Grid>

11: UserControl>

View Plain

Yes, I do realize this is a completely useless Silverlight control, but, for now, I'm just trying to demonstrate how to build the gadget by laying some groundwork. Perhaps in a future post I'll share some more useful Silverlight controls to host inside a gadget.

That should be it for the project/code changes. Now, let's install the gadget and see just how useless my one button control is.

Installing the Silverlight Gadget

As mentioned above, a gadget is a just a zip file with the extension .gadget. The easiest way to create a .gadget file is therefore to just use your favorite zip program. Mine is 7za, which I use inside a batch file so that I just double-click or run the batch file from the command line in order to both create and install the gadget.

Here's the sequence of commands (I run this from the project root; the batch file sits alongside the .sln file):

   1: cd SilverlightGadget.Web

2: del *.gadget

3: 7za a -r silverlightgadget.zip *

4: rename *.zip *.gadget

5: silverlightgadget.gadget

6: cd ..

View Plain

I'm just zipping up the whole web site, including the .xap and even the web.config, which isn't needed but this is just demo code so who cares.

Installing the gadget is as easy as double-clicking the .gadget file or typing the name at the command line and hitting enter. You'll be prompted to install the gadget. Click "Install" and prepared to be impressed:

<< Visual Studio 2010 Keyboard & Mouse Shortcuts | The IIS SEO Toolkit >>

Writing a (Completely Useless) Windows 7 Gadget using Silverlight

November 11, 2009 21:12

   2: <gadget>

   3:   <name>Gadget Name Herename>

   4:   <namespace>YourCompanyNameHerenamespace>

   5:   <version>1.0.0.0version>

   6:   <author name=”Company Name Here”>

   7:     <info url=”http://contoso.com” text=”Visit our Web site” />

   8:     <logo src=”logo.png” />

   9:   author>

  10:   <copyright>© 2007copyright>

  11:   <description>your gadget descriptiondescription>

  12:   <icons>

  13:     <icon width=”64” height=”64” src=”icon.png” />

  14:   icons>

  15:   <hosts>

  16:     <host name=”sidebar”>

  17:       <base type=”HTML” apiVersion=”1.0.0” src=”gadget.html” />

  18:       <permissions>fullpermissions>

  19:       <platform minPlatformVersion=”0.3” />

  20:     host>

  21:   hosts>

  22: gadget>

View Plain

Donavon says this about the XML content:

Most of the elements in the definition file are used for displaying the gadget in the gallery. The one truly functional element is the src attribute of the base element—this points to the HTML file that will kickstart the gadget. I make it a practice to name this file gadget.html, but any valid filename will do.

So it's the XML file that acts as a bridge between the gadget hosting app (still sidebar.exe in Windows 7) and the gadget itself.

Creating a Windows Gadget using Silverlight

Creating a gadget that uses Silverlight is surprisingly easy.

1.) Start with a basic Silverlight Application project:

I'll call mine SilverlightGadget.

I'll host the control in an ASP.NET Web Site and use Silverlight 3:

Make sure "src" points to your HTML file.

3.) In gadget.html, we have a couple of changes to make:

a. Make the "html, body" style read "height: 80px; width: 130px;"

   1: html, body {

   2:     height: 80px;

   3:     width: 130px;

   4: }

View Plain

Make sure to remove the overflow style. It was causing me problems, specifically causing horizontal and vertical scrollbars to display.

b. Add the following param to the list of object tags:

This seemed to have the effect of enabling the gadget handles when you mouseover the gadget.

4.) Now, in the XAML, I'll remove the height and width attributes from the UserControl and add a simple button inside the default grid. This gives me:

   1: <UserControl x:Class="SilverlightGadget.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   5:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   6:     mc:Ignorable="d">

7:

   8:     <Grid x:Name="LayoutRoot" Background="RosyBrown">

   9:         <Button Background="AliceBlue" Width="70" Height="30" Content="Click"  />

  10:     Grid>

  11: UserControl>

View Plain

That should be it for the project/code changes. Now, let's install the gadget and see just how useless my one button control is.

Installing the Silverlight Gadget

Here's the sequence of commands (I run this from the project root; the batch file sits alongside the .sln file):

   1: cd SilverlightGadget.Web

   2: del *.gadget

   3: 7za a -r silverlightgadget.zip *

   4: rename *.zip *.gadget

   5: silverlightgadget.gadget

   6: cd ..

View Plain

I'm just zipping up the whole web site, including the .xap and even the web.config, which isn't needed but this is just demo code so who cares.

Here it is alongside some other gadgets for better context:

Conclusion

While there are a handful of manual steps involved in creating a Silverlight gadget, they're fairly easy ones. It would be great if Visual Studio just had a project template for this, but it doesn't. There are, however, some alternatives out there, including one that does not create a base Silverlight project by Tim Heuer and another by Ioan Lazarciuc which does, but which creates a plethora of projects in the process. In other words, I haven't found a satisfactory Silverlight gadget template yet, so the above steps will have to do for the time being.

Thanks to it'scodingtime.com

creating a widget for windows 7 using silverlight is a post from: IdealProgrammer.com

Silverlight 2 – Six Hours of Free Video Tutorials by Microsoft Expert This free six-hour video series is entitled - "Look What...
Silverlight 3 Tutorial – (Four Hours of Free Videos by Microsoft Experts) Interested in Silverlight 3? Here you will find four hours...
Visual Studio c# – July 15, 2009:ASP.NET, AJAX, ASP.NET MVC, Visual Studio, Silverlight 3,IIS Search Engine Optimization Toolkit Scott Gu on: ASP.NET, AJAX, ASP.NET MVC, Visual Studio, Silverlight...

Related posts brought to you by Yet Another Related Posts Plugin.

Silverlight 3 Tutorial – (Four Hours of Free Videos by Microsoft Experts)

asp.net videos — Fri, 10 Jul 2009 05:26:23 +0000

Interested in Silverlight 3 Tutorial? Here you will find four hours of free Silverlight 3 video tutorials by Microsoft experts. Jesse Liberty and his cohorts describe the new features available in Silverlight 3.

Background: – Silverlight 3 was released on July 9, 2009.

Silverlight 3 includes an increased number of controls:

DataGrid
TreeView
various layout panels
DataForm for forms-driven applications
DataPager for viewing paginated data

Silverlight 3 includes a navigation framework that allows Silverlight applications to use the hyperlinked navigation model as well as enabling deep-linking (linking directly to specific pages) within Silverlight applications

Silverlight 3 supports:

audio decoding
hardware-accelerated H.264 video decoding
1080p smooth streaming
perspective 3D which enables 3D transformations of 2D elements
A Bitmap API
GPU to accelerate the composition of Visual Trees
Visual trees can now be cached
ClearType text rendering
element-to-element binding
Out-of-Browser experiences

Installed Silverlight 3 applications automatically check for updates asynchronously on every launch and updates are automatically installed. Running instances of the applications are informed when updates are available.

Be sure to check out the other series that Jesse Liberty has done on Silverlight. You can find them in the Silverlight 2 video series in the Advanced Series category at Progress Monitor.

photo credit: Yoshi5000

Silverlight 3

Num	Series	Title	Date	Presenter	Min
83	Silverlight 3 Beta	DOMAIN UPDOWN CONTROL	3/18/2009	Jesse Liberty	30
84	Silverlight 3 Beta	TIME INPUT CONTROL	3/18/2009	Jesse Liberty	25
85	Silverlight 3 Beta	SAVEFILEDIALOG API	3/18/2009	Laurence Moroney	8
86	Silverlight 3 Beta	USING 3D TRANSFORMS, PART 1	3/18/2009	Jesse Liberty	16
87	Silverlight 3 Beta	USING 3D TRANSFORMS, PART 2	3/18/2009	Jesse Liberty	16
88	Silverlight 3 Beta	ELEMENT TO ELEMENT BINDING	3/18/2009	Jesse Liberty	6
89	Silverlight 3 Beta	PIXEL EFFECTS	3/18/2009	Mike Taulty	24
90	Silverlight 3 Beta	ANIMATION EASING LIBRARIES	3/18/2009	Laurence Moroney	7
91	Silverlight 3 Beta	DATAFORM CONTROL	3/18/2009	Mike Taulty	26
92	Silverlight 3 Beta	LOCALCONNECTION API	3/18/2009	Tim Heuer	12
93	Silverlight 3 Beta	OUT-OF-BROWSER EXPERIENCES	3/18/2009	Tim Heuer	24
94	Silverlight 3 Beta	NAVIGATION FRAMEWORK	3/18/2009	Tim Heuer	26
95	Silverlight 3 Beta	SILVERLIGHT TOOLKIT: ACCORDION CONTROL	3/18/2009	Jesse Liberty	20
96	Silverlight 3 Beta	SILVERLIGHT TOOLKIT: ANIMATEDTRANSITION CONTROL	3/18/2009	Jesse Liberty	18
				Total	258

Silverlight 3 Tutorial – (Four Hours of Free Videos by Microsoft Experts) is a post from: IdealProgrammer.com

Silverlight 2 – Six Hours of Free Video Tutorials by Microsoft Expert This free six-hour video series is entitled - "Look What...
NET LINQ Free Video Tutorials by Microsoft Experts – 12 Hours Here are ten hours of free video tutorials on LINQ....
24 Hours of SQL Server 2008 – A Video Tutorial presented by Microsoft Experts 24 hours of free video tutorials on using SQL Server...

Related posts brought to you by Yet Another Related Posts Plugin.

Silverlight 2 – Six Hours of Free Video Tutorials by Microsoft Expert

asp.net videos — Sat, 31 Jan 2009 15:13:04 +0000

This free six-hour video tutorial series is entitled – "Look What you can do with Silverlight 2." Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET Framework-based media experiences and rich interactive applications for the Web. Microsoft also has a great How Do I Video Series on Silverlight that can be viewed at silverlight.net/learn

These series cover the following topics: Silverlight 2 download, silverlight xml, ms expression, expression web designer.

Be sure to also check out the 4 hours of free video tutorials on Silverlight 3 and ms expression.

Presenter: Lindsay Rutter, Developer Evangelist, Microsoft Corporation
photo credit: scorbette37

Silverlight 2

1. Overview of Silverlight 2 and the WPF UI Framework

Key Concepts:A.Overview of Silverlight 2
B. Silverligt 2 architecture
C. the new features specific to Silverlight 2
D. Silverlight tools: Microsoft Visual Studio 2008 and Microsoft Expression Blend
E. Windows Presentation Foundation (WPF) UI framework for Silverlight, which is a subset of the WPF UI framework for the desktop and Windows Presentation Foundation
F. Silverlight controls
G. How to render content correctly when you resize the page
H. Silverlight controls: including Button, Calendar, ListBox, Image, Grid, Slider, and TextBox.

June 16, 2008 60 minutes

2. WPF UI Framework Continued

Key Concepts:A. Microsoft Silverlight 2 Windows Presentation Foundation (WPF) UI framework
B. Data-binding support
C. Customizing the appearance of your controls with the templating and skinning model in Silverlight 2.
D. Bind UI elements to business objects for rich data scenarios with model, view, and container separation.
E. Control templating allows you to change color and style and the whole visual tree of your control and even add custom animations without writing code.

June 18, 2008 60 minutes

3. Introducing Deep Zoom

Key Concepts:A. Deep Zoom allows users to easily and cleanly navigate through very large images and only download the portions of the images needed.
B. The considerations that you must make when working with large images
C. How Silverlight 2, Microsoft Visual Studio 2008, and Microsoft Expression Blend enable you to implement Deep Zoom in applications easily.

June 20, 2008 60 minutes

4. Web Services Support

Key Concepts:A. Microsoft Silverlight 2 has a robust networking stack, and it supports Representational State Transfer (REST), SOAP, WS*, HTTP endpoints, and even cross-domain networking
B. Implementing calls to Web services from your Silverlight 2 Microsoft .NET-connected applications using a variety of methods, including standard ASP.NET Web Services (ASMX), Windows Communication Foundation (WCF) Services, and REST.

June 23, 2008 60 minutes

5. Testing Framework

Key Concepts:A. New testing framework enables you to write unit tests for UI and non-UI functionality in Silverlight 2, and it includes more than 2,000 unit tests covering all of the released Silverlight 2 controls.
B. Built-in unit tests and how to build your own unit tests or extend the included unit tests
C. The support in Microsoft Visual Studio 2008 for debugging your Silverlight 2 applications.

June 25, 2008 60 minutes

6. Adaptive Streaming

Key Concepts:A. Adaptive streaming is an addition to the rich media capabilities of Silverlight 2.
B. Adaptive streaming enables Silverlight 2 applications to examine the capabilities of the client computer, like CPU and bandwidth, and adjusts the bit-rate encoding of streaming video to handle network congestion and CPU usage automatically.
C. Other cool features of Silverlight 2
D. Silverlight Mobile.

July 25, 2007 9? minutes

Silverlight 2 – Six Hours of Free Video Tutorials by Microsoft Expert is a post from: IdealProgrammer.com

Windows Presentation Foundation-18 Hours of Free Video Tutorials Windows Presentation Foundation - 18 hours of free video tutorial...
Windows Communication Foundation – 15 Hours of Free Video Tutorials 15 FREE one-hour video tutorials on Windows Communication Foundation by...
Architecting Desktop Applications with 2.0 – 15 Free Video Tutorials "Architecting Modern Desktop Applications in.NET" is a 15-part 25+ hour...

Related posts brought to you by Yet Another Related Posts Plugin.

IdealProgrammer.com » Silverlight

creating a widget for windows 7 using silverlight

What is a Windows Gadget?

About Me

Tags

Popular Posts & Comments

Categories

Writing a (Completely Useless) Windows 7 Gadget using Silverlight

About Me

Tags

Popular Posts & Comments

Categories

Writing a (Completely Useless) Windows 7 Gadget using Silverlight

Creating a Windows Gadget using Silverlight

Installing the Silverlight Gadget

About Me

Tags

Popular Posts & Comments

Categories

Writing a (Completely Useless) Windows 7 Gadget using Silverlight

Creating a Windows Gadget using Silverlight

Installing the Silverlight Gadget

Conclusion

Silverlight 3 Tutorial – (Four Hours of Free Videos by Microsoft Experts)

Silverlight 3

Silverlight 2 – Six Hours of Free Video Tutorials by Microsoft Expert

Silverlight 2