Designer Silverlight

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”

Read the rest of this entry »

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…

Read the rest of this entry »

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.

Read the rest of this entry »

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.

Read the rest of this entry »

In response to the questions:

How do I make it so that, instead of cutting off the text in my column when I shorten it, my text displays ellipsis?

and

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

I’ll deal with the first one first and the second one… second.

That sounded better in my head than it looks on the screen.

With the first question… when a column is shortened, this is what normally happens:

And, instead, we want this to happen: 

Read the rest of this entry »

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:

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…”

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

Read the rest of this entry »

When I’m doing the initial design for a project (while the developers are working on silly things like data validation and security), I often find myself in need of data so that I can see my project in action. The developers, of course, have no interest in conjuring up test data at that phase in the project, so I started using RSS feeds as data sources for my initial designs.

Not all RSS feeds are equal in the eyes of Blend. I use one of the New York Times RSS feeds, which always work flawlessly.

So we’re looking at the listview/listbox/whatever in our project. Right click on it (in the composition or in the Objects and Timeline pane, it doesn’t matter) and select the “Bind ItemsSource to Data”.

Read the rest of this entry »

So, after months of delay I finally figured that there are probably some people out there who want to figure out how to make the WPF listview look the way they want it to look.

A quick note: I will be dealing almost entirely with the listview look. If you want the listview to do something (functionality) or look a certain way and you can’t find the answer here, leave a comment with your suggestion and I’ll try to blog about it and place a link to the answer in my listview FAQ.

My goal is to create a significant repository on getting the stinking listview to look the way you want and do what you want it to do.

You’re probably here because, compared with most of the WPF controls, Blend gives very little guidance on how to deal with the listview (even though you use the listview for practically everything you do).  So we’re going to start with the basic structure of the listview. This is what the basic listview looks like in the XAML.

<ListView>
      <ListView.View>
            <GridView>
                  <GridViewColumn Header=”Column Header“/>
            </GridView>
      </ListView.View>
</ListView>

So this post will start out giving basic guidance on what to edit when you’re trying to edit the various parts of the listview. I will update these sections with links and tutorials on listview specific tasks as time goes on.

Read the rest of this entry »