Pimp my ListView
The ListView in WPF is a very powerfull control! While we wait patiently for the DataGrid to be released... lets see what we can do with a ListView
The Basics
Before we start pimping the control... lets look at the basics! I created a very simple data object to be displayed in the ListView
public class Disciple
{
public string Name { get; set; }
public string Surname { get; set; }
public string Website { get; set; }
} |
and I also populate it with some data
List<Disciple> Disciples = new List<Disciple>()
{
new Disciple() { Name = "Andrew", Surname = "Smith", Website = "http://agsmith.wordpress.com/" },
new Disciple() { Name = "Beatriz", Surname = "Costa", Website = "http://www.beacosta.com/blog/" },
new Disciple() { Name = "Corrado", Surname = "Cavalli", Website = "http://blogs.ugidotnet.org/corrado" },
new Disciple() { Name = "Dr. WPF", Surname = "", Website = "http://www.drwpf.com/" },
new Disciple() { Name = "Ian", Surname = "Griffiths", Website = "http://www.interact-sw.co.uk/iangblog/" },
new Disciple() { Name = "Jeremiah", Surname = "Morrill", Website = "http://jmorrill.hjtcentral.com/Home/tabid/428/Default.aspx" },
new Disciple() { Name = "Josh", Surname = "Smith", Website = "http://joshsmithonwpf.wordpress.com/" },
new Disciple() { Name = "Karl", Surname = "Shifflett", Website = "http://karlshifflett.wordpress.com/" },
new Disciple() { Name = "Lester", Surname = "Lobo", Website = "http://blogs.msdn.com/llobo/default.aspx" },
new Disciple() { Name = "Marlon", Surname = "Grech", Website = "http://marlongrech.wordpress.com/" },
new Disciple() { Name = "Mike", Surname = "Brown", Website = "http://blog.planetwpf.com/" },
new Disciple() { Name = "Pavan", Surname = "Podila", Website = "http://blog.pixelingene.com/" },
new Disciple() { Name = "Rudi", Surname = "Grobler", Website = "http://dotnet.org.za/rudi/" },
new Disciple() { Name = "Sacha", Surname = "Barber", Website = "http://sachabarber.net/" },
new Disciple() { Name = "Zhou", Surname = "Yong", Website = "http://shevaspace.spaces.live.com/default.aspx" }
}; |
Next, I set my Window's DataContext to this list
and lastly, add the ListView to my Window
<ListView ItemsSource="{Binding}">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Surname" DisplayMemberBinding="{Binding Surname}"/>
<GridViewColumn Header="Website" DisplayMemberBinding="{Binding Website}"/>
</GridView>
</ListView.View>
</ListView>
|
Great, now we have a beautiful ListView!!
OK, maybe not beautiful but at least functional! What can be change now?
Column Header Style
To pimp the column headers, we need to create a new style for the GridViewColumnHeader. Here is the skeleton markup
<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Grid>
<Border>
<ContentPresenter />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
|
Alternating background colors for each row
Another popular UI trend is to alternate the background colors for each row... Their are 2 components needed to achieve this... First we need to create a new value converter
public sealed class BackgroundConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
ListView listView = ItemsControl.ItemsControlFromItemContainer((DependencyObject)value) as ListView;
int index = listView.ItemContainerGenerator.IndexFromContainer(value);
if (index % 2 == 0)
return Brushes.LightBlue;
return Brushes.White;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
} |
All this value converter does is check if the item is on a odd or even line...
<local:BackgroundConverter x:Key="backgroundConverter" /> |
The next part is to bind the Background of every ListViewItem using the value converter (Read more about how this actually work here)
<Style x:Key="{x:Type ListViewItem}" TargetType="ListViewItem">
<Setter Property="Background">
<Setter.Value>
<Binding RelativeSource="{RelativeSource Self}" Converter="{StaticResource backgroundConverter}"/>
</Setter.Value>
</Setter>
</Style> |
The template for the ListViewItem is also where you can add mouse over effects, change the selection behaviour, etc!
More Information
Sorting and editing a ListView
MSDN ListView ControlTemplate Example
If you found this article useful, please 