Welcome to MSDN Blogs Sign in | Join | Help

Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

My teammates and I spent some time last week on an exercise known as "app building" to help identify issues with the latest build of Silverlight, the SDK, and the Silverlight Toolkit. The way app building works is that everyone comes up with an idea for a medium-sized application they think could be built with the bits at hand - then goes off and tries to build as much of that application as they can before time runs out!

The emphasis is on testing new scenarios, coming up with creative ways of integrating components, and basically just getting the same kind of experience with the framework that customers have every day. Coming up with a beautifully architected solution is nice if it happens, but not specifically a goal here. Rather, the point is to help people take a holistic look at how everything works together - because sometimes you'll find that two things which both look good in isolation are quite difficult to use together. App building is a great technique to use as part of the quality assurance process and the time we spent was definitely worthwhile. :)

For my application, I decided to write an organizational hierarchy viewer based loosely on an internal tool managers use at Microsoft. The application offers three main ways to visualize the data: a hierarchical tree of all employees at the left, a flattened summary pane of all employees at the bottom, and a detailed view of the selected employee at the right. I also added a search feature and a simple chart for visualizing the size of someone's "empire". (Because I love me some Charting...) I called my app "HeadTraxExtreme" (partly an inside joke) and here's what it looked like after the two days I spent banging it out:

HeadTraxExtreme sample application

[If you have the Silverlight 3 Beta installed, click here (or on the image above) to run HeadTraxExtreme in your browser.]

[If you want to have a look at the complete source code or build HeadTraxExtreme yourself, click here to download it.]

 

Notes:

  • HeadTraxExtreme incorporates the following controls/concepts:
    • DataGrid
    • DataForm
    • TreeView/TreeViewItem
    • AutoCompleteBox
    • ComboBox
    • Chart/PieSeries/PieDataPoint
    • Image
    • Data Binding
    • Model-View-ViewModel (MVVM)
    • Custom Style/Template
    • Asynchronous data access
    • Out-of-browser
    • IValueConverter
    • INotifyPropertyChanged
    • XLinq
    • Layout
  • The employee images are downloaded from the web site of origin, so if you download and build it yourself please be sure to run HeadTraxExtreme using the included web project (HeadTraxExtreme.Web) if you want to see the images.
  • Because we were testing the latest (private) builds of everything, I needed to back-port my code to the official Silverlight 3 Beta bits in order to post it here. That didn't take long, but it did draw my attention to a couple of very notable improvements that have been made since the Beta bits went out. I won't say more because I don't want to ruin any surprises, but I can say that a couple of the controls will be much more pleasant to use by RTM. :)
  • My original version displayed a 300+ person org, but I didn't want to publish everyone's personal data without permission. :) So I made up the completely fictional 14 person mini-org you see above. Any resemblance to an actual org is unintentional...
  • There are two aspects of HeadTraxExtreme that I plan to write more about in the next few days. In both cases, I approached something in a specific way and I'd like to highlight what I did and talk about why I thought that was a good way.

Building HeadTraxExtreme was a fun little diversion that turned up some good issues for everyone. It exposed me to a couple of controls I hadn't used yet and I'm glad to have broadened my knowledge. I think there's probably a little something for everyone here; I hope HeadTraxExtreme can be a good learning experience for others, too!

Published Monday, May 04, 2009 11:41 AM by Delay

Comments

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Monday, May 04, 2009 2:57 PM by DarthObiwan

I think the biggest thing missing that would make this a world class real world example of a data intensive app would be Navigation/Deeplinking. These days it's am must have.

http://cesso.org/Samples/HeadTraxExtreme/#Iron+Man or something like that.

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Monday, May 04, 2009 3:06 PM by Delay

Great suggestion, DarthObiwan! If I get a chance to do more with this, I'll definitely look at adding support for something like that. :)

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Tuesday, May 05, 2009 4:58 AM by CiaranMurphy

Hi... nice simple demo. I noticed you used a attached property to select/highlight a TreeviewItem when the current employee changes. I used a static extension class provide by Justin Angel to do the trick...

Both workarounds still involve some small code in the view (if trying to adhere to MVVM).

Do you know if the selected Item will be made 'fully' settable on the treeview.

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Tuesday, May 05, 2009 9:26 AM by BenHayat

Hi;

FYI, the app [directly from the site] doesn't run in FF3 (just shows 100%), however it runs in IE8.

..Ben

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Tuesday, May 05, 2009 9:31 AM by BenHayat

Usually Treeviews are used to show hierarchical data relations, like Customer -> Orders -> line items. And grids are to use flat data (within each level). Now, I'm confused to see you're mixing Treeview and Grid showing the same data.

Thanks!

..Ben

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Tuesday, May 05, 2009 1:50 PM by Delay

CiaranMurphy,

Thanks - glad you liked it! It's funny you mention the TreeView trick - that's one of the things I'm working on a dedicated post to discuss. :) I hope to post tomorrow or the next day, maybe, so be on the lookout for that if you want more explanation.

If you're asking about whether SelectedItem will become settable, you might vote for this CodePlex work item: http://www.codeplex.com/Silverlight/WorkItem/View.aspx?WorkItemId=966. As I understand it, though, this would be a behavioral change from the WPF TreeView, so it's possible we won't be able to do it. So if you want it, be sure to vote! :)

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Tuesday, May 05, 2009 3:33 PM by Delay

BenHayat,

I don't actually see the same Firefox problem you're reporting. I've just installed the Windows 7 RC on a blank Virtual Machine, installed Firefox 3.0.10, and then the Silverlight 3 Beta. The HeadTraxExtreme live sample link (http://cesso.org/Samples/HeadTraxExtreme/) loads and works correctly for me on both Internet Explorer 8 and Firefox 3. Perhaps you've got an older build of Firefox or something else is interfering on your machine?

Regarding your question about TreeView vs. DataGrid, I've really got them both just because that's what the application I was copying did. :) But honestly, I think they're both valid: the TreeView is really great at visualizing the hierarchy while the DataGrid makes it easy to do company-wide sorting on any data field by clicking on the columns. Then I added in the ComboBox to enable DataGrid Grouping so that it could approximate some of the same hierarchical usefulness of TreeView while maintaining its ability to quickly navigate the entire data set.

You're welcome to disagree, of course - if nothing else, this was a good way to exercise two of the more complicated controls. :)

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Tuesday, May 05, 2009 4:29 PM by BenHayat

Hi;

Just checked and my FF3 is the same as yours (3.0.10) running on Vista and I have SL 3 beta on this machine. I've been seeing this problem lately (ever since SL3 beta came out) that some sites gets stock on 100%. I'm not sure what it is, but I hope it goes away as of SL3 RTM.

As far as the grid and treewview, my intention wasn't to disagree with you, but mainly wanted to know if the data was designed as a self-referencing hierarchical data or flat data?

Thanks!

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Tuesday, May 05, 2009 4:35 PM by BenHayat

FYI: I just rebooted the machine and tried your site and is working.

I need to find out what causes it to report to SL team.

Thanks!

..Ben

# One more platform difference more-or-less tamed [SetterValueBindingHelper makes Silverlight Setters better!]

Thursday, May 07, 2009 4:41 AM by Delay's Blog

Earlier this week I wrote about the "app building" exercise my team conducted and posted my sample application

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Thursday, May 07, 2009 4:44 AM by CiaranMurphy

Cool... Well I was trying to use a view model that has the notion of a current Location/User/Wotsit etc. With a listbox you can easily have two way binding without have to hook the controls SelectedItemChanged Event.  

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Sunday, May 10, 2009 12:08 PM by Rolf3006

In your list of supported controls/concepts you mention the M-V-VM pattern. But where are the viewmodel class and the commanding?

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Monday, May 11, 2009 2:54 AM by Delay

Rolf3006,

Sorry for the confusion! When I added "M-V-VM" to the list, what I had in mind was the technique of manipulating TreeView's IsExpanded/IsEnabled properties in the model rather than directly on TreeViewItem. In the case of my simple sample application, the Employee class acts as both the model and the view, but the TreeView concepts are just as relevant as they would be in a larger-scale app. I called this out specifically because I went on to write more about handling a Silverlight-only complication with the pattern here: http://blogs.msdn.com/delay/archive/2009/05/07/one-more-platform-difference-more-or-less-tamed-settervaluebindinghelper-makes-silverlight-setters-better.aspx

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Wednesday, June 17, 2009 8:28 PM by jtoth

cool post but it got me all excited because it said it used mvvm and datagrid/dataform, which is what i was looking for, but it doesn't actually use the mvvm pattern at all...

# re: Going "extreme" with Silverlight 3 [Sharing the source code for a real-world sample application]

Thursday, June 18, 2009 12:30 AM by Delay

jtoth,

Sorry for the disappointment - I explain in the comment just before yours what I had in mind when I said "MVVM".

Anonymous comments are disabled
 
Page view tracker