How Do I Set Up Grid Lines for my 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.
The easy way:
Put the code below into your resources:
<DataTemplate x:Key=”MyDataTemplate“>
<Border BorderBrush=”#FF000000” BorderThickness=”1,1,0,0” Margin=”-6,-2,-6,-2“>
<StackPanel Margin=”6,2,6,2“>
<TextBlock Text=”{Binding MySpecialBinding}“/>
</StackPanel>
</Border>
</DataTemplate>
The margin issues are to get the template to fit properly into the space provided. However, this won’t work properly unless your ItemContainerStyle plays nice. And this means setting your HorizontalContentAlignment to “Stretch” as seen below:
<Style x:Key=”MyItemContainerStyle” TargetType=”{x:Type ListViewItem}“>
<Setter Property=”HorizontalContentAlignment” Value=”Stretch” />
<Setter Property=”VerticalContentAlignment” Value=”Stretch” />
</Style>
So now all the resources are in place, so we can reference them in the appropriate spots in our ListView. See below:
<ListView ItemContainerStyle=”{DynamicResource MyItemContainerStyle}“>
<ListView.View>
<GridView>
<GridViewColumn Header=”Whatever” CellTemplate=”{DynamicResource MyDataTemplate}“ />
</GridView>
</ListView.View>
</ListView>
This will give you a nice healthy black border. To change the color, just change the BorderBrush property in the dataTemplate to your favorite hex color. I know you have one… use it!
Me? I’m a #FF4AA0D8 kind of guy, as I’m sure you could tell from my blog.
Also, as another note, you’ll want your last column in your listview to point to a dataTemplate with the following BorderThickness:
BorderThickness=”1,1,1,0”
But you probably would have figured that out for yourself.
The hard way:
The hard way involves me actually taking the time to create a Blend walkthrough so that involves developing a deeper understanding of why the above works the way it does. In other words, it’s coming soon.
Adriaan:
Hey Matthias,
The solution described here works absolutely fine for simple ListView tweaking, however when you break apart the ListView Style into its constituent parts, you’ll notice you can’t get that DataTemplate in there neatly anymore. I found a really good solution over here : http://blogs.microsoft.co.il/blogs/tomershamam/archive/2007/12/16/wpf-listview-vertical-lines-horizontal-as-bonus.aspx
Thought I’d share.
cheerio, continue the excellent work!
greetings,
10 April 2008, 5:10 amAdriaan
Nil:
I am new to WPF.
What need to be set in place of MySpecialBinding? Can u give an example?
10 August 2009, 2:16 amAlexander:
It does not work for me. I am using VS 2008 Prof and VB.NET with XAML. I am only using this Code with Databinding to a DataTable object. I have entries in the listview. But the listview is displayed unchanged, even so I added the above code.
and
Any help is appreciated.
7 May 2010, 6:37 amAlexander:
It does not work for me. I am using VS 2008 Prof and VB.NET with XAML. I am only using this Code with Databinding to a DataTable object. I have entries in the listview. But the listview is displayed unchanged, even so I added the above code.
OPEN-TAG__Window.Resources__CLOSE-TAG
OPEN-TAG__DataTemplate x:Key=”MyDataTemplate”__CLOSE-TAG
OPEN-TAG__Border BorderBrush=”#FF000000″ BorderThickness=”1,1,0,0″ Margin=”-6,-2,-6,-2″__CLOSE-TAG
OPEN-TAG__StackPanel Margin=”6,2,6,2″__CLOSE-TAG
OPEN-TAG__TextBlock Text=”{Binding MySpecialBinding}”/__CLOSE-TAG
OPEN-TAG__/StackPanel__CLOSE-TAG
OPEN-TAG__/Border__CLOSE-TAG
OPEN-TAG__/DataTemplate__CLOSE-TAG
OPEN-TAG__Style x:Key=”MyItemContainerStyle” TargetType=”{x:Type ListViewItem}”__CLOSE-TAG
OPEN-TAG__Setter Property=”HorizontalContentAlignment” Value=”Stretch” /__CLOSE-TAG
OPEN-TAG__Setter Property=”VerticalContentAlignment” Value=”Stretch” /__CLOSE-TAG
OPEN-TAG__/Style__CLOSE-TAG
OPEN-TAG__/Window.Resources__CLOSE-TAG
and
OPEN-TAG__ListView IsSynchronizedWithCurrentItem=”True” ItemsSource=”{Binding}” ItemContainerStyle=”{DynamicResource MyItemContainerStyle}” Width=”550″ Height=”75″ Name=”Personalübersicht” VerticalAlignment=”Center” HorizontalAlignment=”Center”__CLOSE-TAG
OPEN-TAG__ListView.View__CLOSE-TAG
OPEN-TAG__GridView__CLOSE-TAG
OPEN-TAG__GridViewColumn CellTemplate=”{DynamicResource MyDataTemplate}” Header=”Name” DisplayMemberBinding=”{Binding Path=NameNach}”/__CLOSE-TAG
OPEN-TAG__GridViewColumn CellTemplate=”{DynamicResource MyDataTemplate}” Header=”Vorname” DisplayMemberBinding=”{Binding Path=NameVor}”/__CLOSE-TAG
OPEN-TAG__GridViewColumn CellTemplate=”{DynamicResource MyDataTemplate}” Header=”Abteilung” DisplayMemberBinding=”{Binding Path=Abteilung}”/__CLOSE-TAG
OPEN-TAG__GridViewColumn CellTemplate=”{DynamicResource MyDataTemplate}” Header=”Telefon” DisplayMemberBinding=”{Binding Path=Telefon}”/__CLOSE-TAG
OPEN-TAG__/GridView__CLOSE-TAG
OPEN-TAG__/ListView.View__CLOSE-TAG
OPEN-TAG__/ListView__CLOSE-TAG
Any help is appreciated.
7 May 2010, 6:39 amashwini:
VERY VERY bad
28 May 2010, 12:53 am