Metro app development hidden gem: anonymous type binding

Just a little post to point out a hidden gem if you are a .NET developer creating a Metro style app: you can bind to anonymous types.  This came up in a discussion with a customer today that I was having and, frankly, I never tried it until then because my mind was back in Silverlight where this isn’t possible.  There may not be a tone of cases where this is valuable for you, but knowing it is there may help.

Let’s assume I have a basic class Person:

   1: public class Person

   2: {

   3:     public int Age { get; set; }

   4:     public string FirstName { get; set; }

   5:     public string Gender { get; set; }

   6: }

And in my application I have a list of that Person type that I somehow received.  In this example, I’m just hard-coding it right now.

   1: List<Person> people = new List<Person>();

   2: people.Add(new Person() { Age = 38, FirstName = "Tim", Gender = "Male" });

   3: people.Add(new Person() { Age = 9, FirstName = "Zoe", Gender = "Female" });

   4: people.Add(new Person() { Age = 5, FirstName = "Zane", Gender = "Male" });

I can then decide I want to bind to a ListView control which has a particular template:

   1: <ListView x:Name="PeopleList" Width="500" Height="300">

   2:     <ListView.ItemTemplate>

   3:         <DataTemplate>

   4:             <StackPanel Orientation="Horizontal">

   5:                 <TextBlock Text="{Binding TheName}" Margin="0,0,10,0" />

   6:                 <TextBlock Text="{Binding GuysAge}" />

   7:             </StackPanel>

   8:         </DataTemplate>

   9:     </ListView.ItemTemplate>

  10: </ListView>

Notice that I’m binding to properties (TheName and GuysAge) that don’t exist on my Person class?  In my code, I can then create a LINQ query to filter out only the “dudes” from my list and bind that result:

   1: var onlyGuys = from g in people

   2:                where g.Gender == "Male"

   3:                orderby g.FirstName descending

   4:                select new

   5:                {

   6:                    GuysAge = g.Age,

   7:                    TheName = g.FirstName,

   8:                    Gender = "Dude"

   9:                };

  10:  

  11: PeopleList.ItemsSource = onlyGuys;

The result is that my ListView now shows 2 people in the list.  Nice.

Get in the real world

Now I would probably agree that since you already have a strongly-typed class this is probably not the use case here.  It certainly might be helpful, but you already have a class (and in this example, one that you completely control so you could shape it to be what you really need).  What about those times you don’t have a class or you don’t own the type coming back?  JSON ring a bell?  Using the sample JSON response (I’m not focusing on how to retrieve data here just how to bind to it) from Twitter APIs, we can demonstrate how this might be more helpful.  Here’s the Twitter JSON data I’m referring to in this example: Twitter Mentions API.

My app wants to retrieve and bind to Twitter data but I don’t really want to have a “TwitterResponse” data type that I have to serialize in/out in my code.  The mention data is an array of mentions.  For the sake of simplicity I’ve basically put my JSON string in a file rather than confuse this sample in how to work with Twitter.  My code looks like this (assume that ‘data’ is the resulting Twitter mentions JSON string:

   1: // parse the data into a JsonArray object

   2: var mentions = JsonArray.Parse(data);

   3:  

   4: // build the query out of the mentions

   5: var qry = from m in mentions

   6:           select new

   7:           {

   8:               MentionText = m.GetObject()["text"].GetString(),

   9:               FromUser = m.GetObject()["user"].GetObject()["screen_name"].GetString(),

  10:               ProfilePic = m.GetObject()["user"].GetObject()["profile_image_url"].GetString()

  11:           };

  12:  

  13: MentionData.ItemsSource = qry;

Notice the LINQ query for creating a “new” type that I will bind to my ListView.  In my XAML I have a simple DataTemplate to demonstrate:

   1: <ListView x:Name="MentionData" Width="500" Height="300">

   2:     <ListView.ItemTemplate>

   3:         <DataTemplate>

   4:             <StackPanel>

   5:                 <TextBlock Text="{Binding FromUser}" />

   6:                 <TextBlock Text="{Binding MentionText}" TextWrapping="Wrap" />

   7:             </StackPanel>

   8:         </DataTemplate>

   9:     </ListView.ItemTemplate>

  10: </ListView>

The result is me being able to create a LINQ query and create a new anonymous type and directly bind to it.

Voila!  Perhaps you already discovered this little gem and are using it.  It is a welcome addition to the data binding story for Metro style app development with XAML and .NET!  Of course the same benefit can be had for XML data using XLINQ queries, so while this example is for JSON data, really any source data applies…it is all about that new anonymous type you create!

Hope this helps!