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.

For some random reason, occasionally Silverlight 2 projects will suddenly no longer support debugging.  Very frustrating.  Fortunately, the fix is pretty simple:

Right click on the Web in the Solution Explorer pane.  If you have a Web project, you will see "Property Pages", if you have a Web Application project you will see "Properties".  Select that.

Under "Property Pages" select "Start Options" and make sure that both "Silverlight" and "ASP.NET" are checked, "Native Code" and "SQL Server" are unchecked.  

Recently learned a nifty trick from Pete Blois about how to use a UserControl as a DataTemplate in Silverlight 2.  This is real handy, because it allows for a more WPF-like workflow, allowing a designer to create data templates in Blend. With this workflow, the designer can go ahead and build out the data template as a UserControl. He/she may need some help from the developer to wire up the data fields -- in fact, the recommendation would be that the developer maybe create a dummy project with all the fields for the designer and then the designer can party on. (I modeled this technique here for WPF and reskinning Flotzam.)

So, here's a real simple data template from a user control:

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="SilverlightApplication1.DataView"
    d:DesignWidth="149" d:DesignHeight="36" Width="153" >

    <Grid x:Name="LayoutRoot" Background="#FFFF0000" >
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top"
              Text="{Binding}" TextWrapping="Wrap"/>
    </Grid>
</UserControl>

Note the use of the {Binding} syntax, which will just default bind to the single property on my data class. You could of course name the property you are binding to in the more likely case that you had more properties in your class.

Then, the xaml file that actually uses this as a data template looks like this:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" 
    xmlns:SilverlightApplication1="clr-namespace:SilverlightApplication1;assembly=SilverlightApplication1" 
    xmlns:d=http://schemas.microsoft.com/expression/blend/2008 
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 
    mc:Ignorable="d">
    <UserControl.Resources>
        <SilverlightApplication1:DataSource x:Key="DataSourceDS" d:IsDataSource="True"/>
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox Margin="8,8,165,8" ItemsSource="{Binding Items, Mode=OneWay, 
            Source={StaticResource DataSourceDS}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Background='Blue' HorizontalAlignment='Stretch'>
                        <SilverlightApplication1:DataView />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

Note that in the attribute where I register the namespace for the datasource, I explicitly refer to the assembly.  This is a gotcha when doing this; normally you don't need to refer to the assembly if it is in the same class, but in this case you do.

And there you have it.  Download the code here if you'd like.

I recently was working on a Silverlight 2 project and needed to "phone home" from the .xap back to the server of origin to get a text file from the server. It wasn't completely obvious how to do this at first, so I figured I'd share the code I wrote if others need to do something similar. Note a couple things:

1. You'll need to add a reference to System.Net.dll and using statements for System.Net and System.IO.
2. The ASP.NET WebDev server used for development will run the project on a random port. You can change this behavior so you have a consistent port number. Click on the project node in Solution Explorer and open the properties window (press F4). Change the “Use dynamic ports” property from True to False and edit the port number.
3. If you try to go to a server other than the server of origin, you'll most likely run into cross site scripting issues.

    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            //you may need to change this path depending on your web server
            WebRequest request = WebRequest.Create(new Uri("http://localhost:4386/io_web/textfile.txt"));
            request.Method = "GET";
            request.ContentType = "text/plain";
            request.BeginGetResponse(new AsyncCallback(ResponseReady), request);
            
        }

        void ResponseReady(IAsyncResult asyncResult)
        {
            WebRequest request = asyncResult.AsyncState as WebRequest;
            using (WebResponse response = request.EndGetResponse(asyncResult))
            {
                using (Stream responseStream = response.GetResponseStream())
                {
                    StreamReader reader = new StreamReader(responseStream);
                    string s = reader.ReadLine();
                    System.Diagnostics.Debug.WriteLine(s);
                }
            }
        }        

    }