[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 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).