Both Yet Another Carousel (YAC) and the WPF training site (which uses YAC) have been ported to Silverlight Beta 2.

I recently removed the pull from Twitter on my blog. Because they have been down so much and because that widget is not AJAX-ified, it was causing my blog page to fail to load.  Interesting consequence of using services in the cloud and making me remember that everything has to be asynch and decoupled these days...

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.

I have a Windows Mobile 5.0 cellphone and realized recently that all my text messages were locked up on the phone -- ActiveSync doesn't sync them.  There's probably applications out there that will archive your text messages, but being a dev, I figured I'd do it myself.  Unfortunately, the .NET libraries don't support querying the SMS message store directly, so I ended up using a third party library, In The Hand, which worked out quite nicely.  The code was pretty darned simple; it took me a lot longer to realize that I needed to install the SDK certs onto my phone in order to deploy an application to the phone. I ended up also having to run the rapiconfig tool:

C:\Program Files\Windows CE Tools\wce500\Windows Mobile 5.0 Smartphone SDK\Tools>rapiconfig /p SdkCerts.xml

This made everything happy (tip of the hat to Stuart Preston).  But once I was able to talk to the phone, application development was quick.  I just walk the different folders and built an XML file out of them. I figure I can work with the XML at some point if I want to do some visualization of my text history. Here's the code.

Now, I want to write a threaded text app.  I know this is in Windows Mobile 6.1, but it would be handy to have on Windows Mobile 5.0.  There's a few apps already out there that do this, but why buy it when you can build it?

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.

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. 

Just came across this video on Adaptive Path's blog of Bruce Sterling talking about Interaction Design:

Bruce Sterling from Innovationsforum on Vimeo.

Missed him at SxSW this year, but this video gave me my fix.  He's really clear on what spimes are right at the beginning.  He has to do this to establish his  overall theme, which is to think about interaction design not in literary terms -- "sense of wonder," etc. -- but just "don't make me think" and "reduce my cognitive load."  He's dead on right here.   And some interesting commentary on Google and Microsoft at about 22:00.  Microsoft as "vehicle" compared to Google as "techno-social."  And a funny comment about Flickr at about 32:00. His quote from Tony Dunn: "My default mental model of a user is a tortured, existential soul drifting through complex technologically mediated consumer landscape."   Nice. And a quote from Bruce: "The net and its adjuncts are becoming a hybrid meta medium that links everyone...the former hierarchies of the creative disciplines are coming violently apart, right in front of our eyes.  Yet at the same historic moment, profoundly powerful networks are assembling."  Sterling is an elder for this era. 

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.

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.

Was watching a Channel 9 interview on the DLR and found out about LOLCODE.  Too funny.

I recently used the Silverlight 2 Carousel sample I wrote for the WPF Boot Camp application and encountered a gotcha that some others may hit. Each carousel contains multiple videos, between 5 - 10.  Initially, the source of the video was coming from an mms:// URI, streamed from a Windows server. All worked no problem.  But, the video quality was sub par and I had other videos that were better quality, but not streamed over mms://. I switched to the higher quality videos, which are buffered over http://.  When I did that, the carousel would only display two videos at a time and the other panels would not display any video, even with each of the videos set with auto-play to false. I realized the reason was that the browser itself was throttling the ability of the Silverlight application to begin buffering the videos.  It would only handle two at a time.

The solution?  Rather than begin to buffer all the videos, I display screenshots of each video.  Then, when the user clicks play, I actually load and play the video. If you want the code I used to built the site, you can download it here.

I also fixed a bug in the carousel code where layout wasn't centering the carousel, which is in the latest build of the carousel.

In WPF, when styling a control, Blend has a very handy feature which allows you to get at the default style and template for any control, simply by right clicking the control and selecting "Edit Control Parts (Template)" and then selecting "Edit a Copy..."  These styles and control templates are great places to start when restyling controls.

Unfortunately, Silverlight 2 doesn't have the corrallary in Blend (yet).  However, this is easy to get around once you get a hold of the generic.xaml file for all the Silverlight controls. I went ahead and posted it, although there are two other places you can get an "official" copy. First is the source code for the Silverlight Controls themselves.  Second is by using Reflector, loading C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Client\System.Windows.Controls.dll and looking at its resources in the disassembler.

Once you have generic.xaml, restyling controls by tweaking the existing styles is simple.  First, cut/paste the contents of generic.xaml (either all the styles or just the style of the control you want to restyle) into the resources of either app.xaml or one of your pages (depending on the scope you are seeking.) Second, give the style an x:Key value so that you can reference it later. Finally, add that style attribute to your control in XAML: Style="{StaticResource CustomButton}".  That's it!  Now you can tweak the style of the button, even changing the storyboards that get fired as a result of different states.