Karsten Januszewski on 'wpf'

Portfolio as WPF and ASP.NET

Karsten Januszewski — Wed, 21 May 2008 19:41:00 GMT

I recently wanted to put together a portfolio page of the various code and samples that I've worked on over the last few years. To do so, I created a very simple xml file, which you can see here. Then, I decided to create two different UI experiences to display the UI, one in ASP.NET and one as a WPF .XBAP. I added a page that uses javascript to detect if a user has .NET 3.0 and, if they do, I send them to the .XBAP. If they don't, I send them to the ASP.NET page.

Each implementation turned out to be pretty simple to create and have quite a few similarities.

I like how both data models have something in place to handle nested hierarchies. In ASP.NET, it is done by using a Repeater inside a Repeater, setting the DataSource with an XPathSelect. In WPF, it is done by nesting an ItemsControl inside the DataTemplate, setting the ItemsSource to the right XPath.

I also had to handle the case where I didn't have a string value. For example, not all samples have videos, which in the XML looks like this: <VideoUri/>. In ASP.NET, if I had an empty string, the syntax I used to not display the URL was to put an expression in the Visible field:

Visible='<%#XPath("VideoUri") != string.Empty %>'

In WPF, I first thought that the built-in BooleanToVisibilityConverter would do the trick, but because you can't do expressions in WPF databinding, I had to whip up a quick converter:

    public class EmptyStringToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string strValue = string.Empty;
            if (string.IsNullOrEmpty((string)value))
                return Visibility.Collapsed;
            else
                return Visibility.Visible;

        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

And then in the XAML, I used the converter as such:

Visibility="{Binding Mode=Default, XPath=VideoUri, Converter={StaticResource StringToVis}}"

Here's some little lessons learned and gotchas:

ASP.NET: When using the asp:HyperLink tag in conjunction with the #XPath syntax, I had to use single quotes (') instead of double quotes (") to make the parser happy.
WPF: Remember to wrap your ItemsControl in a ScrollViewer, since scrolling doesn't come for free with ItemsControl.
WPF: I used the LinkLabel control by Lubo Blagoev which was quite nifty.
WPF: To download the XML from the server to the XBAP, I used the pack://siteoforigin:,,,/ syntax.

So, recursively, I've added the code for my portfolio to my portfolio, which is where you can get the code. The next thing I want to do is add a tag cloud to the application, probably using LINQ. I also want to make the WPF page more interesting to show what you can do above and beyond just displaying the information.

Interview With Effective UI

Karsten Januszewski — Tue, 06 May 2008 16:16:00 GMT

Effective UI has put together a site called the User Interface Resource Center. They were kind enough to interview me about WPF, Silverlight, Expression and more. As they put it:

In the 2008 whitepaper “The New Iteration,” Karsten Januszewski teams up with Jaime Rodriguez to spotlight what Microsoft has dubbed the XAML revolution. Based on interviews with early Windows Presentation (WPF) and Silverlight users, Januszewski drills into emerging Microsoft technologies and explores how the designer/developer collaborative process is undergoing change. But, what's the bigger picture? Why is Microsoft investing so heavily in UI Technologies? What are the business benefits that will drive adoption in a field traditionally dominated by rivals? These questions and others are answered here.

You can read the full article here or download the interview.

Transitionals

Karsten Januszewski — Tue, 29 Apr 2008 20:13:00 GMT

It was almost a year ago that the transition controls were quietly released for WPF, which I blogged about and included in the WPF Feature Fest (source and deployed app):

The guts of this project is now available as Transitionals on Codeplex. A lot of the code has been refactored quite nicely. What's really great about this release is the accompanying documentation, which is incredibly thorough.

Using Flotzam At A Conference

Karsten Januszewski — Fri, 18 Apr 2008 19:58:00 GMT

Here is a guide for using Flotzam at a conference:

Flotzam at a conference is fun. It gives the audience the ability to immediately participate in the event as well as on the blogosphere. Their photos, twitters, etc, show up on the big screen.

If you would like to see Flotzam in action, you can (1) install the application from http://www.flotzam.com or (2) watch a video about the application at http://flotzam.com/video.htm. You can also watch a video that discusses the Mix Flotzam Restyle contest and the winners here: http://visitmix.com/blogs/News/Flotzam-Design-Contest-Winner/.

If you aren’t familiar with these social networks used by Flotzam, here’s a brief intro of what they are and why they are interesting.

Twitter allows you to text messages from your phone to the Twitter service, which then get posted on the web. So, by displaying Twitters from conference attendees, you can see almost real time information about what people are saying about the conference.
Flickr and Facebook integration is about allowing attendees to upload their photos of the event to their service and then Flotzam will pull and display their photos.
Digg is service that allows the community to post interesting stories and then vote on their relevance.
RSS is a syndication format supported widely – you can display any RSS feed through Flotzam.
YouTube is a site that allows people to upload video.

The end result is that Flotzam aggregates all these networks and does a fun visualization.

A few things to note:

· If there is another social network you want to add to Flotzam, it requires more code to be written. There’s an explanation of how to do it here: http://flotzam.com/blog/post/How-To-Add-A-New-Datasource-To-Flotzam.aspx. An easier route to getting different data into Flotzam is if that social network supports RSS.

· Because Flotzam pulls data real time, there is the chance that inappropriate content could appear on the screen.

If you would like to use Flotzam for your conference, you need to do the following:

1. Download the .exe build of Flotzam here: http://www.flotzam.com/download/flotzam.zip

2. You should have a machine with w/2GB RAM and a video card of 256MB. Be sure to test on your hardware to catch any issues in advance.

3. The machine must have network access. Flotzam does not do well with intermittent connectivity; if you can’t guarantee a stable connection to the internet, don’t use Flotzam.

4. Determine what feeds you want Flotzam to display.

Note that you will need to somehow communicate to the attendees how to access the services you set up. Another option is to not let attendees know about the tags and simply have your conference folks twitter and upload photos.

Here are the steps to configuring Flotzam:

1. All settings can be changed by clicking SETTINGS AND OPTIONS in the upper left corner.

2. For example, if you want everyone who is at the event have their Twitters appear, you can create a Twitter account such as myconference, let people know about it, and then specify for Flotzam to “Watch My Followers” in the Twitter settings panel, providing the username and password for the myconference twitter account.

3. If you set up a Facebook event for your conference, you can enter the Event ID in the Facebook settings panel. The Event ID found in the URL when on the Facebook event itself, so if the URL for the event is http://www.facebook.com/event.php?eid=2367953648 the event id is 2367953648). You'll also have to provide you credentials to Facebook.

4. If you want to add a different Flickr tag, you can modify the tag in the Flickr settings Panel.

5. You can specify a DIGG setting and a YouTube tag.

6. If you want to manage which RSS feeds show up, you need to do that management in Internet Explorer.

7. Lastly, if you want to have different skins show up, you can check that box in the general settings tab.

Updates to Flotzam

Karsten Januszewski — Tue, 15 Apr 2008 00:37:00 GMT

I realized that the code base I used for Flotzam for the MIX conference was not posted and there are a few interesting things that have been updated in the code that people may be interested in:

For MIX, we displayed photos that were posted to the MIX event on Facebook. How do you get all photos from an event from Facebook? Officially, there isn't an API for this. Unofficially, it can be done through FQL by simply calling photos.get and passing the event id. I extended the Facebook .NET wrapper and added a method called GetEventPhotos that does this. The reason this is interesting is if you want to use Flotzam at a conference and want to access the photos from a Facebook event.
I also added a setting that allows you to choose whether to show photos from Facebook friends or show photos from an event or both.
Another thing we did at MIX was to show all twitters from anyone following the event. I didn't have this officially wired up in the settings, but now it is. It is a little confusing: if you pick, "watch me and my friends" you are seeing the tweets of people you follow. But if you pick "watch my followers" you are getting the last tweet of anyone who is following you. It is kind of goofy because the APIs return a different schema depending on which you pick, so the code has to do some casting between .NET types, since I serialize everything.
I've also added a setting so you can either choose to have the skins randomly toggle or you can just stick with one skin.
I've also gone ahead and uploaded the source code with the .PNG sequences done by Jeremiah Morrill. With all those images, the download is 50 mb. As such, I've made one version of the project that doesn't have the .PNG sequences which is smaller.

Download the code with PNG sequences.

Download the code without PNG sequences.

Two Great WPF Video Samples Online

Karsten Januszewski — Mon, 31 Mar 2008 18:19:00 GMT

In WPF, the MediaElement is simple and easy, but there are times when one wants to do more with video (webcams, pixel manipulation, etc.). This usually requires dropping outside of WPF into unmanaged code or at least referencing unmanaged dlls, all which can get tricky, suffice to say. I wanted to point out two great WPF video samples that recently came online which abstract out some of this complexity and let you get to the task at hand.

http://www.codeplex.com/VideoRendererElement: With this project, by Jeremiah Morrill, "a developer can update a pixel buffer or video media sample and have it render in WPF space at MediaElement speed. It is compatible with GDI, DirectShow and direct pixel updates." The nice part is that he's abstracted all the DirectShow code, so you can work with this project and stay in safe .NET land.

http://blogs.msdn.com/uberdemo/archive/2008/03/27/capturing-a-webcam-stream-to-a-wmv-file-from-within-a-wpf-application.aspx: With this project, you have probably the best class I've seen out there for capturing a webcam with WPF. Very clever how he uses the Windows Media Encoder Series 9 for the capture. His write up is very thorough.

Direct Links For Downloading WPF Boot Camp Videos

Karsten Januszewski — Mon, 24 Mar 2008 21:15:00 GMT

Someone asked for direct links for downloading the WPF Boot Camp videos, so here they are.

Day 1

http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/Introduction_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/VS_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/LapAroundBlendUnni_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF1_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF2_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF3_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF4_2MB_mix.wmv

Day 2

http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF5_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF6DataBinding_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF7DataBinding2_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPFDatabinding3a_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/IntroToWPF9Events_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/QAWithArchitects_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/3DTechniques_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/WPFPerf_2MB_mix.wmv

Day 3

http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/WPFandLegacyCode_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/Prism_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/HelloRealWorld_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/WPFInStyle_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/RealWorldWPF_2MB_mix.wmv

If you want formats other than .wmv, replace the _2MB_ and change the extension to .wma, .mp3, .mp4, etc. See the list of links below to figure out the formula:

http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_mix.wma
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_Zune_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_2MB_mix.wmv
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_large_mix.jpg
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_mix.mp3
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_mix.mp4
http://mschnlnine.vo.llnwd.net/d1/mix/6/2/5/AppliedWPF_small_mix.jpg

WPF Boot Camp Videos and Collateral Posted

Karsten Januszewski — Fri, 21 Mar 2008 19:55:00 GMT

I just posted the videos and collateral from the WPF Boot Camp 2008 here. Lots of great material here, including talks by Mark Wilson-Thomas, Unni Ravindranathan, Jonathon Russ (IdentityMine), Robert Ingebretsen (IdentityMine), David Teitlebaum, Jordan Parker, Jaime Rodriguez, Adam Smith, Henry Sowizral, Glenn Block, Josh Smith (Infragistics), Alan Le (Vertigo) and Josh Wagoner (IdentityMine). If you are new to WPF, there's some great content here. If you are a WPF veteran, check out the day 3 content, which has some great real world talks.

Note that the requires Silverlight Beta 2 to run. I ended up using my carousel control to make the site. I also used Ed Maia's SL2 Video Player. If you want the code I used to built the site, you can download it here.

Memory Leaks and WPF

Karsten Januszewski — Fri, 08 Feb 2008 04:18:00 GMT

I think that there is an assumption by many .NET developers that, with the CLR's garbage collector, they are immune from memory leaks. This is hardly the case. When writing WPF applications, there are a number of gotchas in this department. Hat's off to Jossef Goldberg, who has a fantastic post on some of the more pernicious WPF memory leaks: how to avoid them and, if that fails, how to find them.

2008 WPF Boot Camp

Karsten Januszewski — Mon, 28 Jan 2008 16:48:00 GMT

Last week, we held a WPF boot camp for a set of folks here in Redmond. It was a great event and, most pertinently, we taped the entire thing, just as we did last year. (We should have the videos posted in the next few weeks.) And, just as last year, we have had some great sessions on real world WPF by non-Microsoft folks. This year, we had Josh Smith (Infragistics), Alan Le (Vertigo) and Josh Wagoner (IdentityMine). Each gave great talks full of nuggets of WPF wisdom.

Josh's talk really explicated how the model-view-controller pattern is baked into WPF and he provided a very cool skeleton app that demonstrated this, using WPF features like commands, databinding and more, all ready made for unit testing. He actually turned the content of his talk into a code project article. Here's the code and slides from his talk.

Alan Le, self described as a creative developer (nice!), delved into the realities of designer-developer collaboration. Here's his slides.

Josh Wagoner, whose been working on WPF forever I think, covered IRTs (Intermediate Render Targets), animation (both frame based and timer-based) and attached properties (every WPF guru's favorite trick). Check out his demo code and slides.

Overall, listening to these guys talk about their excitement for WPF reminded me how addictive WPF is once you've gained some proficiency. It really appeals to those developers who appreciate elegance.

Flotzam Restyle Contest: Submit Your Restyle and Be Featured At MIX!

Karsten Januszewski — Fri, 25 Jan 2008 18:11:00 GMT

Perhaps you remembered last year’s MIX, in which we featured Flotzam, a WPF screensaver mash-up that showed MIX07 feeds from Facebook, Flickr, Twitter and blogs. Well, we are doing it again this year with a twist: we are running a contest and will feature community created skins of the application on the big screen and on the screensavers of the computers available to attendees at the show. The best skin will win an XBOX 360.

Entering the contest is easy: everything a person needs to know can be found here: http://www.visitmix.com/blogs/News/403/ including links to screencasts and instructions that show how easy it is to do the restyle. You can create a pretty cool skin in less than an hour. I’m hoping that we’ll have lots of skins and walking the halls at the show will be a kind of art installation with all these different skins appearing. So give it a try!

I’m pretty excited about the contest because it really highlights the designer/developer optimization that is core to the value proposition of WPF and Expression Blend, not to mention the ease of skinning WPF apps. Would love your help in promoting the contest.

A big thanks to Tim Aidlin, designer extraordinaire; Adam Kinney, web dev extraordinaire; and Denise Begley, community organizer extraordinaire, for helping launch year one of this contest!

Yahoo! Messenger for Windows Vista Supports 64 bit

Karsten Januszewski — Fri, 07 Dec 2007 22:25:00 GMT

The folks at Yahoo! have updated their beta to now support 64 bit as well, so if you wanted to try the application but got shut down because you were on a 64 bit machine, you can go grab the latest download and install it.

Mole and Mole II: Great WPF Debugging and Visualization Tool

Karsten Januszewski — Fri, 07 Dec 2007 22:10:00 GMT

In The New Iteration, SNOOP is discussed, a great tool for visualizing and manipulating the WPF visual tree on the fly. I also wanted to highlight some of the great community efforts that build upon this idea. Josh Smith, Andrew Smith and Karl Shifflett have released a Visual Studio Visualizer for WPF that is similar to Snoop but provides more features.

This product allows unlimited drilling into the visual and logical trees and any sub-objects of these, including objects in the managed heap. User can also view the run-time visual and XAML of the object.

The following two articles get into visualzers and explain the two versions of Mole.

Current Version:

http://www.codeproject.com/KB/WPF/moleIIforWPF.aspx

Original Version:

http://www.codeproject.com/KB/WPF/MoleForWPF.aspx

Mole's Home Page:

http://karlshifflett.wordpress.com/mole-visual-studio-visualizer-for-wpf/

The New Iteration: How XAML Transforms the Collaboration Between Designers and Developers in WPF

Karsten Januszewski — Fri, 07 Dec 2007 21:30:00 GMT

I'm excited to announce the availability of a white paper that's been long in the making: The New Iteration: How XAML Transforms the Collaboration Between Designers and Developers in WPF. This is a 28 page white paper written by Jaime Rodriguez and I that digs into issues and solutions when working on a WPF project with both designers and developers. A result of extensive interviews with developers and designers with real world WPF experience, Jaime and I tried to get some canonical information out there for people trying to live the XAML dream and realize the benefits of the new workflows engendered by XAML. We talked to both internal Microsoft folks as well as many external companies to coalesce the best practices that are being established in this domain.

I'm proud of the entire paper. Here's some highlights: The sections on XAML provide a perspective on XAML that I don't think has been articulated before in terms of how XAML makes the workflow possible. The section on roles and workflow took us many iterations and ultimately puts into place some different models to implement when actually getting into the nitty gritty of collaborating on a project. I think this graphic in particular does a nice job of explaining the workflow visually (thanks to Tim Aidlin for doing the graphic):

The best practices for designers and developers I think have a lot of great tactical tips worth exploring.

I've started a thread on the paper over in the WPF forums and would love to see that be a place for an ongoing discussion of some of the ideas forwarded by Jaime and I.

Here's a pdf version of the paper if you are interested.

Yahoo! Messenger For Windows Vista

Karsten Januszewski — Thu, 06 Dec 2007 18:52:00 GMT

Check it out: a beta version of Yahoo! Messenger for Vista is now out. Download it here and read about all the new features and see a video here. This is 100% WPF -- hats off to Eric Burke and company who have done a knock out job with the application. He says on his blog that he'll be posting lots of learnings about WPF; looking forward to that.

My favorite feature? Check out the emoticons, for example, how they composite on top of the application. Pretty sweet. Give it a shot and provide feedback to the team on what you like and don't like.

WPF Contest

Karsten Januszewski — Tue, 04 Dec 2007 00:10:00 GMT

Check out this contest for WPF applications sponsored by Lab 49. There's quite a few prizes available -- and good prizes too. The rules are pretty interesting, as they provide the data set to work with. So, the data is the equalizer: whose got the best visualization?

Hierarchical View Carousel Source Code Posted

Karsten Januszewski — Fri, 30 Nov 2007 21:00:00 GMT

About a thousand years ago, I was involved with a demo that showed the use of WPF to visualize hierarchical data. We had many requests for the code, but wasn't able to provide it...until now. At long last, we are making the code for the hierarchical view carousel available.

The Hierarchical View Carousel is a prototype of a different model of navigating hierarchies, based on using a 3D effect that allows the user to better visualize the relationships between nodes. If you are curious as to what this is, check out this snip from the Channel 9 video I did with Simon Guest.

When you first launch the application, the control will load offline data that "mashes up" Microsoft CRM data, SAP data and shipping data. The notion is that the control shows a view of accounts from CRM. By hovering over the node, a user can immediately see if that account has an order going to it (by querying SAP) and what its shipping status is. Drilling down into an account shows additional detail about the account.

At any time, the control can use a different data set with the same visualization. By clicking the radio button below for file explorer, the control can render data from the file system, navigating from "c:\".

By clicking the Active Directory button, the control will bind to Active Directory,if available. Using the search box, a person's name can be entered and upon clicking the search button, that person will be found in Active Directory, with that person's direct reports listed below.

KNOWN ISSUES/FEATURE REQUESTS

--Doubleclicking on a node does not initiate opening the nodes beneath that person. For some reason, the event isn't bubbling up.
--Only one branch can be created. You should be able to create two branches, but that broke at some point and I couldn't figure out how to fix it.
--Sometimes the carousel spins rapidly to the left when spinning the carousel with the arrows. Not sure why.
--You can't navigate up from the root node, if there is something above it. That's not a bug, but a feature request.

If you fix any of these bugs, please let me know!

SOURCE CODE GUIDE

It is worth commenting that this source code was written against a build of WPF before WPF was completed. The code is pretty crusty. As such, there are techniques used that may seem unnatural. Much of this is a result of not all of WPF being completed when the project was initially written. For example, it doesn't use HierarchicalDataTemplate nor does it use an ItemsControl model in an optimal way. Nonetheless, there are some effective techiques employed worth digging into.

The HVC project is broken down into 5 different projects. Host is the Windows application. The hierarchical carousel control itself is a seperate project called XPHierarchicalCarousel. When creating the HVC, a datasource must be wired up that complies witTehh the IDataProvider as defined in the DataAdapter project. Within the DataAdapter project are the three data adapters. Creating a new data adapter involves implementing the IDataProvider interface for traversing nodes. The SAPConnector project and the ShippingServiceConnector project are for the purpose of the CRM adapter. The offline data is actual SAP data, serialized to .NET objects. The ShippingServiceConnector is a stub for a service that would contact a shipping web service.

Download the Code

WPF 3.5 AddIn Demo - Go Plugins!

Karsten Januszewski — Tue, 20 Nov 2007 23:51:00 GMT

With the release of .NET 3.5 and Visual Studio 2008 comes a new and improved WPF. With that in mind, I wanted to get a demo out that showed off some of the new WPF 3.5 features. There was some code written, not by me, but by Kevin Moore, author of the WPF Bag o' Tricks among other WPF goodness. Kevin has moved on from Microsoft and he never released this code, but there is some very useful concepts presented. I grabbed his code, cleaned it up and have made it available for download. Basically, there's a lot of useful infrastructure code for creating a secure plug-in model for a WPF. One nifty thing he does is binds to the same data across his different plug-ins. He also shows off some other WPF 3.5 features along the way, like interactive 2d on 3d.

It is worth pointing out the cleanup I had to do with within System.AddIn. The change was the renaming of VisualAdapter to FrameworkElementAdapters and a change in the method's signature that turned out to be pretty trivial to fix.

Flotzam Web: Databinding and Templates in Silverlight 1.0

Karsten Januszewski — Fri, 09 Nov 2007 22:39:00 GMT

I've been playing with porting Flotzam to Silverlight 1.0 and have an intial prototype working. (Emphasis on prototype -- read, not ready for primetime yet. If anyone wants to help fix some of the bugs listed below let me know.) I figured I'd share it out nonetheless. You can see it running here and download the source here.

I'm pretty excited by the prospect of the architecture I've put together. The crux is that I've created a serverside templating infrastructure that's compliant with WPF's XML Databinding syntax. My goals were to reuse as much of the WPF model as possbile, but on the server.

I initially went down a path of actually instantiating WPF on the server, but pulled back from that for a couple reasons. First, and most importantly, WPF wants to be in a Single Threaded Apartment (STA). One can force this to happen by adding the ASPCOMPAT directive to your .aspx pages, but the scalability implications are severe. These scalability problems might be avoided by doing some multithreading, which I started to explore, but then ran out of energy. I also had some trickiness in getting the ContentPresenter to behave, which sidelined that approach as well. (You can see my initial explorations of the architecture in the xaml.aspx file.)

I then went down a different path, inspired by Laurence Moroney and Joshua Allen. Laurence started me off thinking about templating based on his MSDN sample that does some clever things with server side generation of XAML based on an RSS feed. I liked where Laurence was going as did Joshua, who took this idea to the next level in a prototype he wrote that uses XMLReader and XMLWriter for doing templating. (For some reason, he never blogged about this but he hooked me up with his code, nonetheless. Being an ex-Web data PM, he knows how to sling infosets around, which came in real handy.) I took his code, which is a more generic templating model as opposed to Laurence's custom sample and extended it to support the WPF databinding syntax (aka {Binding XPath=/foo}), as opposed to the custom databinding syntax Joshua had come up with.

Note on the code Joshua wrote: he has this class called MiniCache, which he uses to store elements and attribute values in a dictionary, because he was working under the constraint of SL 1.1 not having an XMLDocument or XPathNavigator. However, as I'm running this on the server, I don't have this constraint. A big TODO for this code is to replace his dictionary implementation with one that uses XMLNode and XPath.

Using Joshua's code with a few modifications, I was able to reuse my WPF datatemplate within Silverlight 1.0!

Here's the basic architecture:

The action begins in my global.asax, which populates the ASP.NET Application object with an initial set of content. In datamodel.Fetch(), I grab the latest Twitter timeline and use it to generate my flotzams.

public void Fetch() { WebClient client = new WebClient(); Stream data = client.OpenRead("http://www.twitter.com/statuses/public_timeline.xml"); XmlReader twitterItems = XmlReader.Create(data); int idx = 0; while (twitterItems.ReadToFollowing("status")) { MiniCache twitterItem = new MiniCache(twitterItems.ReadSubtree()); XmlReader template = XmlReader.Create(server.MapPath("temp4.xaml")); string XamlContent = twitterItem.ProcessTemplate(template, idx.ToString()); if (null == application.Get(idx.ToString())) application.Add(idx.ToString(), XamlContent); else { application.Lock(); application[idx.ToString()] = XamlContent; application.UnLock(); } template.Close(); idx++; } twitterItems.Close(); client.Dispose(); }

The code in Fetch() is pretty darned straight forward, which is what I like about the architecture. I'm basically just walking the nodes from the Twitter feed, merging them with my template (temp4.xaml), which came from Blend. Once I have the resulting XAML, I stick it in the Application object.

I'm not going to go into the code of the MiniCache, because the idea is that is encapsulated sufficiently so as to be black box. However, I did do some things that customized it. In particular, I created my own syntax to pull of the equivalent of databinding functions. You can dig into the code to see what I did.

With my application object filled with generated XAML content, I'm now ready to display it. I do this from default.aspx, which instantiates Silverlight. In the javascript PageLoad function I start up a timer, which makes an AJAX GET call to default2.aspx, which is where my dynamic XAML is served from:

function displayTimer(){ var webRequest = new Sys.Net.WebRequest(); webRequest.set_url("default2.aspx?tweet=" + i); webRequest.set_httpVerb("GET"); webRequest.add_completed(completedHandler); webRequest.invoke(); i = i + 1; if (i == 19) i = 0; setTimeout("displayTimer()",4000) } function completedHandler(result, eventargs) { if (result.get_responseAvailable()) { var host = document.getElementById("SilverlightPlugIn"); var xaml = host.content.createFromXAML(result.get_responseData(),true); var rootElement = host.content.findName("rootElement"); rootElement.children.add(xaml); } }

When the call completes, I use the createFromXAML method to create my Canvas object, which is then inserted at the root. Note how I pass true to the createFromXAML method so I don't have naming collisions.

The code is default2.aspx is pretty darned straight forward. It just picks out the querystring and returns the XAML, extracting it from the application object. And there you have it: a databinding infrastructure for Silverlight 1.0 based on WPF.

The bugs I'm still reckoning with:

--Firefox issues. It was working in Firefox and then at some point it broke. It seems to hang on fetching the images for the Twitter avatars from http://s3.amazonaws.com. Not sure what's going on there. I think Firefox stopped working when I added some error handling on image retrieval.

--Refresh issues. I can't figure out why my cache is not being updated. I try to update it after displaying all 20 twitters, but it seems to hang to the original 20.

--TranslateTransform and RenderTransformOrigin. I'm randomly adding these values to the Canvas, but they don't seem to be getting acknowledged by Silverlight, thus flotzams always coming in from the right to left and often landing in the same place.

The things I'd like to do:

--Pass credentials so that the data is personalized

--Add Digg, Flickr, Facebook, RSS

--Improve the MiniCache

--Show how Blend fits into this workflow

Digg, Flotzam and the Desktop

Karsten Januszewski — Wed, 24 Oct 2007 22:28:00 GMT

I updated Flotzam to support Digg, so now those of you with a Digg addiction (addiggtion?) can watch those Diggs go by. One thing I did was enable customization so that you can configure Digg by topic or by type (new, popular or all).

The Digg API is quite nice as is Headzoo's .NET wrapper up on Codeplex. He has a simple desktop app that I published using ClickOnce, which you can try here.

.NET Source Released

Karsten Januszewski — Wed, 03 Oct 2007 17:40:00 GMT

The implications for Microsoft releasing the source of the .NET Framework, including WPF, are huge. Love it.

WPF Tips and Tricks: Window.Show() Without Activating The Window

Karsten Januszewski — Wed, 22 Aug 2007 20:18:00 GMT

So you want to spawn a new WPF window but you don't want it to be activated? This is doable in Win32, but with WPF, it presents some problems ... until now. This issue recently came up and some folks (read: not me) on the WPF team discovered a a pretty clever workaround. Basically, the workaround is to use an obscure windows hooks that exists for Computer Based Training (CBT), which allows or a training program to choose to ignore or allow messages to get through to the window.

So, the solution is to set the hook before calling the Show() method on the window. The call back receives the HCBT_ACTIVATE notification, returns 1 to ignore/prevent the operation, then unhooks the hook. The window is shown, but does not take focus. There is no flicker or visible degradation.

If you'd like to see this working in action, check out the sample application that I've deployed via ClickOnce. You'll notice that the main window will spawn three windows yet you will continue to be able to type in the textbox of the main window. I've posted the source code and here's the crux of the code if you are interested:

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Threading;


namespace ShowWindowWithoutActivating
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>

    public partial class Window1 : System.Windows.Window
    {
        delegate int HookProc(int code, IntPtr wParam, IntPtr lParam);
        private HookProc myCallbackDelegate;
        IntPtr hook;

        DispatcherTimer dt = new DispatcherTimer();

        int counter = 0;

        public Window1()
        {
            InitializeComponent();
            textBox1.Focus();
            dt.Interval = new System.TimeSpan(0, 0, 3);
            dt.Tick += new EventHandler(TimerTick);
            dt.Start();

            // initialize our delegate
            this.myCallbackDelegate = new HookProc(this.MyCallbackFunction);

        }
        public void TimerTick(object sender, EventArgs e)
        {
            if (counter == 2) dt.Stop();
            counter++;

            Window w = new Window();
            w.Title = "TestWindow";
            w.Width = 400;
            w.Height = 300;
            w.Top = 400;
            w.Left = 400;

            // setup a cbt hook
            hook = SetWindowsHookEx(5 /* wh_cbt */, this.myCallbackDelegate, IntPtr.Zero, AppDomain.GetCurrentThreadId());
            w.Show();
        }

        private int MyCallbackFunction(int code, IntPtr wParam, IntPtr lParam)
        {
            switch (code)
            {
                case 5: /* HCBT_ACTVIATE */
                    UnhookWindowsHookEx(hook);
                    return 1; /* prevent windows from handling activate */
            }
            //return the value returned by CallNextHookEx
            return CallNextHookEx(IntPtr.Zero, code, wParam, lParam);
        }

        [DllImport("user32.dll")]
        static extern bool UnhookWindowsHookEx(IntPtr hhk);

        [DllImport("user32.dll")]
        static extern IntPtr SetWindowsHookEx(int code, HookProc func, IntPtr hInstance, int threadID);

        [DllImport("user32.dll")]
        static extern int CallNextHookEx(IntPtr hhk, int nCode, IntPtr wParam, IntPtr lParam);

    }
}

Consuming JSON From WPF

Karsten Januszewski — Fri, 10 Aug 2007 00:20:00 GMT

I want to throw up some prototype code that consumes JSON from WPF. (For more on JSON, see this article.) I put together that uses the JavaScriptSerializer to deserialize JSON into CLR objects, which could then be used for databinding.

Here's what I did. First, I went and downloaded the ASP.NET AJAX framework. Then, I created a new WPF project and added a reference the System.Web.Extensions dll, which got installed to C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions. I then added the System.Web.Script.Serialization to my using statements.

To keep things simple, I wanted to prove I could convert this JSON:

{ "FirstName": "Karsten", "IsAlive": "true"}

Into this CLR type:

class Person
{
    public string FirstName;
    public bool IsAlive;
}

Turned out to be pretty simple. Here's the code:

public Window1()
{
    InitializeComponent();
    JavaScriptSerializer jss = new JavaScriptSerializer();
    jss.RegisterConverters(new JavaScriptConverter[] { 
    new PersonConverter() });
    string test = "{\"FirstName\": \"Karsten\", \"IsAlive\": \"true\"}";
    Person p = jss.Deserialize<Person>(test);
    Person p = jss.d
}

Note how I register this thing called the PersonConverter after I instantiate the JavaScriptSerializer . That's where all the work gets done and I'll discuss the PersonConverter below. The only other interesting thing to note here is that to get the Person object, I use the Deserialize<> method instead of the DeserializeObject(). This allows me to actually pass the type I want to have returned rather than attempting to cast the object afterward.

So, here's the code for the PersonConverter, which overrides the JavaScriptConverter :

class PersonConverter : JavaScriptConverter
{

    public override object Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer)
    {
        Person p = new Person();
        p.FirstName = serializer.ConvertToType<string>(dictionary["FirstName"]);
        p.IsAlive = serializer.ConvertToType<bool>(dictionary["IsAlive"]);
        return p;
    }
    public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)
    {
        throw new Exception("The method or operation is not implemented.");
    }

    public override IEnumerable<Type> SupportedTypes
    {
        get { return new Type[] { typeof(Person)}; }
    }
}

The crux of the code here is in the override of Deserialize. I followed the SDK documentation and made sure to use the ConvertToType method instead of doing the casting myself. Basically, I just map each property from the JSON to the CLR object. One could probably get fancy and use Reflection to do this dynamically, if you had everything singing.

I think I'll iterate on this a little more in a future post, but the net is that you can consume JSON into your WPF applications!