Flexible Progress Control

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

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

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

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

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!

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

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

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

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.