Making a simple UITableView-like list in Windows 8.1

  • Article

In my current project, I wanted to create a simple, UITableView-like scrolling list on the side of the screen, accompanying at larger panel used to display information. This is a very common "split view" in iPad apps, and if I was writing an iPad app (haha) I would use a UITableView to create and display the list. Here's the look I'm going for:

This time of course, I'm working in Windows 8.1 using C# and XAML, and I want to use the ListBox control. The ListBox is one of several XAML controls for displaying and selecting things - the ListView control is another. I find ListBox  provides just the right degree functionality for use as a navigation aid in a design like mine. Unfortunately, it can be a little tricky to set it up just right, so here's a quick guide to how I managed it.

Default ListBox Behavior

When you drag a ListBox into your XAML project, it seems like it's ready-to-go, but depending on your design requirements, it might have some shortcomings. I was looking to create a ListView which was black with white text. I found that the view would change color from black to white depending on whether it had focus, and that the colors I set were being ignored and changed depending on the controls (in this case TextBlock controls) which were being added and displayed.

Here's what I mean. First, let's add the default ListBox control to the XAML page:

I'm not a fan of this grey, so I change the Background to Black, and Foreground to White, like this:

 

When I run this, the ListBox alternates between two appearances depending on whether it is active or not. This is not the effect I was looking for..

 

 

To prevent this from happening, we need to tweak the ControlTemplate. First, let's define a new template in a new Resources section in our XAML page, like this:

 

And then, we reference that template from our ListBox, like this:

 

This now means that our ListBox will not change color as we click on it, or other objects on the page. Hurrah!

Yes, but..

There are few caveats. Our simplification of the template also manages to remove the ability of the ListBox to scroll (which is kinda important), and so we wrap it inside a ScrollViewer control, like this:

For best results, I urge you to set up your Grid view using the Grid.Row / Grid.Column markup, and place your ListBox in a cell which has a height set to "*" rather than "Auto". This produces the most reliable layout, in my experience. s

Some helpful blogs:

Good luck!