Designer WPF

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?’ »

Over at nostatic.com, there is an example of <a href=”http://notstatic.com/archives/118″>using MarkupExtension</a> that that we can access some custom code functionality directly from the XAML.

 In his example, the following XAML accesses a random number generator within the code.

<Button>

   <Button.RenderTransform>

      <RotateTransform Angle=”{l:RandomNumber Min=0, Max=360}” />

   </Button.RenderTransform>

</Button>

Pretty cool. Apparently it only works when it isn’t placed inside a template… which makes it of limited usefulness, but still pretty neat.

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: 

Continue reading ‘Ellipsis and TextWrapping in a ListView Column’ »

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.

Continue reading ‘Styling A ListView Column Using Blend’ »

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

Continue reading ‘How do I connect an RSS Feed to my ListView/ListBox/Whatever?’ »

Please feel free to post additional questions in the comments section. I’ll get to them as I can and then link the help here.

• How do I get grid lines to show up in the ListView? 
• How do I style a specific column in a ListView?
• How do I make it so that, instead of cutting off the text in my column when I shorten it, my text displays ellipsis?
• How do I make it so that my text wraps when I shorten my columns?
• How do I center something in my ListView column?
• How do I wrap text in a ListView header?
• How do I embed ListView Columns in another Column? (Columns with Categories) 
• How do I style the ListView column gripper? (the gripper is also called a “splitter” and a “seperator”)

That’s all I got for now. Ask me some questions if you want more stuff.

If you’re looking for something more generic, check out my WPF Designers Guide to the ListView, which covers the broader topics in the ListView.

So you want grid lines in your listview, huh? Something that looks a little like this?

OK, we can do this the easy way and the hard way.
Continue reading ‘How Do I Set Up Grid Lines for my ListView?’ »

On a recent project, I spent (I kid you not) over three hours trying to get a stinking popup to close when I clicked somewhere else in the application.

 Figuring it was a focus issue, I tried the following triggers:

• IsFocused
• IsKeyboardFocused
• IsKeyboardFocusWithin
• IsMouseCapture
• IsMouseCaptureWithin

All to no avail.

Turns out that the only thing I had to do was set the StaysOpen property of the Popup thus:

<Popup StaysOpen=”False“>

Handy little property. I just wish that it was the default.

There is a WPF contest over at Lab 49 on visualization in the financial sector.

“WPF technology has the potential to revolutionize the visualization of data in the financial services industry and we’re looking for the best examples of WPF working with financial data that we can find to illustrate this.”

The prizes are pretty cool, but I’ll never be able to win anything if other people enter, so everyone stay away.