WPF ListView Vertical Lines (Horizontal as Bonus)

December 16, 2007

18 comments

It all started half year ago, after the Japanese (customer of my customer) UI designer sent a photo of how a ListView should look like. First we though: “Piece of Cake, WPF…”, then we saw the weird, annoying vertical-lines that stuck in the middle of nowhere… So we decided to provide a solution later :-)


Did you notice that neither WPF ListView (using a GridView as its view) nor custom grids such as Infragistics, Xceed, etc, provide an out-of-the-box vertical lines?


 


Download this code from here.


 


image


 


Starting by digging inside the complicated WPF ListView/GridView template and style, I didn’t find any native option to draw my lines.


Why? Because the ListView/GridView is composed with several helper-controls which are decoupled from each other. In this case, the header part is rendered by the GridViewHeaderRowPresenter and the rows part is rendered by the ScrollContentPresenter.


 


To overcome this problem, without writing a custom GridViewHeaderRowPresenter I hooked into the ScrollContentPresenter by changing its content to Grid with ContentControl for the original content (rows), and ItemsControl with a Data Tenmplate to draw each column with a border.


 

<ScrollContentPresenter x:Name=”PART_ScrollContentPresenter”
SnapsToDevicePixels=”{TemplateBinding SnapsToDevicePixels}”
ContentTemplate=”{TemplateBinding ContentTemplate
}”
KeyboardNavigation.DirectionalNavigation
=”Local”
CanContentScroll=”{TemplateBinding CanContentScroll
}”>

<ScrollContentPresenter.Content>
<Grid
>
<!– Container of vertical and horizontal lines –>
<ItemsControl Margin
=”3,0,0,0″
ItemsSource=”{Binding Path
=TemplatedParent.View.Columns,
RelativeSource={RelativeSource TemplatedParent
}}”>
<ItemsControl.ItemTemplate
>
<DataTemplate
>
<Border Width=”{Binding Path
=ActualWidth}”
BorderThickness
=”0,0,1,0″
BorderBrush=”{DynamicResource verticalLineColor
}” />
</DataTemplate
>
</ItemsControl.ItemTemplate
>
<ItemsControl.ItemsPanel
>
<ItemsPanelTemplate
>
<StackPanel Orientation
=”Horizontal” />
</ItemsPanelTemplate
>
</ItemsControl.ItemsPanel
>

<!– Fill background with horizontal lines –>
<ItemsControl.Background
>
<VisualBrush TileMode
=”Tile”
Stretch
=”None”
Viewport=”{Binding Source={StaticResource columnHeight
},
Converter={StaticResource columnViewportConverter
}}”
ViewportUnits
=”Absolute”>
<VisualBrush.Visual
>
<StackPanel HorizontalAlignment
=”Stretch”
VerticalAlignment
=”Stretch”>
<!– Add Rectangles here for more horizontal lines –>
<Rectangle Height=”{DynamicResource columnHeight
}”
VerticalAlignment
=”Stretch”
Fill=”{DynamicResource horizontalLineColor1
}”
Width
=”1″ />
<Rectangle Height=”{DynamicResource columnHeight
}”
VerticalAlignment
=”Stretch”
Fill=”{DynamicResource horizontalLineColor2
}”
Width=”1″
/>
</StackPanel
>
</VisualBrush.Visual
>
</VisualBrush
>
</ItemsControl.Background>

</ItemsControl
>
<ContentControl Content=”{TemplateBinding Content
}” />
</Grid
>
</ScrollContentPresenter.Content>

</ScrollContentPresenter>


 


As a bonus, I have added multi colors horizontal-lines all the way down (not only for items in the ListView) as a background brush, which is not the standard solution you are used to.


 


Enjoy by download this code from here.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

18 comments

  1. ScottAugust 20, 2008 ב 17:19

    This solution does not work very well as if you add a lot of items to your listview, the items do not line with the background’s.  Please update with the correct fix.

    Reply
  2. DanAugust 28, 2008 ב 16:04

    I know this is an old entry, but I just love it when someone reads what you write and then demands you do something. Apparently, you owe them something now!

    Reply
  3. Tomer ShamamAugust 28, 2008 ב 16:20

    Hi Dan,

    Completely agree with you :-)

    But don’t get it too serious. As for me, I just got use to it.

    Cheers

    Reply
  4. Karol DelandAugust 19, 2009 ב 21:00

    To correct the alignment problem add 2 in the Viewport converter to the result and change the margin 3,0,0,0 to 3,-1,0,0

    return new Rect(0, 0, 1, (columnHeight * 2) + 2);

    Reply
  5. AneeSeptember 11, 2009 ב 09:19

    Hi,

    This link is really helpful to create a listview with styles.

    Reply
  6. biosysNovember 13, 2009 ב 02:46

    Hello,

    I just want to say: Than you! And than you very much. Your example is realy simple and very easy to understand. This is very good point to start with :)

    Reply
  7. Tomer ShamamNovember 13, 2009 ב 06:01

    You welcome! It makes me happy to hear that :)

    Reply
  8. UziJanuary 27, 2010 ב 07:56

    Hi,
    This is great work.

    QUESTION
    ========
    How I Change the background of Row on MouseOver
    in this example?

    Reply
  9. DeepakAugust 6, 2010 ב 05:05

    Hey, I have followed the above code to create a horizontal and vertical grid lines. but I need to handle the mouse over event of the listview. I need to use trigger to trap the mouse over event so that I can disable it. And also upon row select i need to change the color of the selected row.
    Thanks
    Deepak

    Reply
  10. RenGuoqiangAugust 20, 2010 ב 11:39

    The Performance is not good.I show registry items. It don’t response on Loading

    Reply
  11. Yao.GuoJanuary 17, 2011 ב 10:00

    Hey, I can’t show Horizontal Lines ? Why ? I am crazying!

    Reply
  12. TimMarch 1, 2011 ב 04:55

    Hi , When I follow your solution , I found the virtualization for the listview failed . Do you have any I idea ?

    Reply
  13. CatsFriendsJune 19, 2011 ב 15:42

    Where can I read more about this?

    Reply
  14. IntFashionJune 19, 2011 ב 21:16

    ok! theme revealed… thanks

    Reply
  15. LLAugust 4, 2011 ב 04:45

    This is a great work, but it doesn’t work with VirtualizingStackPanel, is there a solution?

    Reply
  16. SebastianJuly 13, 2012 ב 12:11

    To make the list virtualizing, first take the ListView style from http://msdn.microsoft.com/en-us/library/ms788747.aspx into your view.

    Then, add ‘Name=”ItemsPresenter”‘ to the ItemsPresenter control in the style.

    Somehow, WPF does not find the “right” ItemsPresenter when you are using the ScrollContentPresenter above. It is found again after adding the name, and the VirtualizingStackPanel will actually be virtualizing.

    Reply
  17. johnnyNovember 8, 2012 ב 13:55

    great stuff!

    Reply