In the comments, someone mentioned that the project wasn’t working properly for keyed scrolling. I’ve updated the project with:

• Key scrolling (left, right, up, down, page up, page down)
• CanKeyboardScroll property on the AnimatedScrollViewer so that keyboard scrolling can be turned off
• ScrollToSelectedItem property on the AnimatedListBox so that the user can have it automatically scroll to a ListBoxItem

That last one is a little hacky… I use the ListBox ItemContainerGenerator to get the heights of all the items up to the one you want and then scroll it that. I’m almost positive there is a better way and if anyone knows what it is, I’d love to hear it.

First things first, here are the project files.

Animated ScrollViewer and ListBox Project Files (Updated 5/22/09) – Contains the AnimatedScrollViewer control library with AnimatedScrollViewer and AnimatedListBox

Animated ScrollViewer and ListBox DLL (Updated 5/22/09) – For those of you who don’t care how it works and just want it to work

OK… this is going to be something of a whirlwind since I’ve never written a post this in-depth before… it will strain the limits of my ADD.

Problem:

The Listbox/ScrollViewer not only doesn’t animate, but it seems impossible to tweak it so that it animates.

The Reason:

The reason has everything to do with the ScrollViewer. Basically, the ScrollContainer and the ScrollBars are very tightly intertwined. There is a lot of code that does all the scrolling calculations and that code needs to apply to the scrolled content as well as the UI for the ScrollBars. If you dig deep enough, you’ll see the reasons. Reasons which I assume for the moment you don’t care about… you’re probably in more of a “make the @#&($ thing work!” mood. I know I was.

The Solution:

My solution was basically to completely bypass the built-in ScrollBars and put in new ScrollBars with new logic. They look and act just like normal ScrollBars, so you should be able to style them just you would any normal ScrollViewer.

OK… how I did it. (I’m going to use both Blend 2 and Visual Studio 2008)

First, create a new custom control for WPF. This can be done by going into Visual Studio and creating a new Project. Select “WPF Custom Control Library”

In Blend:

Add a WPF application to the project too so you have something to test. In the WPF application, get Blend to generate the default template for a normal ScrollViewer, accessible (in Blend) by putting a ScrollViewer into the project and right-clicking on it and selecting “Edit Control Parts (Template) –> Edit a Copy…”

Once have the default ScrollViewer template, select the “PART_VerticalScrollBar” and the “PART_HorizontalScrollBar” and copy and paste them. Rename your new ScrollBars something you like… I used “PART_AniVerticalScrollBar” and “PART"_AniHorizontalScrollBar”. Now, set the Visibility of the original ScrollBars to “Collapsed”. (We can’t get rid of them, because the ScrollViewer will be looking for them and will throw a conniption if it can’t find them.)

Also, change the Value of your new ScrollBars to 0. You’ll probably have to click on the orange box next to Value and select “Reset”.

In Visual Studio, right-click on your WPF Custom Control project and go to “Add –> New Item…” . Then select “Custom Control (WPF)” and name it something you like (mine is named AnimatedScrollViewer). This should add a class to your project as well as a basic template to your Generic.xaml file.

Copy the ScrollViewer template that we just made and paste it into the Generic.xaml. The only change we need to make is to change:

TargetType="{x:Type ScrollViewer}"

to

TargetType="{x:Type local:AnimatedScrollViewer}"

in the Style and the ControlTemplate.

OK… that’s pretty much it with the XAML. Now we get to move into the code.

Right now, our class inherits from Control, but we want it to inherit from ScrollViewer like so:

public class AnimatedScrollViewer : ScrollViewer

Next get some containers for our new spiffy ScrollBars so that we can access them from the custom control code. Type the following before the class:

[TemplatePart(Name = "PART_AniVerticalScrollBar", Type = typeof(ScrollBar))]
[TemplatePart(Name = "PART_AniHorizontalScrollBar", Type = typeof(ScrollBar))]

and the following just inside the class:

ScrollBar _aniVerticalScrollBar;
ScrollBar _aniHorizontalScrollBar;

Now, we’ll override the OnApplyTemplate and make the connection between the template scrollBars and our class ScrollBars:

public override voidOnApplyTemplate()
{
    base.OnApplyTemplate();

    ScrollBar aniVScroll = base.GetTemplateChild("PART_AniVerticalScrollBar") asScrollBar;
    if(aniVScroll != null)
    {
        _aniVerticalScrollBar = aniVScroll;
    }
    _aniVerticalScrollBar.ValueChanged += newRoutedPropertyChangedEventHandler<double>(_aniVerticalScrollBar_ValueChanged);

    ScrollBar aniHScroll = base.GetTemplateChild("PART_AniHorizontalScrollBar") asScrollBar;
    if(aniHScroll != null)
    {
        _aniHorizontalScrollBar = aniHScroll;
    }
    _aniHorizontalScrollBar.ValueChanged += newRoutedPropertyChangedEventHandler<double>(_aniHorizontalScrollBar_ValueChanged);

    this.PreviewMouseWheel += newMouseWheelEventHandler(AnimatedScrollViewer_PreviewMouseWheel);
}

Before we address the three event handlers we added, we need to create the Dependency Properties with which they will be futzing.

(We’re going start going a little bit faster. Please download the code for the excruciating detail.) We need to add the following Dependency Properties. I’m using a “PropertyName (type)”.

Dependency Properties

ScrollingTime (TimeSpan) – This will be an easy way to change the speed of the scrolling. I created mine to default at half a second, but if you changed it to 0 seconds, it would act just like any normal ScrollViewer.

ScrollingSpline (KeySpline) – This property along with the ScrollingTime property is meant to give designers and developers the easiest control possible over the animation. This property describes the spline along which the scrolling will animate. If you don’t know what this means, just leave it alone, you’ll be fine.

TargetVerticalOffset (double) and TargetHorizontalOffset (double) – These are properties that tell the ScrollViewer where it will be animating to. In the PropertyChangedCallback, they kick off a method that starts the animation.

VerticalScrollOffset (double) and HorizontalScrollOffset (double) – For some reason the normal VerticalOffset and HorizontalOffset properties in a ScrollViewer are not capable of animation. So I wrote these properties that can be animated using standard storyboard procedures. If you use them to animate, make sure you also change the TargetVerticalOffset and TargetHorizontalOffset stuff as well… otherwise there will be a disconnect between the two.

Event Handlers

CustomPreviewMouseWheel event handler – This grabs any mouse wheel spinning and uses it to change the TargetVerticalOffset so that the ScrollViewer will still animate the scrolling when the mouse wheel spins.

VScrollBar_ValueChanged and HScrollBar_ValueChanged event handlers – These are called whenever the the ScrollBars are interacted with. There was a really weird problem with some of the interaction (the arrow keys and fast-scrolling buttons weren’t working properly), so these handlers hold logic to try to translate the weirdness into something viable. They then set the Target_Offset properties appropriately.

Methods

animateScroller – This method builds the animation programmatically based off of the appropriate properties and runs it.

And that’s really about it. Once you have the AnimatedScrollViewer working, you can just add use it inside your ListBox templates and it should work. (For those who are averse to doing such a thing, I’ve added extremely simple AnimatedListBox.)

INotifyPropertyChanged snippet (PropertyChangedEventHandler and RaisePropertyChanged method)

INotifyPropertyChanged Property snippet

Just download them into your "Visual Studio 2008CodeSnippetsVisual C#My CodeSnippets" folder and they should work. Just type "notify" and intellisense should show you "notifyo" (for NotifyObject) and "notifyp" (for NotifyProperty). Hit tab twice and the code should dump into your project.

This is definitely a "use at your own risk" project.

You see, there I was, minding my own business and trying to build some data to use with some XAML comps I was playing with and I was having some of the strangest things happen with my data. I had a DependecyProperty ObservableCollection in my ViewModel and I put a couple different views in my screen. (I was using an MVVM pattern, because that’s what all the kool kids are doing.)

Then, it suddenly seemed as if all my Views were sharing the same ObservableCollection, even though every other DependencyProperty they were bound to had unique values. So I did what I always do when I have problems like this… I ask Joe McBride.

It turns out I had gotten confused. I understood that DependencyProperties were good for the following:

• Providing callbacks when the property is changed
• Binding to stuff
• Animations

I figured that this is the kind of behavior I wanted from my data. I was wrong. As it turns out that is the kind of behavior I want out of the properties that I use in my WPF and Silverlight controls. It seems that DependencyProperties are meant to be used with controls and not for stand-alone data.

For stand-alone data, I should have used INotifyPropertyChanged, which is an interface for… well… notifying things when a property changes. I already had handy snippets for creating DependencyProperties (thanks to Robby Ingebretsen). So I tweaked his snippets so that they work for INotifyPropertyChanged properties.

Because it seems silly to implement the PropertyChangedEventHandler in every class that needs notify-able properties, I like to create a "NotifyObject" class:

class NotifyObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if(handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }       
}

Then, I can make my new class inherit from NotifyObject and away I go creating my bindable, notify-able data:

public class MyNotifyableData : NotifyObject
{
    public MyNotifyableData()
    {
    }

    #region MyProperty (INotifyPropertyChanged Property)
    private string _myProperty;

    public string MyProperty
    {
        get { return _myProperty; }
        set
        {
            _myProperty = value;
            RaisePropertyChanged("MyProperty");
        }
    }
    #endregion
}

This property was created using my snippet above. Hope it helps.

You can also download source code for this project here.

JSON/Silverlight/New York Times project files

Huge thanks to Josh Holmes, whose JSON/Silverlight tutorial was the base of much of this project.

This project is somewhat code-intensive (and kind of long, expect 30-60 minutes), so if you just want the utility provided here without any of the work, you can skip over to my post on displaying the results, which is strictly a Blend tutorial.

However, I recommend walking through this one since it will help get you to a point of pulling real data from an API, which I’ve found to be a wonderful help as I practice putting together data-based designs. One of the things I’ve been wanting to be able to do as a designer is to explore a data set easily and quickly so that I can have data to play with in my interfaces. I found exactly what I wanted in the New York Times API, but then I found out I had to learn JSON.

“Oh great,” I said to myself, “another technology for me to learn.” But it turned out that I didn’t actually have to learn that much, because Visual Studio does nearly all the work for me.

Super Quick Introduction to JSON

If you’re not interested and you want to get to the business of grabbing New York Times data, you can skip it . It is helpful, but not strictly necessary.

JSON stands for JavaScript Object Notation and is basically just a really handy way to pass data along in a web service. It is very simple… within a set of curly brackets, you will have name/value pairs separated by a colon with each piece of data.
Example:
{
    FirstName : “Matthias”,
    LastName : “Shapiro”,
    Blog : “Designer WPF”
}

This is a JSON object. Arrays are created by using square brackets and JSON obejcts can be placed into a Javascript var. These things are not really related in anyway, but putting them in the same sentence allows me to only write one more example instead of two

Example:
{
    FirstName: “Matthias”,
    LastName: “Shapiro”,
    Siblings : [
    {Name : “Abby”},
    {Name : “Joel”},
    {Name : “Anna”},
    {Name : “John”},
    {Name : “Nate”}
    ]
}

And there we have the basics of JSON.

End of Super Quick Introduction to JSON

What is so awesome about JSON and Silverlight is that Visual Studio 2008 has a set of JSON-friendly classes that make working with JSON a breeze. Which is really handy because the New York Times, which is a dream come true for the new data-gatherer, delivers JSON results. So let’s walk through making a call to the New York Times Article API, handling the data we get back, and putting it into a Listbox for viewing.

First, go to the New York Times Developer site, log in (or register) and get your API key.

Next, start a new Silverlight project in Visual Studio 2008. I named mine “JSONNewYorkTimesTutorial”.

Open your new project in Blend, pull up Page.xaml and add a TextBlock, ListBox, a TextBox and a Button. Name the ListBox “ResultsDisplay” and the TextBox “SearchText”.

Now, my Page.xaml looks like this.

OK… now let’s go to the code-behind for our project go to the event section of the button in Blend and type “PerformQuery” into the “Click” event.

This will automatically insert the necessary code into the code-behind, so pull up Visual Studio. Before we implement a call to the NYT API, lets add some useful stuff. If you have not yet gone to get your Developer key, do so now.

private string myApiKey;
private WebClient callNYT;

public Page()
{
    InitializeComponent();
    myApiKey = “&api-key=(put your api key here. No, you may not have mine)”;
    callNYT = new WebClient();
    callNYT.OpenReadCompleted += new OpenReadCompletedEventHandler(callNYT_OpenReadCompleted);
}

In the code above, we’ve created a string that we can use to apply our unique NYT API key and we’ve created an instance of WebClient to call and receive information from the NYT API. When an object from the NYT API has been received , it will call the OpenReadCompleted event, which will be handled by our callNYT_OpenReadCompleted method.

(By the way, if you’re not getting the proper intellisense for the “Web Client” part, add “using System.Net;” to the top of your file.)

Now on to our button method. There are tons of things we can add to our query to find the exact information we want. But in the interest of simplicity, this post will deal only with a simple text search. To that end, let’s go to our PerformQuery method and turn it into this:

private void PerformQuery(object sender, RoutedEventArgs e)
{
    string NYTQueryBase = “http://api.nytimes.com/svc/search/v1/article”;
    string SearchTerm = “?query=”+ SearchText.Text;
    Uri queryUri = new Uri(NYTQueryBase + SearchTerm + myApiKey);

    callNYT.OpenReadAsync(queryUri);
}

We’ve done two things here. The first is that we built our search query using the query base, the query string and our API key. That was simple enough.

Next, we’ve going to use the WebClient we created to call our new query. When the query has been completed, our program will run the callNYT_OpenReadCompleted method with its result, which will be a JSON object constructed by the NYT servers. We will get back a JSON object with the following:

• offset – We will get 10 results per page. The offset tells us which page of the results we’re on. The default is 0, which gives us results 0 – 9.
• tokens – this is a array of our search terms.
• total – this is an integer indicating of how many results there were for our search.
• results – this is an array of results with the following format
  • body – a portion of the beginning of the article
  • byline – the article byline, usually including the author name
  • date – the date the article appeared, in a “yyyymmdd” format. For example, today would be “20090225”.
  • title – the article title
  • url – a url link to the article

A quick note: The NYT API is extremely flexible and we can actually define how we want our results to come back. This is just the default result format for the purposes of demonstration.

Before we handle this object, we want to create a class for the results. Right click on your project and go to “Add –> Class…”. Name your new class “NYTResult.cs” and make sure it looks like this:

public class NYTResult {
    public string Body { get; set; }
    public string Byline { get; set; }
    public DateTime Date { get; set; }
    public string Title { get; set; }
    public Uri Url { get; set; }
}

I added the following method to the class to handle the date conversion from the NYT format to a .NET DateTime object.

public DateTime formattedDateTime(string NYT_Time)
{
     int year = Convert.ToInt32(NYT_Time.Substring(0, 4));
    int month = Convert.ToInt32(NYT_Time.Substring(4, 2));
    int day = Convert.ToInt32(NYT_Time.Substring(6, 2));
    DateTime finalDateTime = new DateTime(year, month, day);
    return finalDateTime;
}

OK… now we’re really ready to handle the JSON object. Right click on the references in your project and select “Add Reference…”

In  your “Add References” box, select “System.Json” and click “OK”.

Add “using System.Json;” to the references in your Page.xaml.cs file. And, just for good measure, add “using System.Collections.ObjectModel;” as well.

Go to the callNYT_OpenReadCompleted method and enter the following. I’ve tried to comment the code so that I don’t need to further explain it. Side note: I’m not always the best at understanding what is self-explanatory and what I need to elaborate on. If there are any additional questions, post them in the comments and I’ll answer as quickly as I can.

void callNYT_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    //grab our result and make a JSON Object out of it
     //    then extract the results array from that object
     JsonObject completeResult = (JsonObject)JsonObject.Load(e.Result);
    JsonArray resultsArray = (JsonArray)completeResult["results"];

    //an observable collection to hold the data and attach it to our ListBox

     ObservableCollection<NYTResult> resultCollection = new ObservableCollection<NYTResult>();

    //iterate through the results and transfer the data from a
     //   JSON object into our nice pretty .NET object
     foreach (JsonObject NYTRawResult in resultsArray)
    {
        NYTResult singleResult = new NYTResult();

        //don’t forget to check your results… an article might not have a
         //  byline or a link
         if (NYTRawResult.Keys.Contains(“body”))
            singleResult.Body = NYTRawResult["body"];
        if(NYTRawResult.Keys.Contains(“byline”))
            singleResult.Byline = NYTRawResult["byline"];
        if (NYTRawResult.Keys.Contains(“date”))
            singleResult.Date = singleResult.formattedDateTime(NYTRawResult["date"]);
        if (NYTRawResult.Keys.Contains(“title”))
            singleResult.Title = NYTRawResult["title"];
        if (NYTRawResult.Keys.Contains(“url”))
            singleResult.Url = new Uri(NYTRawResult["url"]);

        //add our new result to the collection
         resultCollection.Add(singleResult);
    }

    //assign the result as the source for our ListBox
     ResultsDisplay.ItemsSource = resultCollection;

    //take the overall article count and display it
     resultCount.Text = “Number of articles: ” + completeResult["total"].ToString();
}

Now, we can run our project. Type something into the TextBox and hit the button and we get this:

Not exactly the most readable thing ever. So let’s add the following to the ListBox XAML:

DisplayMemberPath=”Title”

Now we get something a little more like this (go ahead and give it a whirl):

Much better. Remember, this is a simple query, so it’s only looking for items that have that word in the article… it might not be in the title.

My next post builds on this one and I walk through building a more useful display for our results. It will be far less code intensive and far more designer centric.

I’ve made the source available for this project. I’ve taken out my NYT API key, so it will not run unless you get your own and put it in.

JSON – Silverlight – New York Times Tutorial Part 1 project files

I was trying to create a transition between two screens for a project I’m working on. I created the two ContentControls in my XAML like so:

<ContentControl x:Name=”OldContent”>
      <!– My Old Content –>
</ContentControl>
<ContentControl x:Name=”NewContent” Opacity=”0″>
      <!– My New Content –>
</ContentControl>

Let’s say for the sake of this post that I was trying to animate the top content as a fade in and then, after the animation is done,  put the top content into the bottom content so that I could fill the NewContent with something else and have it ready for the next transition.

So… I’m using the following animation.

<Storyboard x:Name=”TransitionContent”>
   <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″
         Storyboard.TargetName=”NewContent”
         Storyboard.TargetProperty=”Opacity”>
                <SplineDoubleKeyFrame KeyTime=”00:00:00.03″ Value=”1″ />
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

(No Blend stuff today because I’m going a mile a minute for the sake of my looming project deadline.)

I add a “Completed” event handler to my Storyboard so that I can swap the content when the animation is over.

<Storyboard x:Name=”TransitionContent” Completed=”TransitionContent_Completed”>

In the C# code behind, I first wrote my content swapping like this:

this.OldContent.Content = this.NewContent.Content;
this.NewContent.Content = null;

And I got the following exception:

“System.ArgumentException was unhandled by user code
      Value does not fall within the expected range.”

I’m putting this in because it took me quite some time to figure out what the problem was. Simply put… Silverlight was yelling at me because I was trying to put the same stuff in the visual tree twice. This would have meant two copies of anything with a x:Name attribute… which would have been made it really hard for me to find anything. So it threw an exception.

Ultimately, I had to create an object to store the value of the NewContent  and then trash the NewContent.Content before I could put it into the OldContent.Content. I’ve re-written the code in such a way that if you wanted to swap the two contents, it will do just that.

private void Storyboard2_Completed(object sender, EventArgs e)       
{
            object oldStuff = this.OldContent.Content as object;
            object newStuff = this.NewContent.Content as object;

            this.OldContent.Content = null;
            this.NewContent.Content = null;

            this.OldContent.Content = newStuff;
            this.NewContent.Content = oldStuff;

            this.NewContent.Opacity = 0;
}

That last little bit is to reset the NewContent so that it is ready for the next transition.

And that’s all there is to it.

One of the things we had to do was swap out ControlTemplates so that we could display a caret to indicate ascending or descending lists. We ended up deciding on ControlTemplates over DataTemplates because the DataTemplates would only work for ListViews that had no custom DataTemplates for the headers. We’re doing all sorts of crazy stuff with our headers and we need to preserve our DataTemplates, so this wasn’t an option.

In any case, I was having no luck finding the resource when I named it this way:

<ControlTemplate x:Key="MyCustomControlTemplate" TargetType="{x:Type GridViewColumnHeader}">

I was using the following code to try and find the resource.

ControlTemplate myNewTemplate = (ControlTemplate)Resources["MyCustomTemplate"];

However, we were able to solve the problem by naming the resource this way

<ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:MyCustomListView}, ResourceId=MyCustomControlTemplate}"
         TargetType="{x:Type GridViewColumnHeader}">

And then using this code to access it.

ComponentResourceKey myCustomTemplateKey = new ComponentResourceKey(typeof(SortableListView), "MyCustomControlTemplate");
ControlTemplate myNewTemplate = (ControlTemplate)this.TryFindResource(myCustomTemplateKey);

Just thought I’d pass it along.

At least I look like that at 1:30 AM.

OK, so I felt the need to pipe up at this ungodly hour with a public service announcement about events and databinding. I just spent a good hour trying to figure out a workaround for this problem. I had a method being called on my “IsVisibleChanged” event. I was planning on take that item and performing some code-behind logic based on the databound Canvas.Left and Canvas.Top properties.

WPF put the smack-down on that action. The data binding wouldn’t update before the event was called. And I couldn’t make it. Not without some kind of Invoke… which, I must admit, scares the ever-loving crap out of me, so I didn’t try… also because I didn’t know how to use it.

My advice if your databinding won’t update? Find some way of going to the data itself. If you’re binding to something in the XAML, you should be able to find the object you’re binding to in the code as well. Just go straight to the source.

Anyone have a better idea or suggestion? I’m totally open to hearing it.

 Instead, use my new WPF/Wii library. It uses the WPF INotifyPropertyChanged interface to act as an interface so that we can bind the Wiimote data directly to the XAML. More on that in a little bit, but first…

In this post, we’ll walk through creating a basic multi-point capable app that uses the Wiimote as an input device. What is really unique about this post is the fact that we’re going to do this in a way that requires absolutely no code whatsoever on your part.

That’s right. No code. At all. Zero knowledge of C# required.

First, download the “WPF_Wii_Binding_Library” and the “WiimoteLib” dlls, unzip them and put them in the same folder (somewhere you can find them).

Open up Blend or Visual Studio 2008 and start a new application. (Visual Studio 2008 is reccomended for this tutorial.)

Now, head right on over to your “Project” tab or “Solution Explorer” and right click on the “References” folder and click “Add Reference”.

Blend

VS 2008

Browse for the reference “WPF_Wii_Binding_Library” (the one you just downloaded) and click “Open”.

In your main composition, add a “Canvas”.

<Canvas>
</Canvas>

Draw three ellipses and give them three different colors.

Define the following XML namespace Window:

<Window …
 xmlns:Wii=”clr-namespace:WPF_Wii_Binding_Library;assembly=WPF_Wii_Binding_Library“>

In your Resources, add the following resources (you can just copy this code if you want):

<Wii:WPFWii x:Key=”WiiData” IsMultiPointMode=”True“  />
<BooleanToVisibilityConverter x:Key=”boolToVis” />

Note: If you’re using anything less than Blend 2 December Preview, I can make no guarantees that this solution won’t throw a fit. Even with the B2DP, it is still having issues. The best way to do this is really through Visual Studio 2008. But if you don’t mind just typing all your XAML, Blend will still compile fine.

Find your first Ellipse in the XAML. Add the following Visibility property:

Visibility=”{Binding Source={StaticResource WiiData}, Path=IR1Found, Converter={StaticResource boolToVis}}”

What this is doing is connecting to the Wiimote and checking to see if it can see your first infrared LED. I suggest using the sensor bar that comes with the Wii for the time being.  If it can see the LED, your ellipse will be visible. If it can’t, it won’t.

It is now time for us to make the magic. Replace whatever “Canvas.Left” and “Canvas.Top” properties so that your Ellipse looks like the following:

<Ellipse Width=”30″
      Height=”30″
      Fill=”#FF0045FF”
      Stroke=”#FF000000″
      Visibility=”{Binding Source={StaticResource WiiData}, Path=IR1Found, Converter={StaticResource boolToVis}}”
      Canvas.Left=”{Binding Source={StaticResource WiiData}, Path=IR1Position.X, Mode=OneWay}”
      Canvas.Top=”{Binding Source={StaticResource WiiData}, Path=IR1Position.Y, Mode=OneWay}” />

We’re binding that ellipse to the X,Y position the Wiimote has tracked the first infrared LED. Let’s do the same with our second infrared LED and the midpoint between the two LEDs.

LED number 2:

Visibility=”{Binding Source={StaticResource WiiData}, Path=IR2Found, Converter={StaticResource boolToVis}}”
Canvas.Left=”{Binding Source={StaticResource WiiData}, Path=IR2Position.X, Mode=OneWay}”
Canvas.Top=”{Binding Source={StaticResource WiiData}, Path=IR2Position.Y, Mode=OneWay}”

Mid point:

Visibility=”{Binding Source={StaticResource WiiData}, Path=MidPointFound, Converter={StaticResource boolToVis}}”
Canvas.Left=”{Binding Source={StaticResource WiiData}, Path=MidPointPosition.X, Mode=OneWay}”
Canvas.Top=”{Binding Source={StaticResource WiiData}, Path=MidPointPosition.Y, Mode=OneWay}”

Guess what?

You’re done. That’s all you need.  Just make sure your Wiimote is connected to your computer and you’re ready to rock and roll. (Need help with that part? Check here.)

You’ve just created a Wiimote application with 0 (zero) lines of custom code and (depending on your formatting) less than 20 lines of XAML markup.

The next tutorial may take a week or more to make since I need to wait for my infrared lights and circuits to come in in order to build an infrared array. (Don’t worry, I’ll be posting a tutorial on how to build that infrared array. That tutorial will assume that you have never touched a circuit in your life.)

This is a bit of an advanced tutorial. I’m putting it up because I just figured out how to do it and I want to share. You can also download the project files for this tutorial (in zip format… requires .Net 3.5).

Recently, I received from my user experience designers a wireframe that looked something like this:

As you can see, there are embedded categories (categories within categories) here. I considered many solutions (hacks), but I found that a deeper understanding of the ListView and how it works would allow me to resolve this issue very simply (and without even touching the code behind).

<Exposition>

So… within every ListView, there is a Gridview that holds a set of GridViewColumns. What I didn’t realize until a couple days ago was that when you put the GridViewColumns into the GridView, you’re implicitly handing the GridView a GridViewColumnCollection.This collection is then referenced by the GridViewHeaderRowPresenter (located deep inside the ListView Template) and the GridViewRowPresenter, which is located inside the ListViewItem template (which I usually get to through the ItemContainerStyle… see here for more details).

Anyway, these two presenters databind back up to the GridView to grab the GridViewColumns that we’ve defined.

Once I understood that, I realized that I could create a GridViewColumnCollection as a resource and the reference it inside some custom templates.

At this point, I get the feeling that some readers are just hearing “blah blah blah”. It’s actually easier to demonstrate than it is to explain. So let’s get to it.

</Exposition>

We’re going to grab the header image from the New York Times RSS feed and display it in its own column while displaying all the accompanying header data under a broad Images header with sub-columns called Title, URL, and Link. It will look like this:

Resources

First, lets deal with all the resources we need. Take note that this part will be pretty XAML heavy.

Create a resources section. If mine isn’t in a separate resource dictionary, I usually just create it at the top of the window as seen below.

<Window.Resources>
</Window.Resources>

All your resources stuff will go in between those two tags. 

Create a GridViewColumnCollection in the resources:

<GridViewColumnCollection x:Key=”ImageColumnCollection“>
      <GridViewColumn Header=”Title” />
      <GridViewColumn Header=”URL” />
      <GridViewColumn Header=”Link” />
</GridViewColumnCollection>

Now, go through the motions to getting your RSS feed. Follow the steps I lay out in my post on getting the New York Times RSS feeds, except that, instead of clicking on the item(Array), click on the image section. Continue on with the “Create Data Template” option to get your RSS bindings automated.

Grab the bindings in this template and put them into the DisplayMemberBinding property in the GridViewColumns. Your GridViewColumnCollection should now look like this:

<GridViewColumnCollection x:Key=”ImageColumnCollection“>
      <GridViewColumn Header=”Title”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=title}“  />
      <GridViewColumn Header=”URL”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=url}“   />
      <GridViewColumn Header=”Link”
            DisplayMemberBinding=”{Binding Mode=OneWay, XPath=link}“   />
</GridViewColumnCollection>

Now that we have our GridViewColumnCollection in place, let’s create some stuff that will actually use it.

Create a new empty Data Template. If you’re still uncomfortable digging into the XAML itself, you can just type the following in:

<DataTemplate x:Key=”MultiColumnHeaderTemplate“>
</DataTemplate>

And then go to your resources tab and double click on it to make it accessible in the design mode.

The way I set this up was very simple. I put in a grid with two rows set to auto, put a TextBlock in the top one and a GridViewHeaderRowPresenter into the other one. The TextBlock at the top is bound to the Header Content with a simple binding:

Text=”{Binding}”

The real trick is that the GridViewHeaderRowPresenter is bound to our Columns resource by simply entering the following property:

Columns=”{DynamicResource ImageColumnCollection}”

Now, each column in that collection will send its header information to be handled by this particular GridViewHeaderRowPresenter.

Our final header data template looks something like this:

<DataTemplate x:Key=”MultiColumnHeaderTemplate“>
      <Grid>
            <Grid.RowDefinitions>
                  <RowDefinition Height=”Auto” />
                  <RowDefinition Height=”Auto” />
            </Grid.RowDefinitions>
            <TextBlock Text=”{Binding}”
                  HorizontalAlignment=”Center“/>
            <GridViewHeaderRowPresenter Grid.Row=”1”
                  HorizontalAlignment=”Stretch”
                  Columns=”{DynamicResource ImageColumnCollection}” />                                       
      </Grid>
</DataTemplate>

That takes care of our headers… what about our item data? How do I get this data to fit into the proper columns? This was a problem I struggled with for quite some time until a friend of mine pointed out that the GridViewRowPresenter in the ItemTemplate could be extracted and used where ever I wanted to use it. Resultingly, I could place it into the CellTemplate of my Image Information column to compliment the placement of the GridViewHeaderRowPresenter in the Header of that same column.

If you’re following along and trying hard to learn, create a new DataTemplate and just toss a GridViewRowPresenter into it, binding it to the same column collection. Or you can just copy and paste the XAML below. Your choice.

<DataTemplate x:Key=”MultiColumnCellTemplate“>
      <Grid>
            <GridViewRowPresenter HorizontalAlignment=”Stretch”
                  Columns=”{DynamicResource ImageColumnCollection}” />                                       
      </Grid>
</DataTemplate> 

This will be the basis of our embedded column design. We’re almost there, let’s just tie up some resources loose ends.

In order to get the image to show up in the “Image” column, we need to create a handy little DataTemplate to display that image. Simply have an image in the Data Template and have the Source property point to the url binding for the image like so:

<DataTemplate x:Key=”ImageTemplate“>
      <Image Source=”{Binding Mode=OneWay, XPath=url}” />                                       
</DataTemplate> 

OK… we are now ready to actually do something outside of our resources. Don’t worry, this will be fast.

Main XAML Composition

If you haven’t already drawn a ListView in your main window, do so now.  Right click on the ListView and  go to Bind ItemSource to Data…

In the resulting pop-up choose your RSS Feed (mine is called NYTTech) and select the image option from it.  (If you haven’t added the RSS feed, just copy and paste the line below to the top of your resources.)

<XmlDataProvider x:Key=”NYTTech”
      d:IsDataSource=”True”
      Source=”http://www.nytimes.com/services/xml/rss/nyt/Technology.xml” />

Now, in the interest of time, we’re going to go right into the XAML. If you’re interested in seeing how to do this using Blend only, check this post out. Trust me, it’s not worth it.

Because we’ve already constructed most of what we need in the resources, we only need to do a couple things here. First, create two GridViewColumns, one with

Header=”Image“ 

and another with

Header=”Image Information”

In the Image column, set

CellTemplate=”{StaticResource ImageTemplate}”

In the Image Information column (which is our column with embedded columns), we just need to point to our already constructed templates like so:

<GridViewColumnHeader Header=”Image Information“ 
      HeaderTemplate=”{StaticResource MultiColumnHeaderTemplate}“ 
      CellTemplate=”{StaticResource MultiColumnCellTemplate}” >

Go ahead and run the project and you’ll see that we have one tiny little problem left.

Because the default content alignment of the header style is to center everything, all of our columns are misaligned. To solve this problem, copy the following style into your resources:

<Style x:Key=”StretchHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
      <Setter Property=”HorizontalContentAlignment” Value=”Stretch“/>
</Style>

And point to it in your ListView GridView with a :

ColumnHeaderContainerStyle=”{StaticResource StretchHeaderStyle}”

At the end, your ListView should look like this:

<ListView IsSynchonizedWithCurrentItem=”True“>
      <ListView.View>
            <GridView ColumnHeaderContainerStyle=”{StaticResource StretchHeaderStyle}” >
                  <GridViewColumn Header=”Image“
                        CellTemplate=”{StaticResource ImageTemplate}” >
                   <GridViewColumn Header=”Image Information“ 
                        HeaderTemplate=”{StaticResource MultiColumnHeaderTemplate}”
                        CellTemplate=”{StaticResource MultiColumnCellTemplate}” > 
            </GridView>
      <ListView.View>
</ListView>

And if you hate writing XAML, you notice with a grateful heart that I’ve posted every bit of XAML you need right here. Additionally (and this is a first for this site), because of the complexity of this post, I’m offering this project as a downloadable zip file so you can tweak it or futz with it at your convenience.

Embedded Columns Project Files (in zip format… requires .Net 3.5)