[WPF] How to programmatically add databound item to ListView

In this post I'll show how to programmatically add databound items to a WPF ListView - it's actually pretty straightforward but it's not the most intuitive task if you don't have a lot of experience with WPF.

Here's your xaml - pay attention to the bindings on the grid columns:

<ListView.View>
   <GridView>
      <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=Name}"/>
      <GridViewColumn Header="Value" DisplayMemberBinding="{Binding Path=Value}"/>
   </GridView>
</ListView.View>

We need to define a data class with Name and Value properties such as:

public class BoringData
{
    public string Name { get; set; }
    public string Value { get; set; }
}

And here comes the fun - how to programmatically add items to the ListView:

//utterly boring call to generate your data item
BoringData boredom = getBoringData(index);//<-- whatever
//add the item to the listView 
this.myListView.Items.Add(boredom);

If you're thinking I post boring stuff ... well, you're right. Posts like this I mainly post so that I won't forget how it's done (and hopefully will be helpful to some other occasional WPF hacker).

Quick and Dirty WPF ListView Customization

When in need of customizing a WPF ListView without much WPF experience, chances are you'll hit the wall soon enough on pretty trivial tasks.

This is a collection of recent posts appeared on this blog on the topic. I think the list covers most of the common basic ListView customization tasks.

• Hot to set row height
• How to set selected item background color
• How to set custom alternate row colors
• How to set scrollbar width

Hope this'll spare a good share of frustration to some of you cheap guys out there, pulling your hair trying to write xaml by hand rather than using some version of Expression Blend or the likes (as I did myself 'cause the 30-days trial expired and the boss wouldn't show the money).

How to set WPF ListView or ScrollViewer Scrollbar width

A pretty common dirty hack to modify the scrollbars width is to set the OS value for scrollbars width to whatever you need in your app - this obviously sucks as not only your application will be affected.

In WPF you can override scrollbars width in both ListView and ScrollViewer controls pretty easily with the following XAML markup.

1) Include mscorlib with the sys prefix (or whatever prefix you want) in the page declaration:

<Page x:Class="AtlasPrototype.VehicleIdHistory"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib"
  DataContext="{Binding RelativeSource={RelativeSource Self}}"
  Title="VehicleIdHistory">

2) Override vertical scrollbar width resource for the ScrollViewer (exact same for a ListView):

<ScrollViewer>
 <ScrollViewer.Resources>
    <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">60</sys:Double>
 </ScrollViewer.Resources>
 <-- other stuff -->
</ScrollViewer>

Sounds all cool and easy but I had to beg work hard on stackoverflow to get this figured out. Show due Respect.

How to check if WPF is using Hardware or Software Rendering?

In general, software rendering will usually kick-in if your machine doesn't support DirectX or if the drivers installed are not working correctly (for whatever reason). WPF is entirely built on Direct3D, and software rendering means your WPF app will run painfully slow.

In borderline scenarios, such as running on portable device where hardware capability is constrained, you might find yourself in a bit of a mexican standoff situation where you don't know if the bottleneck is the hardware itself or the problem is just that hardware acceleration is not working and the system falls back to software rendering. So, how do you check if software rendering is kicking in?

You can do this from code querying the RenderCapability.Tier property, as follows:

//shifting some 16 bits will do the trick
int renderCapabilityTier = (RenderCapability.Tier >> 16);

The int above can have three possible values:

• 0 --> you're screwed - no hardware acceleration
• 1 --> you're half screwed - you got some hardware acceleration
• 2 --> you're good to go with full blown hardware acceleration

You might also wanna run the DirectX diagnostic tool (just run dxdiag.exe) to double check the state of your hardware acceleration (check the display tab) and, since we are at it, the new WPF profiler.

How to set WPF ListView alternate row color

Another common task you might have to tackle when working with WPF ListView is setting the background color for the rows in an alternate fashion (odd rows and even rows - you know what I mean).

This is how you do it.

First thing, create a style element in your ResourceDictionary or if you don't have one drop it on the page itself:

<Style x:Key="alternatingListViewItemStyle" TargetType="{x:Type ListViewItem}">
     <Style.Triggers>
         <!-- setting up triggers for alternate background colors -->
         <Trigger Property="ItemsControl.AlternationIndex" Value="1">
             <Setter Property="Background" Value="LightGray"></Setter>
         </Trigger>
         <Trigger Property="ItemsControl.AlternationIndex" Value="2">
             <Setter Property="Background" Value="White"></Setter>
         </Trigger>
     </Style.Triggers>
     <!-- setting row height here --> 
     <Setter Property="Height" Value="30" />
</Style>

Now set the ItemContanerStyle on the actual ListView and set the AlternationCount attribute):

<ListView Name="recordContainer" ItemContainerStyle="{StaticResource alternatingListViewItemStyle}" AlternationCount="2" >
   <ListView.View>
      <GridView>
         <!-- Just a few sample columns -->         
         <GridViewColumn Header="aField" />
         <GridViewColumn Header="anotherField" />
         <GridViewColumn Header="yetAnotherField" />
      </GridView>
   </ListView.View>
   <!-- Whatever you might have in here -->
</ListView>

And this is all there is to it!

How to set WPF ListView selected item background color

After my last post I came across another common WPF task that could result in excruciating frustration if you're not using Expression Blend (or you just don't know enough about this shit nice framework): setting the color of the selected item in a ListView.

This is how you do it:

<ListView>
<ListView.Style>
  <Style TargetType="{x:Type ListView}">
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Margin" Value="0"/>
    <!-- here we go -->
    <Style.Resourcesgt>
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black"/>
      <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Gray"/>
    </Style.Resources>
  </Style>
</ListView.Style>
<!-- other stuff -->
<ListView>

Hope it helps - if so you can express your gratitude by randomly upvoting some of my answers on stackoverflow.

How to set row height in WPF ListView

I've been checking out WPF lately for some prototyping work and came across something that's gotta be a very common show-stopper for beginners: I had a ListView element setup as a grid and no clue about how to set row height (without increasing font text - should go without saying).

This is a nice way of doing it (thanks stackoverflow):

<ListView>
  <ListView.ItemContainerStyle>
      <Style TargetType="ListViewItem">
            <Setter Property="Height" Value="50" />
      </Style>
  </ListView.ItemContainerStyle>
  <!-- WHATEVER -->
</ListView>

That's what you get if you try to do some WPF magic without an Expression Blend license, which reminds me the good old days of editing html manually and feeling a God (except the God part).