WynApse Home Page
Home    Blog    About    Contact       
Latest Article:

My Tags:
My Sponsors:

Lifetime Member:

Silverlight Reflection Builder

Download the source code

Silverlight Beta 1 Intro

Originally written for an INETA group meeting on February 3, 2007, this article was updated to Silverlight Beta 1 on May 5, 2007. As with all upgrade articles, my intention is to not modify anything on the page unless something is directly impacted by the Beta 1 changes, plus any WPF/E -> Silverlight name changes. Any changes will be detailed near the bottom of the article. I had intended to embed the Silverlight onto this page, but since the Canvas is 900X600, it is a page to itself, so the image below is a link to the html page.

By happy circumstance, this application was 'plumbing' only. Once I switched things around to Silverlight Beta 1, and wired the image and font up, it was a drop-in... woot!

I'm going to leave the "Download" button on this page, even though it downloads the code from February. View->Source will get you the html for my work, and the ReflectionBuilder page itself has the JavaScript and XAML exploded on the page itself.

Original Text

Today the local INETA group had a Vista rollout meeting. We were spectators to multiple great presentations by local developers on topics of Communication Foundation, Workflow, CardSpace, Vista Security and Vista in general, and I presented on Silverlight.

This is a screenshot of the Silverlight 'application' I presented, and the canvas for playing with the application is linked from the image:

The application is all Silverlight, and the canvas is 900X600. I used sliders to provide a way to change all the settings for Skew- and ScaleTransforms for a Main and Reflected image, as well as sliders to change the Left and Top Canvas values for each.

I didn't want to mess with the linear gradient brush on the reflected image, but I did provide sliders to control the two gradient stop offsets.


The sliders are taken from the QuickStart. I slimmed down the thumb-thingy and added an index as I did on one of the demo pages. I only used one set of mouse handlers for all the sliders to avoid having 22 sets of everything. The javascript makes use of sender.findName to figure out who is calling and what to do next.

The ranges change based on what the slider is controlling, so the Canvas Left ones go from 0 to 900 for instance, while the Canvas Top ones go from 0 to 600, so there's some converstions involved making the javascript hard to read.

Moving Images with the mouse

It didn't take too long working with this to decide that I really wanted to move the images by dragging them with the mouse. The moving wasn't the problem.. synchronizing the mouse action with the sliders and indices was a hassle, but once I thought of doing that, I had to do it or I wouldn't like it, and moving the images with the mouse to get the final adjustments works great.


Obviously Silverlight doesn't have checkboxes anymore than it has sliders, and I really wanted to be able to turn things off, so I struck upon the idea of using wingding characters for the checked and unchecked images. I had to load the font and use glyphs and I'll talk about that separately, but you can see from the application that it works just fine! The only thing I'd like to change is I could not make it so that I could click on the glyph and change the setting, it has to be on the text. Maybe I can do something different now in the February CTP.

February CTP

The February CTP hit just before I needed to be done with this, and the only thing I've had a chance to change is the cursor. When you move the mouse over something that can be clicked or moved, the cursor changes to "hand" ... a very cool addition.

Code download

The "Download Code" buttons will download the entire INETA demo suite of Silverlight examples I displayed as local copies of the following web examples:


A good list of sites and blogs for further Silverlight study can be found on the right-hand sidebar of this page.

Copyright © 2006-2022, WynApse