• I don’t have to upload my images file-by-file… I just use OneNote to screen grab and then copy and paste from OneNote into Live Writer and Live Writer just uploads everything to my site. My posts are pretty image heavy, so I probably saved about 30 minutes of time with this feature alone.
• The Paste from Visual Studio plug-in lets me… well… paste from Visual Studio and maintain the colors and formatting. You’ll probably see more code integrated into my posts, since I hate putting in code that isn’t color coordinated. Time saved: about 15 minutes
• I don’t lose my posts to some web or Javascript weirdness. The posts I put up take, on average, 2 hours to create. Losing my work is devastating.
• Super simple interface. I don’t know what team at Microsoft was working on this, but I wouldn’t be surprised if they took their cues from the OneNote team. Huge Interaction Designer props for harnessing the power of simplicity and elegance. I never have to ask myself how to do something… it is transparent. Now, maybe I’m not trying to do enough complex stuff, but I’m ok with that. Way to design 90% of the audience rather than agonize over that last 10%.

Go get it.

Microsoft documentation on using the WPF Performance Suite.

As a designer, I’ve found the Perforator a particularly useful tool in the suite.

Perforator is a performance profiling tool for analyzing rendering behavior. The Perforator main window displays a set of options that allow you to analyze very specific rendering behavior in parts of your application.

Key for me in this suite is the “Frame rate” counter in this application. As you probably know, the human eye is pretty comfortable with 30-60 frames per second (for computer applications). Because WPF allows the simple creation of animations to aid usability and design, smooth frame rates have become important to me.

 If they’re important to you, I highly reccomend the above suite.

Get it. Use it. Love it.

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…

You’ll be given the basic template of your listview. Right-click on the scrollviewer and go to:

Edit Control Parts (Template) -> Edit Template

You’ll be given the default scrollViewer template for the specialized scrollViewer used in the ListView. In addition to the normal scrollviewer parts, it has a control that acts as the holder for the header called the “GridViewHeaderRowPresenter”. 

Highlight the GridViewHeaderRowPresenter (which I am renaming “steve” so I don’t have to write that anymore) and, in the menu, go to:

Object -> Edit Other Styles -> Edit ColumnHeaderContainerStyle -> Edit a Copy…

This is where we are going to want to change the foreground and background.

Go over to the Properties panel to the right and click on foreground, giving it a solid color brush (I’m going to use a dark blue). Do the same thing with the background (light blue)and the BorderBrush (blue gradient) (you’ll see why in a moment).

Now my style looks like this in the XAML:

<Style x:Key=”CustomHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
      <Setter Property=”Background” Value=”#FFCDE7F4” />
      <Setter Property=”Foreground” Value=”#FF07034B“/>
      <Setter Property=”BorderBrush“>
            <Setter.Value>
                  <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0“>
                        <GradientStop Color=”#FFA1CCE0” Offset=”0“/>
                        <GradientStop Color=”#FFABD5EA” Offset=”1.0“/>
                  </LinearGradientBrush>
            </Setter.Value>
         </Setter>
   <Setter Property=”Template“>
      …
</Style>

 and my column headers look like this in the composition (zoomed in to 200%):

But wait… there’s more. Right click on your ColumnHeaderContainerStyle in the Objects and Timeline panel and select:

Edit Control Parts (Template) -> Edit Template…

Finally, we are in the real guts of the header template, which means we have all the bits and pieces to make it work.

Note: I’ve recently had a comment on how to style the header gripper (the part of the column header that allows you to resize the column), but this post is already getting way too long, so I deal with it in this post over here (coming soon).

OK, so now we can really get at the look of this sucker. If you’re using Vista, you probably have some Borders with names like “UpperHighlight”, “HeaderHoverBorder”, and “HeaderPressBorder”. These are borders that alter the look of the headers when certain triggers are active. We’ll be ignoring them for the sake of simplicity.

(At this point, my readers are saying to themselves, “Simplicity? SIMPLICITY? At what juncture in this entire post have we even approached simplicity.” To which I reply “Hey, don’t kill the messenger.”)

So go to the highest border (in my case, it’s called the “HeaderBorder”) and do the following:

• BorderThickness=”1,1,1,1“
• CornerRadius= “6,6,6,6“
• Margin=”2,0,2,0“

The header now looks like this:

This is the hard way because it uses Blend exclusively without touching the XAML.

The Easy Way

The easy way is also the better way from a XAML perspective. Simply create a  create a Style like so:

 <Style x:Key=”CustomHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
</Style>

and add it to your ListView like this:

<ListView>
      <ListView.View>
            <GridView ColumnHeaderContainerStyle=”{DynamicResource CustomHeaderStyle}“>
            ….

Access it though your resources tab to get to the visual designer interface for your new style:

Once you’ve done this, you can skip directly to the part of the tutorial where you start changing the foreground and background.

Hopefully, at this point you feel like you have a pretty decent handle on the basics of styling your header section. Because it’s getting really late and I’m getting really tired.

But before I go, let’s get one thing absolutely clear: When it comes to ListView headers, you can technically do most of this in the data template, but if you do, you’ll make baby Jesus cry.

Here is why. By doing things as we have done them above, we get the following:

If we do all this work in the data template, we instead get this:

Which brings about the aforementioned consequences. You’ve been warned.

Questions about column headers:

• How do I wrap text in a header?
• How do I make headers sort columns (and how do I style for that)? (coming soon)
• How do I make one header look different than the other headers? (coming soon)

As a general rule, I’m more inclined toward the hard client at the moment, but that has been in a large part because:

• I’m getting paid to do WPF stuff.
• I’m not a coding guru which makes alot of the more intense web development stuff somewhat outside my reach.
• Its easier to do fun and cool stuff with WPF than with Silverlight. Or Flash. Or Javascript.
• I’m getting paid to do WPF stuff.

Even so, it should be a fun time. Especially if the MIX promotional material (seen below) is to be believed.

I am under the impression that the women in the rightmost image are the kind of cutting edge web developers I will be schmoozing with at MIX08.

Please, leave me to my ignorance.