Adam Kinney posts tagged with 'tutorial'

WPF Effects and Transitions Library Applied

Adam Kinney — Thu, 09 Oct 2008 22:35:00 GMT

WPF Effects Interview (8:46)
WPF Effects Interview - Essential (5:35)

WPF Effects Demo (5:35)
WPF Effects Demo - Just Effects (3:36)
WPF Effects Demo - Just Transitions (2:32)

Last week we posted the WPF Effects Library on Codeplex along with an David Teitlebaum interview and a demo video showing the library in action.

The library includes 23 Effects using the new PixelShader class ShaderEffect available in WPF 3.5 SP1. Effects range from BandedSwirl, ZoomBlur, InvertColor and my favorite to say, GrowablePoissonDisk.

I have a few Effects screenshots on Flickr, if you'd like to see them. Greg Schechter has a great blog post talking about Effects in WPF.

The library also includes 33 Transitions in addition to the Effects. Transitions range from familiar concepts like BandedSwirl, Pixelate and Slide to more exotic types like Crumble, MostBright and Water.

All of the Transitions are based on the abstract TransitionEffect class, which builds on the framework ShaderEffect class adding the concept of two inputs and a progress animation. This now allows you to use an Effect in a very applicable way. The Effect is not only applied to an element but you can use the Effect as a way to animate between two elements. And the animation itself is handled by a WPF Storyboard demonstrating the tight integration between the WPF Framework and Pixel Shaders. The more you dig into this architecture the more you find out how much work has been done by the WPF team to make using Shaders simple.

Using the WPF Effects Library

In order to start using the WPF Effects Library for your WPF Applications, there are a few simple steps involved listed below:

Ensure you have VS2008 and .NET Framework 3.5 SP1 installed
Install the Shader Effects BuildTask and Templates available on Codeplex. Grab the .ZIP file and follow the steps in the readme.txt
Download the WPF Effects Library and open the ShaderDemoApp.
You will see "custombuild" warnings when opening the projects. This is due to the Shader Effects Build Task being hooked up. No worries here, click Load Normally.
Now try to run the ShaderDemoApp and if it looks like it did in the demo video, you're all set.

Now that you're up and running you can start using the Effects. One thing about the ShaderDemoApp that comes with the library is that its great to demo with, but as a starter application it can be a little complex.

Let's walkthrough a very simple application called TransitioningImages that makes use of a TransitionEffect to navigate images in a folder.

This is a very simple application where all of the action happens within the Window1 class.

Choose a Folder - After the user selects a folder using the OpenFileDialog, the code retrieves all of the .jpg images from the folder and instantiates a new collection of BitmapSources for the custom PhotoSlideShow class. The initial image is then loaded into an Image element.
Navigating the Images - Hitting the Next or Previous buttons then cycle through the PhotoSlideShow image collection and cue a Transition to move from one image to the next.
Transition Applied - A new Transition Effect is instantiated (the default is a RadialWiggle (pictured above)) along with a DoubleAnimation that animates the Progress of the Transition until completion.

One of the very cool things to point out here is that we are Transitioning between images which is an obvious choice. But as the ShaderDemoApp shows the multiple inputs for the Transition are Brushes and in WPF we have an array of Brushes to choose from. One of those Brushes is the VisualBrush which allows you to take any Visual element including Buttons, MediaElements and the like allowing you to create some really interesting applications using these Effects.

Below is a link to the source code for the TransitioningImages application. The executable will run with WPF 3.5 SP1 installed, but in order to modify and build the application you'll need to follow the installation steps above.

If you use the Effects Library in your own application, let us know. We'd love to hear about how well they worked for you and see what kind of applications you've come up with.

Catching up with Silverlight 2

Adam Kinney — Mon, 10 Mar 2008 23:24:00 GMT

Starting last week on March 5th after Silverlight 2 Beta 1 was announced, a lot has been said about Silverlight 2. Presentations have been given, demos have been shown, bits have been released, tutorials have been posted and many conversations have been had. As an attempt to catalog some of the more interesting and useful content, I'm posting my list of highlights since SL2B1 day.

Overview

In the unlikely event you haven't found where yet, you can grab the runtime and tools for Silverlight 2 Beta 1 on Silverlight.net.

Other links to help you get started include:

Building Rich Internet Applications using Silverlight 2 - MIX session presented by Joe Stegmen and Mike Harsh, Part 1, Part 2
A Whirlwind Tour - Jesse Liberty's introduction to Silverlight 2
Fundamentals Lab - This lab explores the fundamental tools and features that underpin any Silverlight application.
Breaking Changes in Silverlight 2 - This topic discusses the changes made to the Silverlight runtime and Silverlight tools between the Microsoft Silverlight 1.1 Alpha September Refresh and the MIX 2008 release.
Packaging and Application Startup - Pete Brown explores the new application model, read Part 1 and Part 2
Dynamic Animation Lab - This is a simple lawn mowing simulation that exposes different techniques of leveraging the managed Animation API in Silverlight 2.

Demos

Hard Rock Memorabilia - One of the most talked about demos at MIX08, welcome Deep Zoom!
Pulse at SXSW - mashes up twitter, del.icio.us, Technorati and flickr in a very visual and useful way
AOL email client - a full email client written in Silverlight 2
NBC Olympics - can be seen in the first keynote at MIX08 around 1:17:00, an interview with Perkins Miller is also available
TextGlow - read Word 2007 documents online with Silverlight 2
Silverlight.net Community Gallery - controls demo, RSS reader, SOAP Weather Widget and more
Tunnel Trouble - a new Silverlight-based game from Terralever
WeatherBug - designed for Silverlight Mobile, you can test the app running on the web.

Controls

Control Demo Page - see the controls in action
Source code and Unit Tests for controls - download the code
Creating Rich Dynamic User interfaces with Silverlight 2 - MIX session presented by Karen Corby
Controls Tutorial - Another Jesse Liberty tutorial
ListBox and ScrollViewer FAQs - all you ever wanted to know about them and more
File Upload Component - Wilco Bauwer builds a File upload and control and shares the source
User Controls Lab - Building Reusable Controls in Silverlight 2
Using the Silverlight 2 Canvas - a screencast by Jesse Liberty
Using Silverlight 2 Grids and Stack Panels - another great screencast by Jesse Liberty
Styling Controls - another tutorial by Jesse Liberty (he's been very busy)

Deep Zoom

Applications = Designers + Developers - MIX session presented by Celso Gomes and Kirupa Chinnathambi , Deep Zoom heatured in the second part
Hard Rock: Behind the Music with Deep Zoom - MIX Session presented by Scott Stanfield
First Attempt with MultiScaleImage - Mike Taulty shows how to implement control over Deep Zoom, followed by an update
Deep Zoom Demo - Mike Ormond shares Deep Zoom code and then adds mouse wheel support in part 2
Deep Zoom Composer Preview
Deep Zoom Composer Preview - User Guide

Mobile

Mobile Devices and Microsoft Silverlight - MIX session presented by Amit Chopra and David Kline
Using Microsoft Silverlight for Creating Rich Mobile User Experiences - MIX session presented by Giorgio Sardo
Brad Becker interview - about the recent announcement about Silverlight Mobile.
WeatherBug demo
MIXr demo
Silverlight for Mobile primer session at MIX08 - my notes from the first mobile session at MIX

Dynamic Language Runtime

Microsoft Silverlight and Dynamic Languages - MIX session presented by John Lam and Jimmy Schementi
Hello World! demo - demo from MIX session
Managed JScript and flickr -demo from MIX session
Integrating Silverlight and ASP.NET MVC - demo from MIX session
Iron Python - Jimmy Schementi's MSDN article
Iron Python and the DLR - Bill Chiles's MSDN Article
John Lam on Ruby, Ruby, Ruby - Open Space session at MIX08

Moonlight

Exploring Moonlight : Novell's Implementation of Silverlight on Linux - MIX session presented by Miguel de Icaza
Pre-Mix 08: Moonlight Updates
Channel9 works with Moonlight!

Physics

Farseer Physics Engine - an open source physics engine for Silverlight 2
Polygon Demo - Andy Beaulieu's recent demo using Farseer
Heads Will Roll demo - Chris Cavanagh updates his sample, click "move platforms" to make the wheels/heads go flying

Networking and Data

Networking and Data Lab - In this hands-on lab, you will look at using a variety of remote data sources and communication techniques to retrieve data for a Silverlight application.
Working with Data and Web Services in Microsoft Silverlight 2 - MIX Session presented by Eugene Osovetsky
Sockets Sample
Data Binding Tutorial - A Jesse Liberty tutorial

Browser Integration

Browser Integration Lab - In this hands-on lab, you will look at the places where DHTML and Silverlight meet.
Calling JavaScript functions - Tim Heuer tutorial

Tools

Silverlight Blueprint for Sharepoint - This is the answer to "how do you use Silverlight in Sharepoint?", Micheal Lehman has an interview live on Ch9
PhotoZoom - Want a Deep Zoom Album of your own? try this site. Look for the "processing" notification when attempting to view your albums, the site is rather busy right now
BlogEngine.NET Silverlight Extension - I would expect to see more of these start cropping up
Programmer Utilities - Jesse Liberty's suggested "other" tools
Telerik Controls - There are lot of cool examples under the Online demos section. Very cool to see the Animations framework in there.
ImageGear for Silverlight

Fountains of Information

Scott Guthrie - great tutorials and source of breaking news
Tim Sneath - next best place for breaking news and clarity of information
Jesse Liberty - The Silverlight Developers best friend
John Lam - Dynamic Language Runtime
Jose Fajardo - User Experience and Design
Andy Beaulieu - games and physics
Sparkling Client - a podcast about Silverlight and other RIA technologies.
Code Trip - driving around the west coast, check to see if they're coming to your neighborhood

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!

Consuming JSON data with Silverlight

Adam Kinney — Wed, 19 Dec 2007 10:22:00 GMT

How would I use JSON data with Silverlight?

I've been asked this a few times and it happened again today. So tonight is the night to write a quick tutorial on how easy it is to do this. You can start from scratch or from any Silverlight 1.0 template, but I will be walking through the steps using Visual Studio 2008.

First step is to create the project.

File -> New -> WebSite... -> Silverlight Script Web

Now we need some JSON data. I'm going to grab the latest posts from Twitter using their simple and sweet API. All I need to do is add a reference to the API and add a callback function to be called once the data has been received. In the project template, I placed this line below the script block that contains the createObjectEx function.

<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback"></script>

Now to handle the loading of the data. Within the script block containing the createObjectEx function, we first define a couple of global variables at the top. twitterData is used to store the JSON data and scene will act as a reference to our Silverlight Application class.

var twitterData; var scene;

Modify the Silverlight class constructor to use the newly declared scene variable by removing the var from the line below.

var scene = new YourProjectName.Scene();

Next, add the twitterCallback function.

function twitterCallback(obj) { twitterData = obj; scene.loadData(); }

Now open up you Silverlight application class file. In the project template, the default name is Scene.js.

Remove all of the functions except for the handleLoad function.
Within the handleLoad function, remove the sample event hookup code so you are left with the plugIn definition line.
In the handleLoad function, add a property for the rootElement:

this.root = rootElement;

Add the new loadData function defined below (make sure you leave a comma between handleLoad and loadData function definitions):

loadData: function(){ var item; for(i=0;i<5;i++){ item = this.plugIn.content.createFromXaml('<Canvas><Image Source="' + twitterData[i].user.profile_image_url + '" /><TextBlock Canvas.Left="54">' + twitterData[i].user.name + '</TextBlock></Canvas>'); item["Canvas.Top"] = i*54; this.root.children.add(item); } }

The above function loops through the first 5 posts and creates a new Silverlight object for each one using their name and profile image. createFromXaml is the magic function which takes a string, parses it and returns an object. The string could come from anywhere, often a separate .xaml file accessed via a downloader object. Once the object is made the top position is based of the index, which causes the items to be vertically stacked. Then the new object is added to the this.root which is a reference to the main Canvas defined in the handleLoad function above.

Now the last step is to open up the Scene.xaml file and remove all of the lines except for the outermost Canvas element.

And that's it! Seriously, hit F5, run your project and you should see something like this:

Now enjoy and run with it. Hopefully this short tutorial will help you in your quest to create JSON-based Silverlight applications or at least a new Silverlight-based Twitter widget.