Adam Kinney, Continuum Explorer

My notes from First Look at Using Expression Blend with Silverlight 2

Adam Kinney — Fri, 29 Feb 2008 18:14:00 GMT

I won't do this after every Scott Guthrie post, but I received thankful comments on My notes from the First Look at Silverlight 2, that I thought I would share again.

In his latest post First Look at Using Expression Blend with Silverlight 2, Scott walks through the features of Blend that will help you build Silverlight 2 applications.

The basis of this article, along with the release of Beta 1 of Silverlight 2 we are shipping tool support including an Expression Blend 2.5 March preview.
Blend and VS2008 share the same solution/project file format
Very useful split view in Blend includes WYSIWYG designer and XAML source view editor. You can click on an element in the design view and it will move to the node in the source view.
Reflecting the platform update you now get more many assets to choose from. If I remember correctly in Expression 2 for Silverlight 1.0 support you had a Canvas, Rectangle, Ellipse and a Path.
As a design feature, I really like the guidelines and positioning markers in Blend.
Scott's tip on managing the Blend interface shows off its flexibility. +1 for vector UIs and WPF.
Another cool design feature, the visual way you can define the Grid properties. Allows the designer to reign in the power of the Grid.
Personal Favorite: Nice, this one was new to me. I've known how to create rounded Rectangles, but Scott shows off how to create a rounded Border which is then wrapped around a Textbox to create a rounded Textbox.
Design time preview for Silverlight 2 applications in VS2008.
Make sure to read the part about WPF style Databinding.

"INotifyPropertyChanged?"
"Yes, yes you did."
And surprise, Expression Blend understands Databinding and DataTemplates!
Redefining Control templates feels like magic. Scott even dips into the Parts Model a bit with the Button template.
Another cool designer feature, Drag and drop styles onto controls to apply them.

Yes, yes you did.

Jeff Prosise on Best Practices for Silverlight 1.0

Adam Kinney — Thu, 28 Feb 2008 21:39:00 GMT

In the Launch 2008 edition of MSDN Magazine, you will find an article by Jeff Prosise entitled Silverlight Tips, Tricks and Best Practices. Even though its already been posted to Silverlight News, I felt compelled to point this article out.

If you are developing Silverlight 1.0 applications, this is a must read. Mr. Prosise does a fine job recording tricks and techniques many have discovered as a result of working on Silverlight applications. Take notes and keep them close.

A good blog to watch for more performance tips is Seema Ramchandani's blog.

What's the best Silverlight sample/site/demo you've seen?

Adam Kinney — Fri, 22 Feb 2008 23:45:00 GMT

I am often asked which Silverlight samples are "great examples of using the technology". And when responding I like to append that requirement "...to create a better experience." My goal is to compile a list of my top 10 favorite Silverlight examples based on that criteria.

And before posting that list I thought I'd ask around for other suggestions. What's the best Silverlight example you've seen?

I've been tracking suggestions on del.icio.us if you'd like to take a look at what others have suggested already.

My notes from the First Look at Silverlight 2

Adam Kinney — Fri, 22 Feb 2008 19:26:00 GMT

Today, Scott Guthrie posted a First Look at Silverlight 2 as an hearty appetizer before the first public beta of Silverlight 2. (Notice the "2" and not "2.0" anymore.)

Along with his overview he built a simple Digg client and 8 tutorials on how this is done using the new features in Silverlight 2. I've read through each Tutorial and I thought I'd share my notes and comments:

Part 1: Creating "Hello World" with Silverlight 2 and VS 2008

New Project Templates - Very simple to create a new Silverlight application and accompanying test web application. You can also see that there is the option to Add the application to an existing Web Application as well, which is a more likely production scenario.
Application package (.xap) - One compressed file to reference that instantiates your application by way of the object tag. Beauty! This will make it much easier to embed Silverlight applications.
VS Support - XAML intellisense, code intellisense and shortcuts for event handler creation.

Part 2: Using Layout Management

Stack Panel - arranges controls horizontally or vertically based on control size and margin
Grid - very powerful multi-row, multi-column layout in some ways similar to an HTML table. I really like that it uses attached properties for placement rather than an embedded structure.
Controls -Border control is nice, and he also mentioned the WatermarkedTextBox. Not only is there a TextBox now (yay!) but there's a watermarked sub class.
Resize the Application - Smart vector-based UIs are a beautiful thing.

Part 3: Using Networking to Retrieve Data and Populate a DataGrid

More than before -"call remote REST, SOAP/WS*, RSS, JSON, and XML HTTP", that just speaks for itself.
Cross Domain Access - respecting the cross-domain policy file, another huge deal
LINQ to XML - I just recently started using LINQ and its just plain fun, even if you're not a total data geek.

Part 4: Using Style Elements to Better Encapsulate Look and Feel

Style - If you're used to CSS or WPF Styles, the ship has arrived. Its time to leverage your skills and make that UI you've always wanted. Or just happily minimize the size of your XAML files by reducing repeated code.

This is one of my personal favorite new features and I'm looking forward to talking about it more.

Part 5: Using the ListBox and DataBinding to Display List Data

Listbox - another thankful addition to the Controls now available
Databinding - another feature like LINQ that I have just started using more, like ASP.NET databinding but a little different. Definitely take a look at the DataTemplate.

Part 6: Using User Controls to Implement Master/Details Scenarios

User Controls - Great VS Support for the type of encapsulation you have comfortable with in .NET. You can do this in 1.0 with JavaScript and XAML, but its just not as easy as this. Definitely useful when Striving for Reuse.
Using DataContext - ...leads to Binding availability, definitely worth looking at Scott's sample to know why this is exciting.

Part 7: Using Templates to Customize Control Look and Feel

Content property -more goodness from WPF, the Button has a Content property not just Text, because you can redefine the Content as needed. Need a button with an Image icon, just redefine the Content instead of building a new button. +1 for composition.
Control Template - even more powerful than styling, you can completely reskin the control by redefining its template. Go from the standard rounded rectangle to an animated themed button and maintain all the interactivity and events.

Part 8: Creating a Digg Desktop Version of our Application using WPF

Copy and Paste - Copy and paste the code into a WPF application and after two small changes you now have a desktop application. Nice.

Life at Microsoft via Ch10

Adam Kinney — Wed, 13 Feb 2008 08:37:00 GMT

I could share the video here and use the embedded player, but I think for the full experience you should head over to the Channel 10 site and check out the latest video Life at Microsoft - The Truth Revealed.

A few of us chipped in as actors to play out the very funny script written by Tina Wood. Add in Scott Finley's awesome camera and editing work and you have an enjoyable video.

I've also uploaded my favorite screen captures to Flickr in a big part because I don't want to keep these embarrassing shots to myself.

Might be time to head to Hollywood...

Live@edu - site review

Adam Kinney — Thu, 07 Feb 2008 23:19:00 GMT

We often talk about the the "rich experience" that Silverlight can deliver on the web, but we don't always see it. Today I was pointed to a very nice-looking site that exemplifies "richness".

The site is Live@edu, a portal site used to explain Live Services to global students. Within that statement we find a few requirements, keep close to the established Live brand, design an engaging, pithy and attractive experience, organize a large amount of content and localize to handle multiple languages.

The site was built by the talented Coloradoans of Mondo Robot using Silverlight 1.0. Expression Blend was used to design the animations, but beyond that I don't much about the process. Sounds like a good interview opportunity.

Visiting the site will provide the best experience but I'd like to point out a few concepts, doing my best to explain with still images.

Multiple Languages
20 different languages are supported ranging from English (United States), Dutch and Chinese (Simplified). After selecting a new language via the combo box in the upper right, a loading animation pops up the old text fades out and the new text fades. I've seen a few Silverlight sites using multiple languages, but known pulled off this smoothly.

Smart-scaling UI
While some view the web on 1920x1200 resolutions others are running 1024x768 resolutions. And of course, others may be viewing the site non-maximized windows or even mobile. Screen real estate is a huge commodity, vertical space even more so (except for those of you lucky enough to be running a Tablet).

What I like about this site is that it addresses the smaller screen resolution by making the navigation smart. If you don't have much vertical space, the main navigation is hidden and slides in when needed. Plus the whole site scales proportionately as well. +1 for vector UIs (and scalable PNGs).

Great Transitions
When navigating between sections, the page doesn't completely reload and everything is loaded asynchronously. But in this case, I don't get lost or miss the click and wipe of the screen letting me know the new content has arrived. Each selection has a visual transition. Some of them very smooth like the color blend pictured above.

The content is very fun, I've added a few more pictures below as enticing teasers. Props for getting claymation into the mix.

But its not all peaches and cream...
"How is this accessible or SEO-friendly?" you may be charging up to slam down as a comment.

Well it's not.

Upcoming improvements in the platform will make this type of friendliness more possible in the future. I haven't completely checked out the site, that might be using the Accessibility object to give an idea of the content along with an actionable item. They may be rendering differently when a search engine is detected as requesting the page. And that might not be...yet.

Going to start a Top 5
Overall, I really dig the design and the experience and I'm going to add this to my Top 5 favorite Silverlight applications. I've been thinking about the Top 5 for a little while, but its on now. Live@edu is right up there with MNet. Who are the other three? I'm not sure yet...

Silverlight User Groups

Adam Kinney — Wed, 06 Feb 2008 05:41:00 GMT

I just noticed Dave Campbell's post announcing the 3rd meeting of the Phoenix Silverlight User's Group Meeting tomorrow night. Being one of the first dedicated Silverlight groups I've heard of, I feel compelled to send some Silverlight swag. I bet we still have some of those Silverlight hats from MIX07 lying around...

I've heard of a few other groups focusing on Silverlight or a combination of WPF/Silverlight/UX including:

ZamDes in New Zealand
PDXUX in Portland, OR, US (I'm thinking about driving down for their next meeting on March 18th)
Silverlighters (which doesn't appear to have made it past the site creation step...)

I am guessing some existing groups may morph like the Denver RIA Developer Group, which appears to have been an Adobe Flex User Group that has now opened its doors to Silverlight and AJAX developers, too.

Anyone know of other WPF/Silverlight/UX special interest groups that have formed?

Silverlight 1.0 Bar Chart Tutorial

Adam Kinney — Tue, 05 Feb 2008 22:24:00 GMT

I've seen this request many times:

How do I make a Chart in Silverlight?

I'm going to show you that with some simple math and a little bit Silverlight knowledge, you too, can enjoy the clarity of a chart on your web page.

Technically, the goal is to build a simple reusable horizontal bar chart using Silverlight 1.0 and dynamic data. The code will be written in XAML and JavaScript and I will be using Visual Studio 2008 as my editor. How you get the data to the app is up to you, but to keep this simple, I will be using local JSON formatted data.

Creating the Application

The first step is the application creation. I will base my project on the Silverlight Script Web template that comes with the Silverlight Tools Alpha for Visual Studio 2008. The majority of the project will remain relatively unchanged and most of the work will be done in the Chart Control files to be added.

File -> New -> Web Site...
Choose the Silverlight Script Web template
Give the project a name, Let's use SilverlightBarChart
Hit OK

Now we need to clear the template XAML and JavaScript:

Open Scene.xaml
Clear the contents of the root Canvas, only the opening and closing Canvas elements should remain.
Set the x:Name property of the root Canvas to mainCanvas
Open Scene.js
Remove all event handler methods, except handleLoad
Make sure you remove the comma after the handleLoad method
Clear the contents of the handleLoad method

We've created a clean slate. If you hit Run, you will see a stark white page. A chart is more than a white page, though, so let's start adding the components.

Adding the Background and Container

The first piece we need is the background. Not only does it serve the purpose of a contrasting color, but also it acts as the container for the bars.

File -> New -> File...
Choose the Silverlight JScript Page template
Name the file Chart.xaml
In the root Canvas of the Chart.xaml file add the following XAML:

<Rectangle Width="640" Height="480" Fill="#0f0f0f" Stroke="#2b2b2b" StrokeThickness="1" /> <Canvas x:Name="barContainer"> </Canvas>

The Rectangle is used to style the background and the Canvas is a named container for us to reference in the code to dynamically add bars.

Return to Scene.js
Add the following code in the handleLoad method:

this.plugIn = plugIn; this.mainCanvas = plugIn.content.findName("mainCanvas"); this.downloader = this.plugIn.createObject("downloader"); this.downloader.addEventListener("completed", Silverlight.createDelegate(this, this.onCompleted)); this.downloader.open("GET", "Chart.xaml"); this.downloader.send();

The first two lines are setting variables for later use. this.plugIn refers to the Silverlight application instance. this.mainCanvas is a reference to the named Canvas in the Scene.xaml.

The next four lines create a Downloader object which is set to asynchronously fetch the Chart.xaml file. Upon completion of downloading the file it will call the onCompleted method. Now let's add that method so it can be successfully called.

In the Scene.js file after the handleLoad method's closing bracket, add a comma
After the comma add the onCompleted method as seen below:

onCompleted: function(sender, args) { var chartTarget = this.plugIn.content.createFromXamlDownloader(sender, ""); this.mainCanvas.children.add(chartTarget); }

This function is called after the downloader object has completed downloading the Chart.xaml file. sender is a reference to the downloader object which now holds the content of the xaml file. Using the createFromXamlDownloader method, we create a new Silverlight object based on the downloader instance. The new object is then added to the children collection of mainCanvas in order for the object to render and become interactive.

Now hit Run and you will see an asynchronously loaded gray rectangle. We are really cooking now.

Adding the Bars

It takes two steps to add the bars to the chart. First we need to create the reusable bars as separate components and then we need to add code to the Chart to create the bars dynamically based on the data.

Let's start by creating the bar component.

File -> New -> File...
Choose the Silverlight JScript Page template
Name the file Bar.xaml
In the root Canvas of the Bar.xaml file add the following XAML:

<Canvas.Background> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="#00b5fb"/> <GradientStop Offset="1" Color="#004fac"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Canvas.Background>

Our bar is simply a Canvas painted with a LinearGradientBrush ranging from light blue to dark blue.

Now we'll modify the Chart class so it uses the bar control to display the data. The majority of the code here is the math used to size and position the bars properly.

Open Chart.js
Add the following parameters to the SilverlightBarChart.Chart function: plugIn, target, data
Within the brackets of the SilverlightBarChart.Chart function add the following code:

this.plugIn = plugIn; this.target = target; this.data = data; this.barContainer = this.target.findName("barContainer"); this.bars = []; this.padding = 5; this.height = 480; this.width = 640;

The first three lines store the parameters for later use. this.plugIn refers to the Silverlight application instance. this.target represents the Silverlight object that our JavaScript class is wrapping and this.data represents the JSON formatted data.

The next five lines set properties for rendering the dynamic bars. this.barContainer stores a reference to the container Canvas defined in the Chart.xaml file. this.bars is an Array we will use to store references to the Bar JavaScript instances. this.padding, this.height and this.width are all properties used to calculate the size and position of each bar.

Move down to the SilverlightBarChart.Chart.prototype and remove the handleLoad method
Add the following code within the brackets of the SilverlightBarChart.Chart.protoype:

createBars: function(barXaml) { var barTarget = null; var barCount = 0; var barWidth = 0; var barHeight = 0; var maxValue = 0; for(i in this.data) { barCount++; if(this.data[i].value > maxValue) { maxValue = this.data[i].value; } } barWidth = (this.width - (this.padding * (barCount + 1))) / barCount; for(var i = 0; i < barCount; i++) { barTarget = this.plugIn.content.createFromXaml(barXaml, true); this.barContainer.children.add(barTarget); barHeight = this.height * this.data[i].value / maxValue - this.padding; barTarget["Canvas.Top"] = this.height - barHeight; barTarget["Canvas.Left"] = barWidth * i + (this.padding * (i + 1)); barTarget.Width = barWidth; barTarget.Height = barHeight; this.bars.push(new SilverlightBarChart.Bar(barTarget)); } }

Here's the magic method you've been waiting for. Initially we setup a few variables for reuse. Second we loop through the properties of the data object in order to obtain the total count and the largest value. This is done mainly because the JSON data is stored as an object and other than enumerating the properties there is no other way to simply get these values. This initial loop could be avoided with more complex data structures or even by setting the discovered values directly.

Once we we've looped through the data we can figure out how wide each bar should be to fill up the chart, based on the chart width, padding and total bars.

Then we perform a second loop to create and set the properties of each bar. The first line in the loop uses createFromXaml and the XAML string passed as a parameter to this method to create the Silverlight object for the bar. Then we add the bar to the barContainer so it will render and become interactive.

The following 5 lines dynamically set the height and width of the bar along with its position. These numbers are calculated based off the size of the chart, the amount of bars and the value of each bar in comparison to the greatest value in the data set.

Don't hit Run yet, nothing new will happen.

Initializing the Chart

With our Chart and Bar components complete we can initialize the Chart in our main application.

Open Scene.js
In the handleLoad method, after the line that starts with this.mainCanvas... add the following line: this.chart = null;
Remove the code within the brackets of the onCompleted method and add the following code:

if (sender.uri == "Chart.xaml") { var chartTarget = this.plugIn.content.createFromXamlDownloader(sender, ""); this.mainCanvas.children.add(chartTarget); this.chart = new SilverlightBarChart.Chart(this.plugIn, chartTarget, chartData) this.downloader.open("GET", "Bar.xaml"); this.downloader.send(); } else { this.chart.createBars(sender.ResponseText); }

What we've done here is daisy chain the asynchronous completed events of the downloader. First in the handleLoad method we asked the downloader to go get Chart.xaml. Once it completes that request, we create a new instance of the Chart class using that response then we ask the downloader to go get the Bar.xaml file. Once it has that response, we call the createBars method of the new Chart instance, passing the ResponseText as the barXaml parameter.

The script is set up now but we need to add a few JavaScript references in the Default.html in order for the newly created script classes to be resolved.

Open Default.html
Locate the script tags at the top of the page and change them to match the following code:

<script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="chartData.js"></script> <script type="text/javascript" src="Chart.js"></script> <script type="text/javascript" src="Bar.js"></script> <script type="text/javascript" src="Scene.js"></script>

First, we still need a reference to the Silverlight.js which will provide the application helper functions. Then a reference to the JSON data file which we will create next. Followed by the class files of our two components and our application.

File -> New -> File...
Select the JScriptFile Template
Name the file chartData.js
Open the file and add JSON formatted data as follows:

chartData = [{"value":285}, {"value":342}, {"value":248}, {"value":120}, {"value":204}, {"value":190}, {"value":255}, {"value":238}, {"value":501}, {"value":297}];

The values are completely arbitrary but the script is looking for properties named value with numerically typed values. So feel free to change the values, but don't change the format of the object properties until you feel comfortable changing the script.

Hit Run and you should see a chart similar to the picture below:

Success! You have a chart! Awesome!

"But what about..."

Yes, there is plenty more you could do with this chart, but it is all outside of the scope of this tutorial. Many different features come to mind such as:

Different data sources
Assets packaged into one .zip file
Loading data animations
Easing animations for the bars
Different visual styles for the chart and bars ( Expression Blend is waiting for you )
Different types of Charts
Values on Bar Rollover (This is where the Bar JavaScript class would come in handy)

Hopefully this tutorial has shown you its not that difficult to get started and it can be fun once you start getting seeing the results of your work. I did not explain every single piece of code, but I did try and highlight the key concepts. If you have questions I would suggest starting with the Silverlight API reference. That's my favorite place to start.

And since you have made it all the way through this tutorial or even if you just scrolled to the bottom, you can download the completed source directly.

Cool. That's one line I can check off my Must-Write-About-Because-Its-Constantly-Requested list...

Enjoy!

IT never dies, it just gets a new face - Illustration

Adam Kinney — Tue, 05 Feb 2008 04:54:00 GMT

IT never dies, it just gets jammed in a new type of interface.

After reading this quote from Michael Coté post, the visual of tribesman from the developer clan attempting to maintain and "upgrade" the giant IT god by giving it a new face jumped into my head.

"Bring me a new face. Let it have vectors, drop shadows and glass effects. Only this will appease me and I shall not crash."

Silverlight Personified

Adam Kinney — Mon, 04 Feb 2008 23:32:00 GMT

A few days ago, I noticed this twit from Josh Russell:

Is the proud owner of a Silverlight superhero costume

I thought, "It couldn't really be. Maybe 'Silverlight' is a UK-based superhero or something. Kind of like our American Silverlight superhero."

After seeing this picture on Flickr, I think I've been proven wrong.

UX Evangelist by day, Josh is apparently, a superhero by night.

Given the amorphous properties of the Silverlight logo, I can identify with those who wish to give it a little more character.

Scott Barnes just posted today about his character Dax, a bright blue, utility belt wearing, buck toothed bi-pedal creature guy.

And not to be forgotten, the original blue box from the Keynote Animation done by Nectarine for the web on the piste conference.

Perhaps, we should hold a contest at MIX08 to see who can design the best Silverlight avatar.