house of mirrors

Labyrinth Sample for Windows Phone

noreply@blogger.com (Pete) — Mon, 15 Mar 2010 17:53:00 +0000

When I finally got my hands on the Windows Phone developer tools the first thing I wanted to do was to see how well Silverlight on the phone would work for making 2D games, so I decided to make a Labyrinth style game.

The setup is fairly straightforward- I’m using the same Box2D physics engine & Silverlight adapters that are included in the behaviors library I sent out in November. Basically the physics engine is running on the root of each level and the accelerometer from the Windows Phone device is hooked up to control the gravity of the physics engine. When the game is running in the emulator rather than a real device I simulate an accelerometer by dragging the mouse.

The basic application took about half a day to get running and another full day of playing around creating random levels (I tried to make it somewhat non-traditional). After that it was just polish and lots of play-testing (of course!).

The game uses the standard Windows Phone styling and navigation model to navigate between levels. Isolated storage is used to store how long it took to complete a level.

Standard Labyrinth-style level- everything is vector graphics & controls except for the wood textures. Uses the hardware accelerated drop-shadow effect for depth on the walls and the ball.

I was having a real good time playing around with alternate level ideas- this one is probably my favorite. Basically when the ball hits a flipper, the flipper activates and knocks the ball away. It’s a pretty tough level :)

This one is a bunch of magnets that push the ball away from them. It’s a pretty fun level to play as well.

Source code: Madness.zip

Flexible Progress Control

noreply@blogger.com (Pete Blois) — Mon, 11 Jan 2010 00:06:00 +0000

A while ago I was looking for an easy way to design decent preloaders- hopefully to allow people to create something along the lines of some of these Flash preloaders showcased in Smashing Magazine.

The approach that I put together is a custom control (StoryboardedProgressControl) which is a subclass of ProgressBar, but uses an Storyboard to represent the loading progress. To use it you just create an animation of what the loading progress should look like and it just seeks to the appropriate time. This way you can represent progress in anything which can be animated- colors, paths, etc.

StoryboardedProgressControl.cs

Sample Application, sample source. (thanks to Celso for the Bottle loader graphics!)

Source Code Browser

noreply@blogger.com (Pete Blois) — Mon, 30 Nov 2009 20:31:00 +0000

I hadn’t gotten a chance to play with Silverlight 4’s new RichTextArea control before PDC but really wanted to give it a try. With the holidays I was finally able to give it a try on an app that I had been wanting to put together for a while- a source code browser that works similarly to Flex’s source code publishing feature.

What I did was put together an app that downloads a zipped up project file from the server, finds all of the solution files then parses the solutions and projects to create a project browser. When a file is selected it gets displayed in a RichTextArea with some primitive syntax highlighting.

This way rather than having to go through the bother of downloading the source code, unzipping it, opening it in VS just to see a chunk of code, you can easily browse it in the web page. By working off of zipped projects, it doesn’t require any additional steps to publish beyond what I was already doing in uploading the zipped source.

And thanks to Ben Lemmon who helped out with some code to parse the ZIP file headers making it easy to walk the files of a ZIP package.

Source Code Browser Source (and demo of it in action)

PDC Samples

noreply@blogger.com (Pete Blois) — Mon, 30 Nov 2009 19:44:00 +0000

The week before last I was at PDC and did a little talk on creating behaviors, for this talk I used a number of behaviors from the Expression.Samples project on CodePlex along with some additions that I’ve been working on.

I have an updated version of the Expression.Samples project to support .NET 4, Silverlight 4 and also adding Physics support (based on the Box2D physics engine) and a sample of an action with Python script.

The source code for the Silverlight 4 version of the Expression.Samples project.

(I’m experimenting with a source code browser that allows viewing zipped solutions to save the hassle of downloading a ZIP and opening it with Visual Studio).

Creating Silverlight control templates from Illustrator

noreply@blogger.com (Pete Blois) — Thu, 20 Aug 2009 02:34:00 +0000

In the previous post I showed off a Silverlight nine grid, this one explains how to leverage it to create control templates from Illustrator comps of controls.

(I wrote this a while back but am not super happy about the workflow. I decided to post it anyways in the hope that it might be a helpful to someone).

I’m starting with a basic button that Billy Chow (a graphic designer on the Blend team) put together- it just has the basic states of a button.

Illustrator source file

First step is to import the Illustrator file into Expression Blend and do some grouping and organization on the file.

When working with paths in Silverlight I always like to turn off Layout Rounding- this can cause rounding errors which come back as visual cropping and such later on. To do this, just select the root of the imported object and turn off the UseLayoutRounding property- it’s under advanced layout.

Next select the groups of paths that compose each of the states, group them each into a grid and name the grid with the state name:

First state grouped and named:

And while you’re at it, delete all of the TextBlocks that are the content of the Buttons- we’ll have the text come from the Button itself later.

Next select all of the state groups and set their Left and Top properties to 0 so they are all on top of each other.

Group them into a Grid (control-G)

Then put that Grid into a NineGrid control to handle the scaling:

Tweak the bounds of the NineGrid to get the right scaling regions- for this sample I used 6 pixels on the left and right, 5 top and bottom.

Next, right-click the NineGrid, choose ‘Make Into Control…’, choose Button, then OK.

Setting up the states

At this point we have a scalable, reusable Button template. Next step is making the visuals update with the state changes.

Let’s rearrange the state groups so that we have some visual priority- making the mouse states appear over the focus states:

Next select all of the state groups except Normal and set their visibilities to Collapsed.

Then go through each of the states in the States pane and set each of the corresponding part’s visibility to Visible for the state:

· In the MouseOver state set Hover to Visible

· In the Pressed state set Click to Visible

· In the Focused state set Focus to Visible

Build & run the application!

Silverlight Nine Grid

noreply@blogger.com (Pete Blois) — Sat, 08 Aug 2009 00:47:00 +0000

I was recently working on a project where I ran into a need for a nice nine grid (or scale 9 grid) and realized that with some of the new additions in Silverlight 3 and Blend 3 that one could put together a pretty sweet solution based on pixel shaders and the new design-time extensibility in Blend.

Nine Grids

Just in case everyone isn’t aware of what a nine grid is, it’s a technique for splitting up an image into 9 pieces then scaling those pieces to simulate layout-aware resizing rather than uniform scaling. Nine grids are very useful because they allow graceful resizing of otherwise non-resizable images.

Normally nine grids are done using either one image duplicated, scaled and cropped into 9 parts but I realized that this could be done much more elegantly with a single shader to handle the appropriate stretching. The real big benefit of using an effect is that vector path data from tools such as Illustrator can be nine-gridded in addition to images. A pixel shader also results in a much lower framework element count which helps keep control instantiation time zippy.

Design-Time

Using Blend 3’s new design-time extensions I was also able to put together a solid editing experience complete with adorners on the design-surface- makes it quick and easy to configure.

Source and binaries.

Explode!

noreply@blogger.com (Pete Blois) — Mon, 13 Jul 2009 19:37:00 +0000

My favorite thing to do with behaviors is to make interfaces explode- I've been doing this for years and it never fails to lighten up my day. With behaviors in Blend 3 and perspective transforms in Silverlight 3 I was finally able to make an decently gratifying explode behavior.

Explode.cs

Expression Blend Samples

noreply@blogger.com (Pete Blois) — Mon, 13 Jul 2009 18:48:00 +0000

We've been working on a set of behaviors and effects for use in Expression Blend 3, beyond the set that are being shipped with the product. These are mostly experimental or 'interesting' ones that can be useful in a variety of different circumstances.

The source code and an installer to have them automatically appear in Blend can be found on the Expression Blend CodePlex site.

Some of the triggers, actions and behaviors which are included:

PlayMedia- plays a media element
PauseMedia- pauses a media element
TogglePlayPauseMedia- toggles between play/pause on a media element
StopMedia- stops a media element
MouseGestureTrigger- triggers an action when the user makes a gesture on the element.
MouseEventTrigger- allows more complex mouse triggers such as double-click or firing from handled events
StateChangedTrigger- triggers when the state is changed
CallDataMethod- calls a method on the data context
InvokeDataCommand- executes a command on the data context
DataEventTrigger- triggers when an event is raised on the data context. Useful for doing something such as playing a sound or animation when something happens on the data context
SetDataProperty- sets a property on the data context
DataStateBehavior- switches between two states depending on the value of a binding
FluidBindProperty- acts as a proxy for databound properties in order to animate the changing of the value
PropertyChangedTrigger- triggers when the value of the property changes, regardless of the new value
ClippingBehavior- Provides a rounded rectangular clipping that scales with the element. Useful since Silverlight and WPF clipping geometries don't scale with objects
GoToNextState- Go to the next state in a VisualStateManager. Useful for quickly navigating between various states
GoToPreviousState- Go to the previous state in a VisualStateManager. Useful for quickly navigating between various states
SetProperty- Similar to ChangePropertyAction but allows incrementing as well as setting
ShowMessageBox- Displays a standard message box to the user
ListBoxAddOne- Action which duplicates a random item in the ItemsSource collection of a ListBox. Useful for SketchFlow prototypes where you want to show adding a new item
ListBoxRemoveOne- Action which removes a random item in the ItemsSource collection of a ListBox. Useful for SketchFlow prototypes to simulate removing an item.
ListBoxRemoveThisItem- Action for use inside of a ListBoxItem which will remove the item from the data collection of the owning ListBox.

The source code for the project also includes quite a bit of design-time work and might be useful as a reference if anyone is wondering how to take advantage of some of Blend's extensibility features for behaviors and effects.

Updated Rooler

noreply@blogger.com (Pete Blois) — Tue, 09 Jun 2009 05:13:00 +0000

Just updated Rooler to add multi-mon support, by popular request :)

As a bonus feature I also added support for high-DPI monitors.

I should have had multi-mon in the first version, but got psyched out by it. Once I sat down to really get it fixed it only took an hour or so- always good when it goes like that. High DPI was a different story, I have my fingers crossed that I didn't break anything :)

Enjoy!

Rooler

noreply@blogger.com (Pete Blois) — Sat, 02 May 2009 21:12:00 +0000

I'm always working on random projects, usually simple utilities to make my life just a little easier. One of my latest projects has been Rooler, a collection of utilities for measuring and analyzing on-screen graphics. I've been doing lots of pixel tweaking stuff on Expression Blend these past couple of weeks and I decided to put something together that would help out. A lot of the inspiration for this came from the really cool OSX-only application xScope- if you're a Mac user then I'd definitely suggest giving it a try.

Anyways, what is this Rooler?

It measures the spacing of graphics:

The size of graphics:

It magnifies:

And it works on any graphics on your screen. HTML, Silverlight, Flash, photos, whatever. As long as it renders on your monitor. Plus there's more. And more crazy ideas to come.

Check out the Rooler site.

DataTrigger, Bindings on non-FrameworkElements, TypeConverters, DataStateBehavior & DataStateSwitchBehavior

noreply@blogger.com (Pete Blois) — Sat, 11 Apr 2009 23:52:00 +0000

One of the behaviors that we've been interested in for quite a while is a DataTrigger which works nicely in Silverlight. If you aren't familiar with WPF, the DataTrigger is used to trigger state changes based on something in your view model rather than in the UI. Normal triggers are great for representing UI state such as 'when the mouse is over this element', but data triggers capture state of the view model such as 'when MyDataObject.UserState == UserState.Online'. It's great for triggering UI states based on changes in your data.

There are a couple of features which aren't in Silverlight yet which made creating a Silverlight DataTrigger interesting, but with a bit of trickery I was able to get a passable version of one working.

I was very interested in preserving the simple XAML syntax of WPF's DataTriggers-

<id:DataTrigger Binding="{Binding Value}" Value="True">
    ...
</id:DataTrigger>

Bindings

The first issue issue is that Silverlight doesn't currently allow databinding on types which are not FrameworkElements. Since none of the Behaviors system derives from FrameworkElement it's not as simple as exposing a DependencyProperty and setting a binding on it.

One trick to adding bindings on behaviors is to expose a property of type Binding on the behavior- you can set a property of type binding, but you can't actually bind to something. To then actually bind this property I declared a dummy attached dependency property and set the binding on the attached DP on the FrameworkElement to which the behavior is attached to. Just listen to when the attached DP changes and presto! you have a functional binding :). It's not the most obvious solution, but I think it's by far the most elegant and functional that I've found. It actually works out quite well and works very well within Blend too.

In the source code which is attached, most of the heavy work here is encapsulated in the BindingListener helper class, you can see it being used in the DataTrigger class.

TypeConverters

Once you have the binding working you also need to get the type of the value to match the type of property that is being bound to. The reason for this is that in XAML the type is just represented as a string and you don't know what type to convert it to until the binding is actually evaluated.

To do this we use type converters when they're available, but for a number of types they are not and in this case we use a little hack which we also use in some places in Blend- serialize the property to XAML and pass that through Silverlight's parser :)

In the source code which is attached, this is encapsulated in the ConverterHelper class.

DataStateBehavior

A DataTrigger in Silverlight is nice, but a really common use of it is combined with a GoToState action to control states. This works fine, but the syntax gets a bit cumbersome since you'd need triggers for both states- the true state and the false state. To make this a bit easier, I made a simple DataStateBehavior which encapsulates the trigger and two actions into a single behavior.

In the scenario where I have a data source 'User' with a property 'IsOnline', I want to have two states in my UI- 'Online' and 'Offline'. When the user is online the 'Online' state should be active, when the user of offline the 'Offline' state should be active.

To do this, it's just:

<i:Interaction.Behaviors>
    <id:DataStateBehavior Binding='{Binding IsOnline}' Value='True'  TrueState='Online' FalseState='Offline'/>
</i:Interaction.Behaviors>

DataStateSwitchBehavior

Of course not all states are quite black and white, for the case of representing a cascade of states to represent something such as the values of an enum, I put together DataStateSwitchBehavior which allow an arbitrary number of values to check against and picks the first valid one.

An example of this is if you have the enum in your view model:

public enum UserSpeed {
    Slow,
    Medium,
    Fast,
}

Then you can set up states for each of these enum values using the DataStateSwitchBehavior which allows specifying a state for each of the enum values:

<id:DataStateSwitchBehavior Binding='{Binding Speed}'>
    <id:DataStateSwitchCase Value='Slow' State='SlowState'/>
    <id:DataStateSwitchCase Value='Medium' State='MediumState'/>
    <id:DataStateSwitchCase Value='Fast' State='FastState'/>
</id:DataStateSwitchBehavior>

Source

Source code and a real basic sample for all of this can be found here.

Behaviors

noreply@blogger.com (Pete Blois) — Tue, 24 Mar 2009 20:02:00 +0000

At the MIX '09 conference last week I got the chance to show off some new things I've been working on with Expression Blend, notably behaviors. I'm quite excited about the power that the behaviors concept brings to the designer workflow and am thrilled to finally see the support for them solidifying.

If you're curious about Behaviors, you can watch my brief talk at the MIX conference here. I just posted all of the behaviors that I used in this talk (and a bunch more) on the Expression Gallery, I'll be posting some more on certain aspects of these and I'll be following up with some of the other experimental ones that I've been playing with.

If you're curious, you can also take a look at some of my old prototypes (have I really been working on these for 3 years?!?) here and here. It's been a fun journey :)

Expression Design Export as a build task

noreply@blogger.com (Pete Blois) — Sun, 18 Jan 2009 21:51:00 +0000

When I made the Minesweeper app a while back I had the original graphics in an Expression Design document and was doing all of the graphics work inside of Design. I got pretty tired of manually bringing the graphics from Design into Blend and decided to take a bit of a diversion to automate the process.

I decided that the workflow that I really wanted to have was to have my Expression Design file in my project system and have a custom build task automatically convert it into XAML for the final project. Design has a great feature called Slices which let you slice and dice the original artwork export those slices and save all of the export settings in the .design file.

I figured out that with a build task and some trickery I could automatically extract all of the slices, generate some additional helper code and make the slices act just like custom controls in the project.

The great part about the workflow is that all you need to do to modify any graphics in your WPF or Silverlight project is:

Make your changes to the .design file in Expression Design
Save the .design file
Build & Run from either Visual Studio or Expression Blend

In addition there are some other cool benefits:

All of the generated controls automatically appear in intellisense in Visual Studio and in Blend's Asset Library
Any images from the export (from images in the original project or rasterized effects) automatically get added to the compile project as well.
All changes to the .design file automatically migrate into the project but there are no intermediate files anywhere in the project. The exported XAML and generated code are purely intermediate files which get cleaned up by a clean build. This means there's no getting out of sync between your .design and .xaml files.
Exporting is only done when the .design file changes, so incremental build times remain zippy.

The steps to make this work in your own project (works for both WPF & Silverlight):

A licensed version of Expression Design 2 installed into your Program Files directory
Add a DesignExport folder to your project and copy DesignExport.targets and DesignExport.exe to this folder. These are the build tasks for converting the .design file to xaml.
Add your .design file to your project by using the Add Existing Item command in Visual Studio or Blend.
Open the .csproj file for your project in Notepad and make the following changes:
- Add a reference to the DesignExport.targets file which was copied over in step #2, usually I do this just below the import statement for the CSharp.targets file

<Import Project="DesignExport\DesignExport.targets" />

Change the build action for your .design file from 'None' to 'Design'

<Design Include="Minesweeper.design" />

Please note that this relies on unsupported functionality within Expression Design, it can (and most likely will) break in any future release.

Source code:

A sample WPF application
A sample Silverlight application
The original Minesweeper project built using the DesignExport build tasks
Source code for the build tasks

Silverlight Skinning

noreply@blogger.com (Pete Blois) — Mon, 10 Nov 2008 02:24:00 +0000

I've never really done too much serious skinning, mostly I focus on apps and usually stick to skinning buttons, listboxes and scrollviewers and such. On Friday I ran across the latest results of the skinning competition over at scalenine and got inspired to see how much progress I could make on a more complete skin in Silverlight. I don't have too much raw design skill so I decided to start with cloning an existing skin rather than going off on my own.

I started off with the winning skin of the scalenine skinning competition and cloned a number of control skins including Checkbox, NumericUpDown, Calendar, and ListBox. All of these controls are from either the Silverlight runtime, SDK or Toolbox.

I decided to do all the theming in pure XAML- no code and no images. I used Expression Blend for the whole theming process and was actually pleasantly surprised by how smoothly the whole process went. I started out on TabControl which I had never really themed before, it took a few minutes for me to get into the swing of it but by the time I got through that and Button I was on a roll and quickly did Button, Checkbox, RadioButton and Calendar.

Calendar was the one that surprised me the most- I'm not a big fan (at all) of Silverlight's default Calendar theme and really tore into it. The Calendar went extremely smooth with good visual editing of all of the parts and various calendar modes. I even redid the entire layout to make it resize correctly (my personal pet peeve :))

Overall it took me ~5 hours to get started and crank out the first TabControl, Checkbox, RadioButton, ComboBox, Slider and Calendar controls, not too bad but I'm definitely getting faster now.

The original Flex version can be found here.

The Silverlight version-

Once I started getting the hang of the whole theming thing I decided to go off on my own a little bit more- still keeping with the original design but there were some parts of it that I wanted to simplify and make the theme a little more subtle.

I decided to call this new theme 'Seattle' since it's such a plain gray theme and this weekend was a plain gray Seattle weekend.

The 'Seattle' theme

All of these are still under development (see the TreeView in Seattle- not quite working properly yet...), but my attention span is short and I'm off to write a game now. C'est la vie.

Silverlight Version

noreply@blogger.com (Pete Blois) — Sat, 01 Nov 2008 21:10:00 +0000

One nifty utility that I've been using for a long time but never got around to publishing is a Silverlight version detector which will tell you the full version that you have installed on your machine. It really isn't that hard to do, but the nice thing about this one is that I've been using it on Silverlight versions way back to before 1.0 was released and the product was still called WPF/E.

I primarily use this code for times when someone calls me up with a problem along the lines of 'something is running wacky on my machine'. It's much easier to just point them to a URL than to list the steps needed to find their version other ways.

Please note that this code is *not* the way that you're supposed to check whether the user has a version installed or not, that's what IsVersionSupported is for. The reason for this is that everyone seems to add bugs when trying to roll their own version detection code, so in the interest of making sure that your code continues to work through future updates, please use IsVersionSupported.

To use IsVersionSupported: Application.Current.Host.IsVersionSupported("2.0.31005.0");

noreply@blogger.com (Pete) — Sat, 01 Nov 2008 19:20:00 +0000

Finally got around to updating a couple of Silverlight samples from older versions, only took me a few weeks :)

Updated samples:

noreply@blogger.com (Pete Blois) — Wed, 09 Apr 2008 03:33:00 +0000

I've heard a number of questions around how to dynamically load content into Silverlight applications and noticed that there isn't too much on the web about it, even though it's not too hard. There are a number of scenarios where it comes in quite handy.

To show this, I made a fun preloader from a sample that Celso Gomes (a designer on the Blend team) put together.

The application complete with the preloader (a sample of an image sequence control that I'm still working on) can be run here.

And the source is here.

Since the preloader is pretty fun to watch, it can be run on it's own from here.

Splash Screens- the only documented method of implementing Silverlight splash screens that I could find is through the 'splashscreensource' parameter on the HTML object tag. That approach works but you'll be coding in Javascript and there is no way to make a seamless transition to the loaded content. (If your imagination about what can be done is failing you, I strongly recommend a stroll through Smashing Magazine's 'Showcase of Flash Preloaders').

By implementing a splash screen through dynamically loading the rest of the app and have much more control over how the content gets transitioned and what gets accounted for in the progress. For instance, the splash screen could download multiple files, or account for web service requests needed to perform app initialization.

Dynamic loading- in order to minimize upfront download size many applications break themselves into multiple parts and either download parts that are needed later in the background or on demand. This is extremely common in large Flash applications.

Add-ins, Plug-ins & Ads- it is strongly recommended that you *do not* use this for loading third-party code such as add-ins and advertisements, there is no sandbox in this example and there is a high potential for exploitation by malicious third-parties.

Setting up the Solution

The basic approach for dynamic loading is to load one Silverlight application ('XAP') into another Silverlight application. In Visual Studio, start with creating a standard Silverlight Application project and making sure that 'Add a new web to the solution for hosting the control' is selected (it's the default). This first Silverlight application can be the preloader.

Next, add a second Silverlight application to the project and choose the 'Link this Silverlight control into an existing Web site'. Doing this will have the second application be automatically deployed into the web site as well.

Downloading the second XAP & showing progress

In the startup for the first XAP the second XAP can be downloaded using any of the web APIs, normally I use WebClient since it seems to be the simplest. You'll want to hook the DownloadProgressChanged event and use this to present progress to the user. In my sample app I abstracted this out into a Downloader control which exposes the URI for the app to be downloaded and has a templated UI to display the progress. Note that Silverlight does not currently have a progressbar control, so I threw one of those in there as well :).

Instantiating an element from the second XAP

Once the download of the XAP has completed and we have a stream to it, it's time to load the assemblies then instantiate an instance of the class which is to be shown. To do this I use the following chunk of code which will parse the XAP, load all referenced assemblies into the runtime, then instantiate a type out of the main assembly:

public static object CreateFromXAP(Stream package, string objectTypeName) {

// Extract the AppManifest from the XAP package
string appManifestString = new StreamReader(
Application.GetResourceStream(
new StreamResourceInfo(package, null),
new Uri("AppManifest.xaml", UriKind.Relative)
).Stream).ReadToEnd();

// Use the XamlReader to parse the AppManifest into managed objects
Deployment deployment = (Deployment)XamlReader.Load(appManifestString);

// Keep track of the main assembly,
// we'll assume that the element to create is located here.
Assembly mainAssembly = null;
// Walk all of the assemblies and load them into the CLR.
// This will load any dependent assemblies.
foreach (AssemblyPart assemblyPart in deployment.Parts) {

string source = assemblyPart.Source;
StreamResourceInfo streamInfo = Application.GetResourceStream(
new StreamResourceInfo(package, "application/binary"),
new Uri(source, UriKind.Relative));

Assembly assembly = assemblyPart.Load(streamInfo.Stream);

if (assembly.FullName.Split(',')[0] == deployment.EntryPointAssembly)
mainAssembly = assembly;
}

// Create a new instance of the object from the main assembly
Type objectType = mainAssembly.GetType(objectTypeName);
return Activator.CreateInstance(objectType);
}

Just call this method with the full name of the class to be instantiated, cast the object to a FrameworkElement, then add it to the visual tree:

FrameworkElement visual = CreateFromXAP(e.Result, "MySampleApp.MainScene") as FrameworkElement;
if (visual != null)
this.LayoutRoot.Children.Add(visual);

Making a reusable preloader

In the project linked above I made the URI for the XAP to download and the path of the main scene parameters to the object tag in the HTML. This way I can reuse the preloader for multiple applications. The arguments are passed via the initParams parameter:

<param
name='initParams'
value='packageSource=ImageSequencerSample.xap,mainVisual=ImageSequencerSample.Page'
/>

And extracted from the StartupEventArgs in the preloader application:

private void OnStartup(object sender, StartupEventArgs e) {
string packageSource = e.InitParams["packageSource"];
string visualName = e.InitParams["mainVisual"];

Minimizing the download size
Often there will be assemblies that are referenced by multiple parts of your application which you only want to download once (perhaps the most common example is System.Windows.Controls.dll). If you know that the assembly will already have been pulled down with an earlier XAP before the second one will need it then you can exclude it from being included in the second XAP by changing the 'Copy Local' property for the assembly reference in Visual Studio to be 'False' (right-click the assembly, select Properties, change Copy Local to False).

Warnings & Known Issues

Loaded content is not sandboxed. XAPs should not be downloaded from domains that are not fully trusted (as a general practice, only download from the domain that your code is running from).
The Application object of the downloaded XAP will never be constructed and the Startup event will never be fired. Any code residing here should be moved into the constructor or Loaded event of the visual to be instantiated.
Application-level resources of the loaded XAP will not be available. The above sample does not merge any app-level resources into the primary application's resources, so any app-level resources will not resolve. Hopefully in the not-too-distant future this will be possible.
There may be some localization issues, but I have not investigated this aspect yet.

Useful classes that I used in the sample above:

Downloader.cs
Progress.cs
generic.xaml (default styles & templates for both)

Fun

noreply@blogger.com (Pete Blois) — Tue, 01 Apr 2008 02:03:00 +0000

That last post was a bit too developer centric, time to balance it out with something more fun. I recycled an old WPF project and converted it over to Silverlight. Lots of fun to play with though it doesn't appear to run all that well on Firefox or Safari (if your browser appears to hang just wait a few seconds).

The source can be found here.

The app can be run here.

Enjoy!

A* Pathfinding

noreply@blogger.com (Pete Blois) — Tue, 01 Apr 2008 01:39:00 +0000

In the process of making a Silverlight Tower Defense app a while back I made a simple sample application of the A* pathfinding algorithm that could be useful for anyone else working on Silverlight games (or games in general I suppose).

I won't do an entire explanation of the A* algorithm, there are tons of great resources out there already (http://www.google.com/search?q=A*+path+finding). The one I referenced most was probably http://www.policyalmanac.org/games/aStarTutorial.htm. This sample contains a bunch of debugging info along the lines of what you'll see at the policyalmanac site, just to make it a bit easier to customize.

The app contains the logic for a couple of different pathfinding routines, notably:

Standard: run-of-the-mill pathfinding
Drunken: I found that my tower defense critters were too predictable, so I added a bit of randomness in to the standard pathfinding
Roundabout: just having fun, critter takes a very long route. Not really useful
Worst: critter tries to find the absolute longest path available without going over the same tile twice.
Speed Bump: critter tries to avoid certain tiles (can weigh the expense of going through a tile). I used this for little bomber-men in my tower defense game- they try to just go through the map but if there's a good shortcut by going through some towers then they'll try to blast a hole and go through :)
Escape: inspired by Chat Noir (a great game on it's own), it's actually Dijkstra's algorithm where the critter just tries to get to the edge.

In case you're wondering, the tower defense app is working, but it's no fun to play at all. Balancing the game turns out to be much more difficult than I expected and everytime I sit down to make some progress I just end up creating new weapons like flamethrowers and nukes or Raiden-style plasma beams.

The sample can be run here.

The source is here.

noreply@blogger.com (Pete Blois) — Mon, 31 Mar 2008 16:40:00 +0000

Quick tip-
The background color of the default Silverlight preloader can be changed by changing the 'background' parameter in the object tag in HTML. Making the preloader and HTML backgrounds match your Silverlight app's background is an easy way to make the loading sequence just that much nicer.

html, body {
    height: 100%;
    overflow: auto;
    background: #4F818A;
}

<object ... >
<param name="background" value="#7F2727" />
</object>

noreply@blogger.com (Pete Blois) — Thu, 27 Mar 2008 19:34:00 +0000

Matt over at Signal vs Noise had a quote that struck a note with me-

All web apps are trying to suck. They are trying to be bloated. They are trying to be unstructured. They are trying to be confusing.
You are the stopgap. You are the one who stands between order and chaos. You are the sniper who must pick off every distraction, unneeded feature, and extra word that doesn’t absolutely have to be there.

http://www.37signals.com/svn/posts/934-ira-glass-entropy-and-software-development

noreply@blogger.com (Pete Blois) — Wed, 19 Mar 2008 02:06:00 +0000

Last week I made 2 minesweeper games, which were fun and all, but the overwhelming response from my friends was "wtf! can't flag tiles with right click!". It took all the fun out of the game.

This weekend I noticed that Google Docs makes nice use of right click gestures and my mission began- enable flagging tiles via right-click in Minesweeper!

Easier said than done, but with the help of some previous investigators in Flash and Silverlight, I was able to hack out a passable solution that works on IE and Firefox (OS X & Windows). Alas, Safari has beaten me once again.

Once I was able to get the right-click event, I needed to figure out which element the mouse clicked on. In Silverlight 2 there's now a HitTest API which made this easy- just hit test with the mouse position and get the first element:

UIElement element in Application.Current.RootVisual
.HitTest(new Point(e.OffsetX, e.OffsetY))

The next step was to figure out a good strategy for propagating the event. In WPF the RoutedEvent class fits the bill perfectly- it's allows propagating any event through the visual tree. Unfortunately even though RoutedEvents are in Silverlight, they are not extensible and I couldn't add my own. Bummer.

I ended up implementing my own variant of RoutedEvents, BubblingEvents (for lack of a better name) and made a super minimal version of them for Silverlight. The code is similar enough to RoutedEvents to be able to start quickly.

To declare a new BubblingEvent:

public static readonly BubblingEvent<ContextMenuEventArgs> ContextMenuEvent
= new BubblingEvent<ContextMenuEventArgs>("ContextMenu", RoutingStrategy.Bubble);

This declares a new event with event args of type ContextMenuEvent which will bubble up the visual tree.

Handling the event is very similar to WPF where the handler is set up for the type:

ContextMenuGenerator.ContextMenuEvent.
  RegisterClassHandler(typeof(Page),
  Page.HandleContextMenuEvent, false);

private static void HandleContextMenuEvent(object sender, ContextMenuEventArgs e) {
  ((Page)sender).OnContextMenu(e);
}

protected virtual void OnContextMenu(ContextMenuEventArgs e) {
  e.Handled = true;
}

Then it's just a matter of flagging the tiles from the event. The event propagation automatically stops when the handled flag is set to true, unless you register for all events- just like WPF's as well.

Once I got this part going then I realized that my mouse wheel handling code could really benefit from this mechanism as well; it was a very easy modification to convert it to use BubblingEvents.

The cool part is that since the event handling registration is done based on types, I could easily and efficiently create a helper that would register for all MouseWheel events on every ScrollViewer in an entire application:

public static class ScrollableScrollViewer {
   private static bool initialized = false;

   public static void Initialize() {
       if (!ScrollableScrollViewer.initialized) {
           MouseWheelGenerator.MouseWheelEvent.
RegisterClassHandler(typeof(ScrollViewer),
ScrollableScrollViewer.HandleMouseWheel, false);
           ScrollableScrollViewer.initialized = true;
       }
   }

   private static void HandleMouseWheel
       (object sender, MouseWheelEventArgs e) {
       ScrollViewer sv = (ScrollViewer)sender;

       double verticalOffset = sv.VerticalOffset;
       if (e.Delta > 0 && verticalOffset > 0) {
           sv.ScrollToVerticalOffset(verticalOffset - e.Delta * 50);
           e.Handled = true;
       }
       else if (e.Delta < 0 && verticalOffset < sv.ScrollableHeight) {
           sv.ScrollToVerticalOffset(verticalOffset - e.Delta * 50);
           e.Handled = true;
       }
   }
}

One call to ScrollableScrollViewer.Initialize() and scrollbars now work 'as expected' :)

Code files used here:
BubblingEvent.cs- implementation of extensible routed events in Silverlight.
ContextMenuGenerator.cs- provides bubbling ContextMenu (right-click) events in Silverlight.
MouseWheelGenerator.cs- provides bubbling MouseWheel events in Silverlight.
ScrollableScrollViewer.cs- makes all scrollviewers in an application scroll with the mouse wheel.

Samples:
Right-click enabled Minesweeper.
Test app for scrolling scrollbars and right click. Source

noreply@blogger.com (pete blois) — Fri, 14 Mar 2008 02:39:00 +0000

Standard minesweeper wasn't quite enough, hex minesweeper just had to be done...

noreply@blogger.com (pete blois) — Wed, 12 Mar 2008 00:55:00 +0000

I had an old Minesweeper app that I did with Aaron Jasinski in WPF a while back that I decided to convert to Silverlight last night, it was actually a fun little project.

Go ahead and play it! (only tricky thing is to use ctrl-click to mark a tile, no right clicks!)

I had to do something to get my spirits up- I was bummed because I had a pretty slick Twitter app that I was all ready to send out that got broken the day before when Twitter disabled their crossdomain.xml file. Bastards!

Ahh well, the Twitter outage sounds temporary, though it will have a lame authentication mechanism when it comes back. They're removing support for HTTP basic authentication because of a security alert on Saturday. I'm not sure what new security alerts had to be found, the stuff is sending the username/password over the wire in plaintext for crissakes! Ah well, enough crying about that.

Minesweeper was easy enough to throw together, took about 2 hours while reusing the core code that I had from the WPF version. I had a good time because I was trying out some prototyping that I'm working on for some Expression Design to Blend & VS integration, which is also preventing me from sending out the source code for now (sorry!).

You can download the Expression Design file for the project from here though.

I did have to recreate a Viewbox control- I'm hoping something like this makes it into the runtime but it wasn't too bad to make from scratch. Feel free to grab my code from here.

Enjoy!

noreply@blogger.com (pete blois) — Fri, 07 Mar 2008 20:23:00 +0000

Andy Beaulieu has really fun example of a Silverlight physics engine: http://www.andybeaulieu.com/silverlight/2.0/polygondemo/testpage.html

I really like how you draw out the elements to be operated on- no pre-canned blocks and other shapes! Lots of fun to make a big stack of objects then draw a big object in the middle- makes the entire stack explode :)