Coding4Fun

RGB in, HLS out

Coding4Fun — Tue, 05 Jan 2010 02:03:07 GMT

David Veeneman wrote a neat little console application that will convert RGB colors to HLS (Hue-Luminance-Saturation) or HSB (Hue-Saturation-Brightness) over at Code Project.

One of the neat things David also did was show off using IValueConverter as well to do some of the conversion for you.

David did use an MSDN article as reference, if you want to see the sample, head over to http://msdn.microsoft.com/en-us/library/ms771620.aspx

Creating An Application With Full Plug-in Support

Coding4Fun — Mon, 28 Dec 2009 22:43:20 GMT

In this article, you’ll learn how to create an application with full plug-in support.

Arian T. Kulp
www.ariankulp.com

Project site: http://utilrunner.codeplex.com/
Code It: Downloads
Run It: Downloads

Difficulty: Intermediate
Time Required: 3 hours
Cost: Free!
Software Needed: Visual C# 2008 Express Edition or higher

Introduction

It’s been a number of months since I released the first version of my Utility Runner application. Utility Runner makes it possible to run system utilities with as little overhead as possible: Instead of lots of tray icons, numerous EXE’s, and the associated memory and startup time overhead, this application manages multiple utilities from one place.

To open this solution, you’ll need Visual Studio 2008 Express Edition (Visual C# or Visual Basic), at least. If you don’t have it yet, you should get it!

Working with MEF

Little has changed functionally from the last version of the application, beyond some refactoring that’s taken place since the new version of MEF was released. For one thing, the attribute for marking an export is no longer sealed, so you can now create a subclassed attribute that encompasses the export name and any other metadata included with it. Consumers can simply use your new custom attribute for a stronger-typed experience. In my case, I created a WpfServiceMetadata class. Read on for more information.

Managing Addins

My big challenge was figuring out how to implement an addin manager to support multiple utility addins, like in Firefox. MEF lets you easily mark what classes are addins and where they should fit into your overall code, but I wanted to take it further. I decided that my goals were:

The ability to load an addin through the UI
The ability to disable/enable addins
The ability to remove an addin

There are a number of ways to achieve these goals. Mine isn’t the ideal way, but it works pretty well nonetheless.

Loading Addins

Loading addins is mostly handled by the MEF Framework itself, but there is some manual work involved as well. I decided that instead of scanning a folder for DLL’s like in the first version, I’d take things a step further: I came up with a simple packaging format to contain the addin and its associated files.

The packaging format is simply a Zip file renamed with the .util extension. The file contains at least the DLL of the addin itself, but might also include associated libraries, images, sounds, or other resources. I toyed with creating a manifest file to help supply addin information that didn’t require class loading, but I kept it simple for now.

Before loading DLL’s with addins, the AddinManager class will scan the addins folder for .util files and unzip them to same-named folders. Each of these folders gets added to the list of folders in which MEF searches. The original file then gets deleted.

Adding an addin

An application that uses addins needs a way for users to add new ones. The easiest method would be to have the user just drag new .util files into the Addins folder, but this isn’t very user-friendly. I wanted to make it easy for a user to click something in the application to install an addin.

If the user clicks the Add New Addin From File button, they use a file browse button to locate the file. The application then copies that file to the Addins folder and notifies the user that it will be loaded on next startup. It would be great to load the addin immediately, and MEF supports that, but I decided to skip dynamic addin control for simplicity.

Instead of going through the dialog when loading an addin, it would be nice to support double-clicking. To do this, an association needs to be made from the .util extension to the executable. If you launch the executable with a file argument and it’s the right format, it will automatically copy it to the Addins folder. If an instance is already running, the new instance will just exit. Similarly, if you launch the executable when another instance is running, the existing instance will show itself and the new instance will exit.

It’s important to note that standard users don’t have write access to the Program Files folder. For this reason, addins need to be stored in the user’s local profile folder. System-level addins can be stored in the ProgramData folder. Addins could be in the user’s roaming profile folder, but I haven’t thought through all of that yet. (For example, if a user logs into different machines, an addin might not run on each system due to different hardware configurations.)

Disabling an addin

Disabling an addin should be a simple matter of renaming the addin folder. You can’t do this at runtime though, since the DLL’s are locked and loaded. As an alternative, I create a file (zero-length) with the same name and add the .disable extension to it. I check for this upon startup and before loading, and can handle it properly.

Enabling and removing addins are handled similarly, using .enable and .delete extensions on the zero-length files.

Creating Addins

To create an addin, you need to 1) implement the IWpfService interface, and 2) add the WpfServiceMetadata attribute with a name for your addin. From there, be sure to implement all the methods in the interface. The Start method is called at initialization (you shouldn’t take much time in the constructor), and Stop is called at the end, for cleanup. Any time you want to update the Status, be sure to raise the StatusChanged event.

[WpfServiceMetadata("SampleAddin")]
public class SampleAddinImpl : IWpfService
{
}

The final thing you’ll need to do is copy your addin DLL to a folder with your addin name, plus the .util extension (Yes, an extension on the folder name. I do this in Visual Studio with a post-build event. If you debug the application, it looks for an Addins folder under the current directory. When started normally (such as when installed) it uses the local user profile.

When you’re ready to distribute the addin, compress the DLL and any supporting files into the top-level of a ZIP file, then rename the .zip extension to .util. You can load this from the Addins page of the app settings, or manually move it to the MefUtilRuner\Addins folder in your local profile folder (c:\users\{USERNAME}\AppData):

TimedQueue

Message boxes, balloon help, status bars—these are all great ways to display a message to the user, but they all only show one string at a time. If you call it again before the reader has the chance to see it, it’s just gone. There are some nice message managers that make it easy to manage stacking alerts, but I decided to stick with the built-in balloon help provider, and just manage how often I send changes. It’s basically a buffered balloon provider that will only show messages every x number of seconds, regardless of how many attempts the application makes. To use it, simply add items to the collection. An event is raised whenever an item is available. If an item has exceeded the maximum time-to-live threshold, the users of the collection never see it.

// Repeat while there are items (one pulse may occur with several items ready)
while (item != null)
{
    // If this is an old item, no event is raised.  This could happen if
    // a process goes into a loop and dumps a large number in a very short
    // amount of time.  
    if (DateTime.Now.Subtract(item.TimeStamp).TotalMilliseconds < _maxTTL)
    {
        RaiseEvent(item.Item);
        Thread.Sleep(_interval);
    }

    item = default(ItemWrapper<T>);

    lock (_lock)
    {
        if( _items.Count > 0 )
            item = _items.Dequeue();
    }
}

The main window creates an instance of the TimedQueue class. Every time an addin wants to display a message, it’s added to the collection. When ItemAvailableEvent fires, it’s dispatched to the UI thread to be displayed. Dispatching prevents cross-threading issues between the background TimedQueue thread and the UI thread.

void statuses_ItemAvailableEvent(object sender,
    ItemAvailableEventArgs<StatusMessage> e)
{
    Dispatcher.BeginInvoke((ThreadStart)delegate() {
        StatusUpdatedHandler(e.Item); }
        , DispatcherPriority.Background);
}

Though this instance is being used for status messages, you can also use TimedQueue for other purposes, when you are willing to lose old messages. One example would be to throttle user input, such as a game that doesn’t want constant firing or jumping as fast as the user clicks a button.

Next Steps

There are a number of things that would be nice to have in this application. It would be good to allow utilities to extend the context menu to enable or disable something, or at least to jump straight to their configuration page.

Using ClickOnce to deploy utilities would also be nice since it’s so clean for the user, but there is a cost: ClickOnce is very strict about how applications can interact with the system. They are always per-user, and they live in “secret” folders. Developers can’t read or write to the hard drive except to protected storage (similar to the iPhone I suppose). I’m not sure if they are restricted in other ways, but it could cause a hardship.

It would also be nice if addins could be added at runtime. This is a fairly simple case, but I didn’t get to it yet. Furthermore, if you add, you might expect to enable/disable/remove at runtime too. Unfortunately, disabling and removing aren’t really possible. Sure, I could call Stop on a utility and remove it from the UI (and not call Start on it next time), but that’s not really disabled since it could still be running until the next restart. I couldn’t force it to die unless I used separate application domains, which I’m loath to do.

Finally, I’d really like to get an “app store” type of repository going. I imagine being able to publish utilities like Sidebar Gadgets or Windows Live Writer Plugins so users can browse, read information, and click-and-install. That could be a really great way to make the idea take off.

Conclusion

There are definitely some rough edges at this point, but it’s getting there. The source code is fully available and I’d be willing to give commit access to anyone interested in moving things forward. Just drop me a line!

About Arian

Arian Kulp is a software developer living in Western Oregon. He creates samples, screencasts, demos, labs, and articles; speaks at programming events; and enjoys spending time with his family.

Trace.Writing in your web applications

Coding4Fun — Fri, 25 Dec 2009 08:45:42 GMT

We’ve talked in the past about debugging your application but if you can’t attach a debugger to your website, why not use the ASP.Net Tracing? This acts very much like a Debug.WriteLine in a Windows application but instead you do Trace.Write.

Since this does have some memory ramifications, you’ll have to add in a line to your web.config file under the System.Web section.

<system.web> 
<!-- Add me! -->
    <trace enabled="true" mostRecent="true" pageOutput="true" requestLimit="20" />

Then you just go to your trace.axd file. So in an example where your application is in “WebSite1” and on your local development box, http://localhost/WebSite1/trace.axd would be where to get this information

IronRuby sketch up

Coding4Fun — Wed, 16 Dec 2009 18:20:18 GMT

Jimmy Schementi posted about his talk at RubyConf 2009 and talked about embedding IronRuby in another program. His goals were:

2D rendering surface with simple primitive shapes
Simple animation support – callbacks for each frame and each object on the canvas
User-loadable “macros” for drawing and animating

His outcome looks amazing! It is worth noting Jimmy is using Visual Studio 2010 beta 2 for the demo here. His blog states he hasn’t tried it in Visual Studio 2008.

use Less to reduce CSS clutter!

Coding4Fun — Fri, 11 Dec 2009 18:16:00 GMT

Reading a post by Phil Haack, I learned about a neat technology called LESS that helps reduce the amount of CSS and duplicated code you have to create. It was originally a Ruby Gem but now has a .Net port called .Less which can be found at www.dotlesscss.com.

It lets you do some amazing things like global changes and even operations!

Variable:

@brand_color: #4D926F;
 
#header {
  color: @brand_color;
}
 
h2 {
  color: @brand_color;
}

Operation:

@the-border: 1px;
@base-color: #111;
 
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
 
#footer { 
  color: (@base-color + #111) * 1.5; 
}

Build your own Windows 7 Sensors!

Coding4Fun — Thu, 10 Dec 2009 13:00:00 GMT

Tired of having a computer with no sensors? We’ve created a parallax windows 7 sensor driver with source code so you can create your own!

The sensor device we made here is a Passive-Infrared Sensor. So basically it is a motion sensor. The board used in the white paper is the Parallax “BASIC Stamp HomeWork Board”. Sadly these only come in a 10-pack so the fallback would be the BASIC Stamp 2 Module ($49.00) and getting either the BASIC Stamp 2 Carrier Board” ($15.99) or the Board of Education Dev Board (USB) ($41.99).

The code example also has a .Net application that interprets the data from the sensor.

More of an Arduino fan? Coding4Fun is working with Brian Jepson (@bjepson) of MAKE and O'Reilly to create a driver that works with Arduino! I’ll post more when it gets finished.

Windows 7: Jump Lists

Coding4Fun — Thu, 10 Dec 2009 00:59:00 GMT

In this article, learn how to provide quick access to links and actions in your Windows 7 application by creating a Jump List.

Arian T. Kulp
http://www.ariankulp.com

Code It: Download
Difficulty: Intermediate
Time Required: 3 hours
Cost: Free!
Software Needed: Visual Basic or Visual C# Express (or higher, Windows API Code Pack

Introduction

Windows 7 includes a wealth of new features for developers to take advantage of. This includes better rendering subsystems, new sensor and location API's, file libraries, federated search, and of course, the improved taskbar. My last article discussed the taskbar's ability to show custom previews and toolbar icons. This article focuses on Jump Lists - the replacement for notification area context menus.

To get started, download Visual Studio 2008 Express Edition or higher (C# or VB). Or, just go for Visual Studio 2010 Beta 2 - it's available now and well worth the download. All Express editions are free, and either 2008 or 2010 versions will work fine with this article's accompanying code.

What's a Jump List?

Jump Lists are a new concept in Windows 7 that allow developers to provide shortcuts for users right from their icon's context menu in the taskbar or Start menu. The shortcuts could be simple links to the documents folder or a library for a given application, or links back to the same application with a parameter passed to cause something to happen.

You can use this method in Live Messenger to change online status, display the new message window, or open web pages relating to the application. In the end, all of these are shortcuts. Shortcuts to URL's, or shortcuts back to the executable with an argument that causes some change to occur.

Windows API Code Pack

The Windows API Code Pack lets you take advantage of specific features of Windows Vista and Windows 7 that aren't available across the general framework, as well as native features that don't make sense in the common CLR used across all the supported configurations. Much of it consists of interop wrappers.

With the Code Pack, you get access to the new taskbar, Direct2D, DirectWrite, shell properties, Jump Lists, and more. The download also includes numerous sample code projects to get you started, so there's no excuse for avoiding new features!

Adding a Jump List

Adding a Jump List is easy. After you create the list itself, add items (shortcuts to files or folders, and tasks) to it. Then, you can choose how a user's recent or frequently used documents show up. Windows manages the user documents list, which relieves you of some work.

It's important to note that in order to make a change to the list, you have to recreate the entire thing. In other words, you'll replace the old list with a new one, rather than updating it.

Here's how the process works:

First, add the two required references from the Windows API Code Pack. You can either build a project and reference the DLL's, or directly add projects to your solution:

For convenience, you can add the namespaces to your using block to shorten typing later:

Visual Basic

Imports Microsoft.WindowsAPICodePack.Taskbar
Imports Microsoft.WindowsAPICodePack.Shell

Visual C#

using Microsoft.WindowsAPICodePack.Taskbar;
using Microsoft.WindowsAPICodePack.Shell;

The Microsoft.WindowsAPICodePack.Taskbar.JumpList class is where most of the action is. There's a static factory method, CreateJumpList, to create the list. Always start by calling this method, even if the application has created a Jump List in the past.

Visual Basic

Private Sub CreateJumpList()
    Dim jl As JumpList = JumpList.CreateJumpList()

Visual C#

private void CreateJumpList()
{
    JumpList jl = JumpList.CreateJumpList();

Next, you have several options, depending on what you need in the list. The most basic group is the list of files. You can choose to show Recent files, Frequent files, or neither-but you can't have both. If you don't make a choice here, you'll get Recent files automatically, as long as you have a registered file type.

Visual Basic

' Show user files: Recent, Frequent, or None
jl.KnownCategoryToDisplay = JumpListKnownCategoryType.Recent

Visual C#

// Show user files: Recent, Frequent, or None
jl.KnownCategoryToDisplay = JumpListKnownCategoryType.Recent;

Now you can add one or more custom categories of items. These are either folders or files. There are two very important rules:

The files/folders must exist! If necessary, check the path before adding the JumpListItem or you'll have a crash.
The files you add have to be of a type registered for your application, or you'll crash. Even worse: the exception won't occur on the line where you add it, but rather when you're done setting it up and try to refresh the list.

I've commented out the last item here, but you would use a JumpListItem for actual file system files, and JumpListLink objects for non-filesystem references. Again, don't add a JumpListItem unless you know that it exists and that you're registered to handle it.

Visual Basic

' Add my own links (nouns)
Dim catActions As New JumpListCustomCategory("Destinations")

catActions.AddJumpListItems(
    New JumpListLink(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures), "My Pictures"), _
    New JumpListLink("http://blogs.msdn.com/coding4fun", "Visit Coding4Fun"), _
    New JumpListLink("http://code.msdn.microsoft.com/WindowsAPICodePack", "Windows API Code Pack"))
    'new JumpListItem(@"c:\Test1.c4f")

jl.AddCustomCategories(catActions)

Visual C#

// Add my own links (nouns)
JumpListCustomCategory catActions = new JumpListCustomCategory("Destinations");
catActions.AddJumpListItems(
    new JumpListLink(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures), "My Pictures"),
    new JumpListLink("http://blogs.msdn.com/coding4fun", "Visit Coding4Fun"),
    new JumpListLink("http://code.msdn.microsoft.com/WindowsAPICodePack", "Windows API Code Pack")
    //new JumpListItem(@"c:\Test1.c4f")
    );

jl.AddCustomCategories( catActions);

You can add one or more tasks as links to system executables by using the AddUserTasks method of the JumpList object. Either create multiple objects and add them as a variable argument list, or add them one at a time, as I have here.

Visual Basic

' Add our user tasks (verbs)
jl.AddUserTasks(New JumpListLink(Path.Combine(systemFolder, "notepad.exe"), "Open Notepad") _
    With {.IconReference = New IconReference(Path.Combine(systemFolder, "notepad.exe"), 0)})

Visual C#

jl.AddUserTasks(new JumpListLink(Path.Combine(systemFolder, "notepad.exe"), "Open Notepad")
{
    IconReference = new IconReference(Path.Combine(systemFolder, "notepad.exe"), 0)
});

The IconReference property sets a pointer to the icon by referencing a DLL or EXE and then an index. Specifying an EXE with "0" is a good way to get the default icon for an executable that you are linking to.

You can add a separator to the list whenever you need to. The JumpListSeparator class represents a separator and can be added using the AddUserTasks call.

Visual Basic

jl.AddUserTasks(New JumpListSeparator())

Visual C#

jl.AddUserTasks(new JumpListSeparator());

The final links in our Jump List link back to our own executable. This is the most common use of Jump Lists. Just having a Recent/Frequent list is nice, but being able to trigger actions on the program itself-even when it's not started-is really handy. It's almost like a menu of command line options!

Commands in the list that invoke actions on the application itself involve calling the same application with different arguments. Remember that this isn't a true menu; you won't receive a Click event. Instead, you need to deal with an argument that's passed to you, even if you're already running.

Remember that the first argument on the command line is always the fully-qualified location to the running executable. The Arguments property lets you specify command line arguments that users don't directly see. For this sample application, I've defined three dummy arguments. If one of these is passed in, the application changes the background color of a label and indicates which argument it was.

Visual Basic

jl.AddUserTasks(New JumpListLink(Assembly.GetEntryAssembly().Location, "Action 1 (Green)") _
    With {.Arguments = "-1", .IconReference = New IconReference(Assembly.GetEntryAssembly().Location, 0)})

Visual C#

jl.AddUserTasks(new JumpListLink(Assembly.GetEntryAssembly().Location, "Action 1 (Green)")
{
    IconReference = new IconReference(Assembly.GetEntryAssembly().Location, 0),
    Arguments = "-1"
});

Invoking Self Actions

Windows Live Messenger uses Jump List actions for setting its own available status, and Windows Media Player has Jump List actions for skipping tracks or stopping. Likewise, you can add tasks that invoke actions on the same executable. If the application isn't running (remember that the Jump List is still available), this will cause it to be launched with the right argument. That's no problem. What if it's already running though?

The key is to find a way to pass messages between running instances. When the application starts up, check to see if another instance is running by using a Mutex (see Program.cs). If not, just use the arguments directly. If it is running, send the information about the parameter to the other instance and then quit. You could use temporary files, shared registry keys, or memory-mapped files. I find it easiest to use window messages.

You can find the code to create custom message ID's, to find the right window, and to send the message in my WindowsMessageHelper class.

From the main window code, override the WndProc method. This is the message loop for everything: mouse events, key events, window closing, and much more. Ensure that the message is something you need; otherwise pass it on to the underlying handler.

If the application is already running, post a message. If not, start as usual and watch your message queue. If you see a message of interest, take some action (in this case, just showing a message and changing a color).

The only other tricky thing to remember, is that you might startup as the only instance, and also have a parameter. For example, if the user clicked a task on the Jump List but the application isn't running. I take the easy way out and check for parameters after fully starting up and then post to my own queue if needed! That simplifies some of the logic anyway.

If you don't mind using the Microsoft.VisualBasic.ApplicationServices namespace from C#, then you can take advantage of the VB SingleInstance application mode. This removes the need for any explicit mutex, interop, or message passing. You can find some great information about this on Jocelyn Villaraza's excellent blog post.

Registering a File Type

Remember: unless you're registered as a file handler for the type, you can't show recent or frequent files or point to individual files. Register to be a file handler by creating a registry write operation to a key under HKEY_CLASSES.

The problem is, you can't write to the HKEY_CLASSES branch of the registry without proper permissions. By default, permission is only granted to the Administrators group. You really don't want to require that your application run under administrative privileges-that would be so Windows XP!

There are two alternatives: you could create a second application that can run elevated in order to perform the registration. This is how the samples do it with the Windows API Code Pack. A better method is to create a custom installer for the project and perform the association there. Installers always require administrative rights, and they only need to run once.

Creating the Installer

To create the installer, first add a setup project to your solution, following the usual steps. Then, from the Project types list, click Other Project Types | Setup and Deployment. In the Templates list, click Setup Project. Give it a name, then add it.

From Solution Explorer, right-click the setup project, then click the View | File Types menu command.

From the File Types list, right-click File Types on Target Machine, and then click Add File Type. Fill out the properties to name the file type and provide the extension. For Command, be sure to set it to the Primary output of the main project.

The file type should appear like the following in the File Types tab:

Now you have a registered file type. You still need to modify your setup project to copy the primary output (the EXE) to Program Files and customize any other properties in the setup project, but these are the special steps for file types. If in doubt, take a look at sample code to see how the Setup project is configured.

Conclusion

Working with the Windows API Code Pack makes it much easier to customize the taskbar and add Jump Lists, and gives you a great experience that really integrates well with the system. Download Visual Studio Express, grab the Windows API Code Pack, and start digging in.

The new features won't work on machines prior to Windows 7, so be sure to check that they're supported.

bugs on your screen?

Coding4Fun — Mon, 07 Dec 2009 18:13:00 GMT

Adam Kinney created a fun example squishing bugs to show off Silverlight 4.0’s webcam support. He created simple motion detection using a diff calculation on multiple threads to figure out where his finger was to smooth the bugs! Here is a video showing off the project.

If you want to check out the source code for BugCamSmash, Adam has that along with a few other helpful hints at his blog post.

In addition, Adam is posting articles on how he created the application as well.

Coding4Fun at PDC 2009 – Video Montage

Coding4Fun — Fri, 04 Dec 2009 18:25:00 GMT

We’ll be posting one project each month but here is the Coding4Fun booth at PDC 2009! You can even view the Iron Bartender challenge at GeekFest as well!

Overall Recap of each project

Iron Bartender!

Is this frame straight?

Coding4Fun — Thu, 03 Dec 2009 07:27:39 GMT

Joel Ivory Johnson created a rather functional program for his Zune HD. Joel created a bubble level based on the accelerometer in the Zune HD to get the tilt of the device. From that data and everyone’s favorite theorem, he created a bubble level!

Joel also explains the math needed for doing this such as calculating the direction and the magnitude.

Vector3 accelReading = accelState.Acceleration;

tiltDirection = (float)Math.Atan2(accelReading.Y, accelReading.X);
tiltMagnitude = (float)Math.Sqrt(accelReading.X * accelReading.X + 
                 accelReading.Y * accelReading.Y );

Creating a Pinball Game in Silverlight: Using the Physics Helper Library + Farseer Physics

Coding4Fun — Mon, 30 Nov 2009 22:20:00 GMT

In this tutorial, we'll create a Silverlight pinball game using Behaviors, a new addition to Expression Blend 3 & Silverlight that allows you to create interactivity with little or no coding.

Below you'll find a video and step-by-step walkthrough.

Andy Beaulieu
http://www.andybeaulieu.com/

Run It: View The Demo
Code It: Download the Source

Difficulty: Intermediate
Time Required: 4 Hour
Cost: Free!
Software Needed: Microsoft Expression Blend 3 (Free Trial), Microsoft Visual Studio 2008 or Visual C# Express, Visual Studio Tools for Silverlight, Physics Helper Library. To help get setup quicker, try Web Platform Installer.

Open the video player in a new window/tab

Setup and Prerequisites

First you have to setup Physics Helper controls into Expression Blend. Follow these steps:

Download the Physics Helper ZIP file from http://physicshelper.codeplex.com/Release/ProjectReleases.aspx
Extract the ZIP file contents and dump them into a folder.
Run install.bat. (Note: this copies a few required assemblies to a folder in Blend 3.)

Getting Started & Making the Ball

Next, you create the controller and the pinball. Here's how.

Open Expression Blend 3 and create a new “Silverlight 3 Application + Website” named PinballGame.
Change your default layout container to a Canvas. You can do this in the Objects and Timeline panel by right-clicking LayoutRoot and selecting Change Layout Type/Canvas. Canvas layout containers are better for games because they allow for positioning of elements at absolute (x,y) coordinates.
Give the application a bigger default size. Select the UserControl element in the Objects and Timeline panel. Then, in the Properties panel, change the Width to 800 and the Height to 600.
Add a Physics Controller Behavior to our main game Canvas. From the Asset Panel, find the PhysicsController Behavior and drag it to the Objects and Timeline Panel. Then, drop it on the LayoutRoot Canvas.
Change a few of the PhysicsController's properties, to make it easier to use. In the Objects and Timeline Panel, select the PhysicsControllerBehavior assigned to LayoutRoot. Then, set the highlighted properties as follows in the Properties Window:
1.) Decrease the vertical gravity to 250
2.) Increase the iterations to 200. This will help with collision detection in a fast-action game.
3.) Set MousePickEnabled to true. This will allow us to manipulate objects with the mouse during development and testing.
Create a "playing field" for the pinball. To do this, draw out a Rectangle onto the artboard, just off the bottom of the user control bounds. Set the properties of the Rectangle as follows:

Name: rectPlatform
Fill: select a color of your choosing (light blue is selected below).
To make “rectPlatform” a physics element, we need to add a PhysicsObjectBehavior to it. Find the PhysicsObjectBehavior in the Assets panel and drag/drop it onto rectPlatform on the Artboard.
In the Objects and Timeline Panel, select the PhysicsObjectBehavior belonging to rectPlatform. Then in the Properties Panel, set the IsStatic property to True so that the platform will stay in place.
Next we’ll create the ball. Draw out an Ellipse near the very top of the UserControl and set the following properties:

Name: ellBall
Height: 50
Width: 50
Fill: A color of your choosing.
To make the ball a Physics Object, we need to add a PhysicsObjectBehavior to it. From the Asset Library, drag and drop a PhysicsObjectBehavior onto ellBall.
Run the project by clicking F5. The ball should fall and hit the platform. Use the mouse to manipulate the ball.

Making the Flippers

In a pinball game, the Flippers are controlled by the player and are used to move the ball up the playfield. Standard pinball games have one right and one left flipper, but many games have three or more flippers located in various locations on the playfield. We’ll create two user controls to represent the flippers – a right flipper and a left flipper – that way we can easily add as many flippers as we want to our main playfield.

In the Projects Panel, right-click the PinballGame (Silverlight) project and select Add New Item. Select UserControl and name the control LeftFlipper.xaml.
In the Objects and Timeline Panel, right-click LayoutRoot and select Change Layout Type/Canvas. This is required for the Physics Helper to work with nested User Controls.
In the Objects and Timeline Panel, select the UserControl element and set its Width and Height to 200 x 200 pixels in the Properties Panel.
Draw out a Rectangle that is about 200 x 50 pixels big, centered in the user control. Round the corners of the Rectangle.
From the main Blend menu, select Object/Path/Convert to Path. This will create a new Path element from the Rectangle primitive. Then select the Direct Selection tool from the Toolbox, which will allow you to manipulate the individual points on the Path.
Select the top, left two points on the Path and move them down so that you end up with a more “flipper like” shape:
In the Toolbox, select the Selection arrow and rotate the flipper 45 degrees so that it looks similar to this (be sure the flipper is still within the bounds of the user control):
Right-click the flipper Path and select Group Into/Canvas. Name the Canvas cnvLeftFlipper and resize it so that it surrounds the entire flipper Path. Note that you could “embellish” the cnvLeftFlipper with additional elements if you wish.
Next we’ll create a Joint so that the Flipper can rotate on an axis. We’ll need something to anchor the joint to, so first let’s add a small Static object to hold the Joint in place. Draw out a Rectangle at the upper left of the flipper and name the Rectangle rectHolder.
To add a Joint, we will need a UI element to visually represent where we want the joint created. You can use any element you want for this, but an Ellipse works pretty well. Draw out an Ellipse on top of the rectHolder.
Now we can add all of the required Physics Behaviors to the User Control.
1. From the Asset Library, drag a PhysicsObjectBehavior to the rectHolder Rectangle. Set its IsStatic property to True. Since we don’t really want to see the rectHolder in our UI, just send it to the back of the elements (Right-click, then select Order/Send to Back).
2. Drag a PhysicsObjectBehavior to the cnvLeftFlipper Canvas. Set the RestitutionCoefficent property to “0.1”. (This makes the flipper a bit more “bouncy” on collisions)
3. Drag a PhysicsJointBehavior to the Ellipse. Set the Body1 property to “cnvLeftFlipper” and the Body2 property to “rectHolder”. Set the CollisionGroup to “1” and the AngleLimitLower and AngleLimitUpper to 0 and 50 respectively. Also enable the AngleSpring:
4. Drag a PhysicsApplyTorqueBehavior to cnvLeftFlipper. We want to apply Torque when the user presses the Left arrow key, so we’ll create a Trigger for this. Select the Behavior and in the Properties Panel, click the New Trigger button.
  
  Select the PhysicsKeyTrigger type from the popup.
  
  Set the Key property for the Trigger to “Left” and the TorqueValue to -100000
Build the Project so that the LeftFlipper user control is available.
Open MainPage.xaml and drag an instance of LeftFlipper from the Asset Library onto the Artboard. Position it near the bottom of the user control and slightly to the Left.
Run the project and try the flipper with the Left arrow key.
In this step, we’ll create a copy of “LeftFlipper” to make a “RightFlipper”. In the Projects Panel, right-click LeftFlipper.xaml and select Copy. Then right-click the PinBallGame Project and select Paste.
You now have a new User Control named “Copy of LeftFlipper.xaml”. Rename this to RightFlipper.xaml. Then in the code-behind file, make sure the Class and Constructor are also renamed to “RightFlipper”.
Change to XAML view for RightFlipper.xaml and change the x:Class attribute so that it inherits from RightFlipper:
```
<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
xmlns:i=&amp;quotclr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:pb="clr-namespace:Spritehand.PhysicsBehaviors;assembly=Spritehand.PhysicsBehaviors" 
x:Class="PinballGame.RightFlipper" 
d:DesignWidth="640" d:DesignHeight="480" Height="200" Width="200">
```
Open RightFlipper.xaml and find the pathLeftFlipper element. Rename this to pathRightFlipper. Then, rename “cnvLeftFlipper” to “cnvRightFlipper”. Rename “rectHolder” to “rectRightHolder” and position the rectHolder and joint ellipse so that they are in the correct location for the flipper:

Modify the PhysicsJointBehavior for the joint in the Objects and Timeline Panel. Change BodyOne to “cnvRightFlipper”, BodyTwo to “rectRightHolder” and change the Angle limits so they are appropriate for the opposite flipper:

Select the PhysicsApplyTorqueBehavior for cnvRightFlipper in the Objects and Timeline Panel. Change the Key property for the trigger to “Right” so that it will initiate on the Right Arrow key down. Also change the TorqueValue so that it will apply torque clockwise:
Add an instance of RightFlipper onto the MainPage.xaml and position it to the right of LeftFlipper.
Test the project by clicking F5. You can now click left and right arrows keys to manipulate the paddles.

Creating the Playfield + Scrolling

Now let’s create more of a playfield for our Pinball game and add a Camera control so that the game will scroll and always follow the pinball. Feel free to tweak the design as you wish.

Open MainPage.xaml in Expression Blend and zoom out by using Ctrl plus minus (Ctrl -).
Draw out a Path using the Pen tool for the right border. Note that you can extend above the upper bounds of the User Control. Group this into a Canvas named “cnvLeftBorder” (right click the Path and select Group Into/Canvas).
Drag a PhysicsObjectBehavior from the Asset Library onto cnvLeftBorder and set the IsStatic property to True. Also set the CollisionGroup property to “1” so that collisions will not occur between the border and the Flippers.
Repeat Steps 2 and 3 above for the right border, naming that cnvRightBorder. You should have something similar to the following:
Continue adding border controls and applying physics behaviors until you are happy with your playfield. Make the playfield completely closed in so that the ball cannot escape (except by the bottom trap of course!)
You can also add more LeftFlipper and RightFlipper controls so that the player can more easily move the ball up the playfield. Here is one example playfield design:
To enable scrolling, we can add a Camera Controller to the ball, causing the camera to follow the ball around the screen. Drag a PhysicsCameraBehavior from the Asset Library onto the ellBall element.

Creating a Kicking Target

Pinball games have lots of different types of targets – some are simple sensors which give points on contact, others are little toys that gobble up the ball for a few seconds. In this step, we’ll create a Kicking Target, which gives points when hit by the ball but also kicks the ball back in the opposite direction.

Create a new User Control named KickingTarget.
Change the LayoutRoot container to a Canvas by right-clicking and selecting Change Layout Type/Canvas.
Select the [UserControl] in the Objects and Timeline Panel and set its Width and Height to 100 x 100.
Draw out an Ellipse that is 90x90 pixels, and positioned at Left, Top 5,5 (so that it is centered in the control).
Draw out a second Ellipse that is 70x70 pixels and positioned and Left, Top 15, 15.
Group the two Ellipses into a Canvas by selecting them both in the Objects and Timeline Panel and selecting Group Into/Canvas. Name the Canvas “cnvKicker”.
Drag a PhysicsObjectBehavior from the Asset Library onto cnvKicker. Set the IsStatic and RestitutionCoefficient properties as shown below. Setting the RestitutionCoefficient above a value of 1 will make the object “kick” things back.
Build the project so that the new user control is available. Then open MainPage.xaml and add a few instance of “KickingTarget” to the page.
Run the project and try out the Kicking Targets.

Optimizing Performance

Our pinball game is looking up, but the performance could be a lot better. The startup time for the game is taking quite awhile because the Physics Helper Library is determining the outline of all of the shapes. Also, the frame rate is too low.

By default, Silverlight has a target frame rate of 60 frames per second. This is great for a lot of casual games, but Pinball requires a bit more speed. Additionally, Silverlight 3 introduces GPU Acceleration which can greatly increase the performance of our game by offloading graphics operations to the Video Card.

Open the Default.html page in the website project. This page hosts the Silverlight control and exposes the plugin parameters. Add the following parameters to the plug in to increase the default frame rate and enable GPU Acceleration for our game.

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="800" height="600"> 
<param name="source" value="ClientBin/PinballGame.xap"/> 
<param name="onerror" value="onSilverlightError" /> 
<param name="background" value="#010141" /> 
<param name="minRuntimeVersion" value="3.0.40624.0" /> 
<param name="MaxFrameRate" value="160" /> 
<param name="EnableGPUAcceleration" value="true" /> 
<param name="EnableCacheVisualization" value="false" /> 
<param name="autoUpgrade" value="true" /> 
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&ampv=3.0.40624.0" style="text-decoration: none;"> 
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> 
</a> 
</object>

Apply the CacheMode attribute to all elements in the game that are static. Since our pinball game’s elements are not animated, we can apply the CacheMode to each of them. (If the objects contained animations within them, then the Cache would be invalidated during animation).
```
<Rectangle x:Name="rectPlatform" CacheMode="BitmapCache" Fill="#FF8AD0C9" Height="70" Width="800" Canvas.Left="-14" Canvas.Top="2172" Opacity="0"> 
<i:Interaction.Behaviors> 
<pb:PhysicsObjectBehavior IsStatic="True"/> 
</i:Interaction.Behaviors> 
</Rectangle>
```
Now we’ll speed up the startup time by adding in a pre-calculated Point Cache. The Physics Helper Library echoes out the calculated points at runtime. Open the project in Visual Studio, and run with debugging on. In the Output Window, Find the ReadBoundaryCache method that was echoed out and Copy the entire method.
Note that the copied code can contain multiple rows of the same points. You can trim out any rows that are duplicated, for example cnvRightFlipper_1 is a copy of cnvRightFlipper, so you can remove that from the list of points.

In order to load the list of boundary outlines into the Physics Controller, we need to get a reference to the controller through code. Open up MainPage.xaml.cs and add the highlighted code:

public partial class MainPage : UserControl 
{ 
    PhysicsControllerMain _physicsController; 
    public MainPage() 
    { 
        // Required to initialize variables 
        InitializeComponent(); 
        this.Loaded += new RoutedEventHandler(MainPage_Loaded); 
    } 
    void MainPage_Loaded(object sender, RoutedEventArgs e) 
    { 
        _physicsController = LayoutRoot.GetValue( PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain; 
        BoundaryCache.ReadBoundaryCache(_physicsController); 
    } 
}

Run the project and test the performance. Note that items that have a tint applied to them (Red, Blue, etc.) are NOT being cached and GPU accelerated.

Scoring

In this section, we’ll embellish our game with a Score.

We’ll create a Canvas that overlays our main Canvas to contain a High Score TextBlock. This is so that the Score TextBlock will not scroll with the rest of the Playfield. Open MainPage.xaml and the select LayoutRoot in the Objects and Timeline Panel. Right-click LayoutRoot and select Group Into/Canvas.
Add a new StackPanel into this outside Canvas that contains two TextBlock aligned Horizontally. The first TextBlock should contain the Text “Score:” and the second TextBlock should contain the Text “0”. Set the Font Size to a larger value, around 12 pt. Position the TextBlock at the Top, Left portion of the Canvas.

Next we’ll handle the Collision event for the Physics Controller so we can add to the score. Open MainPage.xaml.cs and add in a Property wrapper for the current score:

public int Score 
{ 
    get 
    { 
        return Convert.ToInt32(txtScore.Text); 
    } 
    set 
    { 
        txtScore.Text = value.ToString(); 
    } 
}

Handle the Collision event for the Physics Controller and increment the Score.

void MainPage_Loaded(object sender, RoutedEventArgs e) 
{ 
    _physicsController = LayoutRoot.GetValue(PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain; 
    BoundaryCache.ReadBoundaryCache(_physicsController); 
        _physicsController.Collision += new PhysicsControllerMain.CollisionHandler(_physicsController_Collision); 
} 

void _physicsController_Collision(string sprite1, string sprite2) 
{ 
    if (sprite1 == "ellBall" && sprite2.StartsWith("ellKicker")) 
        Score += 10; 
}

Tracking Lives

When the ball collides with the “rectPlatform” obstacle at the bottom, the ball has been lost and we should launch a new ball.

Add a new ChildWindow to the project named “LostTheBall.xaml”.
Set the “Cancel” button’s Visibility to Collapsed.
Add a TextBlock and set its Text to a message for the user stating the ball was lost.

Add code in MainPage.xaml.cs to display the dialog and reset the ball.
LostTheBall _lostTheBall;

void _physicsController_Collision(string sprite1, string sprite2) 
{ 
    if (sprite1 == "ellBall" && sprite2.StartsWith("cnvKicker")) 
    { 
        Score += 10; 
    } 

    if (_lostTheBall == null &&ampsprite1 == "ellBall" && sprite2 == "rectPlatform") 
    { 
        _lostTheBall = new LostTheBall(); 
        _lostTheBall.Closed += new EventHandler(dialog_Closed); 
        _lostTheBall.Show(); 
    } 
} 

void dialog_Closed(object sender, EventArgs e) 
{ 
    _lostTheBall = null; 
    PhysicsSprite ball = _physicsController.PhysicsObjects["ellBall"]; 
    ball.BodyObject.Position = new Vector2(460, 430); 
    }

Adding Sound Effects

We can easily add buffered sound effects using the PhysicsSoundBehavior.

In Visual Studio, Import two sound files into the project, score.wma and click.wma. Set their Build Action to Content.
Open MainPage.xaml in Expression Blend. Drag a PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Drag another PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Drag another PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Run the project.

About the Author

Andy Beaulieu is a software developer and trainer who is well versed in many Microsoft technologies including Silverlight, ASP.NET, ADO.NET and WindowsForms. Visit Andy's Blog for more fun and games with Silverlight.

INotify on new changes

Coding4Fun — Mon, 30 Nov 2009 06:57:14 GMT

Jaime Rodriguez has a great post on some of the interesting things we at Microsoft have on one of our internal discussions, namely the WPF one.

The big one I noticed was that my favorite was smack at the top. INotifyCollection is now going to be part of system.dll so you can make your now see if stuff gets modified!

Subject: Any chance of INotifyCollectionChanged moving to the core .NET libraries?

The System.Collections.Specialized.INotifyCollectionChanged interface is defined in WindowsBase.dll (primarily a WPF assembly) but my customer believes it should be pushed down into the core BCL so that other project types can benefit from it without requiring a reference to WPF/WindowsBase.

Is this planned for 4.0 or later?

Answer:
INotifyCollectionChanged, ObservableCollection<T>, and ReadOnlyObservableCollection<T> have been type forwarded into System.dll for .NET 4.

Silverlight Development

Coding4Fun — Wed, 18 Nov 2009 23:00:00 GMT

With Silverlight 4.0 just announced, here are some great posts / helpful tips on getting started with Silverlight in general.

Channel9 has a training course.
Tim Heuer has a 7-part series “Getting Started with Silverlight”.
Shine Draw is an awesome “Flash vs Silverlight” repository that can show you how to do an event in either technology.
Silverlight.net has an abundance of information. They also have Community Samples as well.

Coding4Fun at PDC!

Coding4Fun — Tue, 17 Nov 2009 18:09:56 GMT

Coding4Fun is in attendance at the Microsoft Professional Developer Conference! We are demoing 5 projects that will have full how-to’s and will be open-sourced as well. Drinktendr, Mind Blaster, Laser Graffiti, Augmented Reality, and Wi-Fi Warthogs are powered by .Net, XNA, WPF, Ling2Sql, WiiMote, MSMQ, Power Wheels, a Mind Set and a giant freaking laser!

Drinktendr

Ever get tired of pouring your own drink? Have someone get upset at you since it was too strong or too weak? Well, why not have a machine pour you the perfect beverage every time! Drinktendr uses Linq2Sql and SQL Server to know what drinks it can make with what is on hand. Combine this with WPF; the end user is given a top end experience.

Mind Blaster

With aliens threatening to invade Earth, it’s your job to travel into outer space and destroy the alien threat…with your mind! Wearing a brainwave detecting headset, coupled with head tracking hardware using a wiimote, use only your brain to destroy alien ships before they destroy you and the rest of humanity.

Laser Graffiti

Putting graffiti on something is not a very nice thing to do but what if with a flick of a switch, it was gone. With a projector, an off the shelf webcam and a laser pointer, you can do just that. Aim the laser at the building and start drawing. Turn off the laser and it all goes away! Using WPF and XNA, we can apply a variety of effects including fire, paint, and various particles. This project was influenced by the Graffiti Research Lab.

Augmented Reality

We’ll be showing off two AR games. ARroller and AR Domino Knockdown. ARroller is a single-player “marble game” experienced through a 3DOF-tracked video–see-through head-worn display. The player holds a tracked board on which a virtual marble must be manipulated through a maze of obstacles by tilting and moving the board. AR Domino Knockdown is a two-player first-person-shooter. Players hold 6DOF-tracked UMPCs through which they fire virtual balls at a configuration of virtual dominos on a shared table.

Wi-Fi Warthogs

Go big or go home. After seeing Halo, we decided we had to make some remote control wart hogs to play laser tag with. Using Xbox controllers, a wireless network, and Power Wheel cars, we’ve made a game of laser tag like no other.

XNA Role Playing Game (RPG) Starter Kit

Coding4Fun — Mon, 16 Nov 2009 20:31:00 GMT

Charlie Calvert has created great post covering the XNA Role Playing Game Starter Kit from the XNA team.

Charlie talks about the tile engine and the quest engine. The tile engine supports several layers to create a complex final level. The first layer allows you to define a basic landscape or the interior of a building. A second layer allows you to decorate it with trees, chairs, or other objects. A third layer contains your sprites, and a fourth layer defines the boundaries inside which the sprites can move.

The downloads for the RGP Starter Kit are broken out into versions for XNA Game Studio 2.0 and 3.0. There is also a distinction between code that targets Windows and code for the XBox:

Here are some additional links

Home page and some documentation for the starter kit.
Forum thread for discussing the kit.
Information on the quest engine.
Information the the tile engine.