Karsten Januszewski

Silverlight Carousel and WPF Training Site Ported To Beta 2

Karsten Januszewski — Fri, 20 Jun 2008 21:11:00 GMT

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

Twitter

Karsten Januszewski — Tue, 27 May 2008 21:03:00 GMT

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...

Technorati Profile

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.

Archiving My Text Messages: Windows Mobile 5.0 Development

Karsten Januszewski — Mon, 12 May 2008 22:53:00 GMT

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?

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.

Bruce Sterling on Interaction Design

Karsten Januszewski — Fri, 25 Apr 2008 20:17:00 GMT

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.

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.

LOLCODE

Karsten Januszewski — Mon, 14 Apr 2008 20:56:00 GMT

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

Using Silverlight Carousel For Video

Karsten Januszewski — Fri, 11 Apr 2008 22:25:00 GMT

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.

Tweaking The Default Styles For Silverlight 2 Controls

Karsten Januszewski — Tue, 01 Apr 2008 18:55:00 GMT

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.

What To Do When Breakpoints Disappear and Debugging Dies In Silverlight 2

Karsten Januszewski — Tue, 01 Apr 2008 18:35:00 GMT

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.

Using A UserControl As A DataTemplate in Silverlight 2 and Blend 2

Karsten Januszewski — Mon, 31 Mar 2008 23:00:00 GMT

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.

Reading a file from the server in Silverlight 2

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

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:

You'll need to add a reference to System.Net.dll and using statements for System.Net and System.IO.
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.
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);
                }
            }
        }        

    }