Styling A ListView Column Using Blend

So you’ve got a listview and you want the columns (not the rows) to look a certain way. (If you are in any way confused, head over here.)

In this post, we’re going to build a template for a column and style that template so the data in that column is all styled the same way, but different from the data in the rest of the list view. Kind of like this:

CellTemplate Example

If you’re following from the RSS Feed post: go to the listview in the main composition and right click on your listivew and go to “Edit Other Templates -> Edit Generated Item (ItemTemplate) -> Edit a Copy…”

Not following from the RSS Feed post: go to the listview in your composition, right click on your listview and co to “Edit Other Templates -> Edit Generated Item (ItemTempalte) -> Create Empty…”

Edit Item Template 2

 Name it whatever you like (I named mine “TitleTemplate”) and hit OK.

RSS: If you had a template Blend will create a copy of your original source template with all the bindings in place. Get rid of all the bindings you don’t want. I think the easiest way is to simply go into the XAML and do this. Right click on any item and click the “View XAML” and delete any binding that doesn’t have “title” in it. When we’re done, your XAML should look like this:

<DataTemplate x:Key=”TitleTemplate>
            <TextBlock Text=”{Binding Mode=OneWay, XPath=title} />

Not RSS: Blend will create the basic DataTemplate markup for you and toss you into a DataTemplate editing mode.

From here, you can draw a Grid directly into the composition and a TextBlock directly into the Grid. Reset the Width and Height of the Grid and TextBlock to Auto and reset the Margins to “0,0,0,0”. Assign the TextBlock the proper Bindings in order to get it to show the proper data. Your XAML should look something like this.

<DataTemplate x:Key=”TitleTemplate>
TextBlock Text=”{Binding MySpecialBindings} />

Note: If you need to get back to a design view of your DataTemplate, just go the resources tab on the right, expand wherever you saved your template and click on the right hand icon of template you want to edit. For DataTemplates, this icon is unhelpfully blank.

Select DataTemplate from Resources

From here we can style the TextBlock directly in the DataTemplate using the Properties panel. Bold it, color it, skew it, turn it upsidedown, give it TextTrimming or TextWrapping or whatever we want. When finished, head back to the main composition view.

Click on the listview and, in the Properties section, expand “Miscellaneous” and then expand “View (GridView)” and click on the “Columns (Collection)” button.

 View GridView

Up pops the “GridViewColumn Collection Editor: Columns” window (which should be labeled something less obfuscating like “ListView Column Editor”).

Here we can create columns to aptly aid our evil schemes. If you’re following along from my RSS tutorial, we can create three new columns using the “Add Another Item” button (which should be labeled “Add Another Column”) and give them the following headers using the Header input in the Properties section:

“Publication Date”

If we want all our data to look the same with basic text elements and no fancy stuff, we can use DisplayMemberBinding and check out my post on that (coming soon).

However, if we want the special styling applied, we can choose the particular GridViewColumn to be specially styled and apply the template we’ve created.

(I feel like I’m writing a choose-your-own-adventure here. “If you want Johnny to answer the doorbell, turn to page 57. If you want Johnny to escape out the window, turn to page 23.”)


Click on the GridViewColumn with the “Title” header and click the little box to the right of “CellTemplate” In the resulting menu click on “Local Resource” and select the DataTemplate that we’ve just created. Click “OK”.

CellTemplate Menu

And viola! Our listview shows up all sorts of custom designed happiness.

ListView Frequently Asked Questions pertaining to ColumnHeader issues:

How do I make it so that, instead of cutting off the text in my column when I shorten it, my text displays ellipsis? (Example: “blahblahb…”)

which is closely related to:

How do I make it so that my text wraps when I shorten my columns?

So I deal with them in the same post here.

My binding points to an image source. How do I make it so that the image it points to shows up in the column instead of the stupid image source? (coming soon)
How do I center something in my ListView column? 

6 thoughts on “Styling A ListView Column Using Blend

  1. Quality content is the secret to invite the visitors to go to see
    the website, that’s what this site is providing.

  2. The acronym VPN stands foor virtual private network. The best vpn service also allows you to send
    your information and browse the internet iin complete security.
    Thesee public facing addresses usually have
    nothing in ckmmon with the addresses of devices connected to the organization’s LAN or WAN.

  3. There are many fine stores to choose from, but consider the following:1.
    Once you’ve decided upon the body style and layout that’s righ for you, however,
    you may find yourself facing one additional
    choice. For more informattion please visit or call 1-978-646-8980.

  4. You can definitely see your enthusiasm within the
    article you write. The arena hopes for even more passionate writers
    like you who aren’t afraid to mention how they believe.
    Always go after your heart.

  5. Great post, I really like the way you’re explaining things!!
    I came along the RSS tutorial and I have one question:

    Do I have to repeat this process for each colum I want to display in the listview. I tried to apply the one DataTemplate to all columns I created. It sure looks the desired way, but also the data for each column is the same.

    Or is there a way to bind different rss-paths to the respective columns but still using the same data template?

Comments are closed.