Designer WPF

Download WPF Wii Data Visualizer (App only, 355K)
Download WPF Wii Data Visualizer (Visual Studio 2008 Source, 676K)

Warning: The project will not run if your Wii controller isn’t connected to your computer.

Using the WPF Wii Data Visualizer (Video)

OK, now that we’ve gotten our Wii Controllers all hooked up to our computers, it’s time to take a look at the data we’re getting from it.

Over the weekend, I pieced together a little application that will help us visualize the incoming Wiimote data in a way that would help understand the raw data points a little better as well as help out as we head toward our ultimate goal of multi-point WPF application development. This is what I came up with.

Disclaimer: The source code at this point is a mess. While the interface is all done in XAML and is very WPF, the code-behind is a hacked together mish-mash. I will at some point go back and restructure the code-behind to take advantage of the INotifyPropertyChanged interface. When I do that, I’ll post on it and we’ll see another example of why WPF is so freaking cool.

Please Read: Strangely, when you do a Google search for “wpf” and “listview”, this is one of the top links. This is odd because this particular post is kind of an advanced tutorial. If you’re looking for more general information on styling the wpf listview, check out this post. It is probably much closer to what you’re looking for.

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). Continue reading ‘Embedded ListView Columns (Columns Within Columns)’ »

Last time I was at Microsoft, I spoke briefly (for about 2 hours) with Rick Barraza about the need to get designers into the WPF space and how des/devs (designer developers) can really push forward a technology like WPF. In fact, it was Rick who inspired me to do more work on this blog as a way of trying to help designers get more comfortable with WPF.

 Now Rick has a post on his brilliant multi-touch WPF interface using a Wiimote.

Rick, if you’re reading this… how the heck do you have the time to do stuff like that?!? I’m envious… really, really envious.

Excellent work.

I had a question from a reader in an earlier post on how to resize the ListView Gripper (seen below) so I wanted to address that in this quick post.

 Styling the gripper is actually pretty easy. First, take a look at my Styling the ListView Column Header post. Follow that along until you get to the template for the ColumnHeader (by the fifth image down).

You should have something that looks like this:

Now we’re going to ignore everything here except that little part at the bottom the “PART_HeaderGripper”

Continue reading ‘How do I style the ListView column gripper (also known as a “splitter” or a “seperator”)’ »

ListView header Styling is one of the most difficult styling pieces I’ve had to deal with. Part of this is because it is just another part of the seemingly endlessly complex listview. The other part is just because of the way the styling for the listview is put together in WPF.

In this post, we’re going to change the default color of the header (background and foreground) and make the headers look more like bubbles. Why? Because we can! (Everytime I say that, somewhere a usability expert loses a little bit of their soul.)

Take note that anything done in this will affect the whole header. If you’re looking to do something to one individual column in the header, you need to go to this post on ColumnHeaders (coming soon). See the bottom of this post for more details.

As a point of note, the easy way in this particular case involves going directly into the XAML and the hard way involves going through the steps in Blend. The easy way is posted at the bottom.

Now for the hard way. First, go to your listview, right click on it and go to:

Edit Control Parts (Template) -> Edit a Copy…

Continue reading ‘Styling the ListView Column Header’ »

So… you’ve got your listview and you want your items to look a certain way. In this post, we’ll look at changing as many things as we can inside the ListView ItemContainerStyle.

 First things first… getting to the ItemContainerStyle using Blend. With the ListView selected, go to the top menu and click:

 Edit Other Styles -> Edit ItemContainerStyle -> Create Empty…

Name your Style and you get tossed into Style editing. Here, you can do all sorts of great things, like… um… changing the background or something.

Continue reading ‘Styling ListView Items Using Blend’ »

I apologize for my absence. Between the Christmas holiday and the wedding planning, I’ve been remiss on continuing work on this blog. In fact, it was only today that I noticed I had new comments.

 I’ll be getting to the questions in the comments in the coming week, but for right now, I want to throw up a post on good WPF/C# books that I’ve used. They are listed in the order that I would reccomend you purchase them.

Windows Presentation Foundation Unleashed (SAMS)
Adam Nathan

What it is: This is the classic… the one that everyone is using. It walks through the big WPF topics easily and in a clear manner. I constantly refer back to it for the basics on dependancy properties, routed events and custom controls. It has some great examples and flows well between the XAML and the C#

What it is not: It is not a guide to the controls. Nathan covers some of the basic controls quickly, but without the depth I find that I need in order to do my design work. This is a great book if you’re just dipping your foot into the coding side of WPF and fitting that into your Designs.

Programming WPF (O’Reilly)
Chris Sells and Ian Griffiths

What it is: I gotta admit, I went out on a limb with this because the first edition of this was note very good at all. However, they really got things together with the second edition. This is a little more in depth stuff on WPF, better on the data binding than WPF Unleashed (including a whole chapter on data binding to lists). It also has a little more detail on the controls that the above.

What it is not: This is not the greatest starter book for WPF. It’s better as a reference and for learning new things once you have the basics down. Also, while it goes into a little more detail on the controls, it still doesn’t really dig into them in the way that I wish it would.

Applications = Code + Markup: A Guide to the Microsoft Windows Presentation Foundation
Charles Petzold

What it is: One of the better earlier books on WPF and probably my favorite code-heavy one. I used it as my reference before the O’Reilly book came out. It has some really good in-depth C# examples throughout the book and hits some of the code-behind topics well.

What it is not: If you’re a designer and would like to stay away from the code-behind, this is not the book for you. Very few XAML examples and can be tough to slog through.

 Alright, I’ll be hitting the listview headers the rest of this week and the listview items in the coming week, so stay tuned.

I’ll get back to my listview posts soon, but I really wanted to share this:

Here’s something from the guys at Cynergy in which they’ve combined WPF with a Wii-mote hack to implement an on-the-cheap multipoint interface.

Pretty cool.

UPDATE: The makers of Snoop have made an installer that makes this post obsolete. Go get it… it’s well updated and worth it.

Download the super-simple Snoop files. (Just extract and run.)

Snoop is a great tool for debugging WPF applications.

It allows one to see the entire tree of the project that one is working on. For me, this meant that I can find out quickly and easily if the object I’m trying to target with a particular style or template is acutally implementing that style or template. I can check the properties of the items I thought I changed only to discover that nothing is changing. In a recent project, when I was flabergasted as to why my design wasn’t showing up, Snoop helped me determine that it was an error in the code implementation, which is translated roughly into “not my fault”.

 Unfortunately, when I first realized I needed it, it took me a while to figure out how to get it to run.

 ”a while” in this instance means 3-4 hours and one hour worth of IM with a developer friend.

The problem that I had was that actually running Snoop isn’t a very designer friendly process. You have to download the source code, convert the file formats, change the read-only settings, and a number of other things before you can get it to work. So I decided to give anyone who isn’t interested in that process a shortcut to debugging their WPF applications.

Just download this and run the snoop.exe file. No Visual Studio nonsense required. Check this link for more information on using Snoop.

So the items in your ListView column look like this:

And you want them to look like this:

If you’re trying to center something within a ListView column, it’s actually pretty simple.

Continue reading ‘How Do I Center Something In My ListView Column?’ »