This is just a quick note on creating a ListView style with the appropriate GridView style and template assignments. Normally, I’ve been creating listviews that look like this: <ListView x:Name=”MyListView”… Read More »How to Assign ColumnHeaderContainerStyle and ColumnHeaderTemplate to a ListView Style
Several months back, I was doing some work for a company that was using WPF for a stylus based application. One of the things that they found they needed was… Read More »How Do I Make a ListView or a ScrollViewer Left Handed?
I was working on one of my projects today and I noticed that one of our popups displaying search results in a ListBox was having really serious performance problems. After determining that the problem was, in fact, on the WPF side of things, I was somewhat baffled. I wasn’t doing anything that I could think of that should be pushing the limit of what WPF could do.
Finally, I went looking online for an answer and discovered a list of possible performance killers for the ListView (and ListBox) on Mark Shurmer’s blog. Chief among his no-no’s:
Embedding the ListView inside a StackPanel
Which is exactly what I was doing.
Why is this a problem? To answer that question, let’s take a look at the ItemsPanel at runtime using Snoop. When I place my ListBox into a Grid, here is what my ItemsPanel looks like:
OK, it’s really late and I want to get this done, so we’re going to go through the easy way, which will require some XAML, but I’ll try to keep it as Blend-y as possible.
So you have a column header and you want the text inside to wrap when the header space gets too short for the content. Your header probably looks something like this:
First, go to wherever your resources are being held and type the following in:
<Style x:Key=”CustomHeaderStyle” TargetType=”{x:Type GridViewColumnHeader}“>
</Style>
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).Read More »Embedded ListView Columns (Columns Within Columns)
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 More »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…
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.
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:
