WPF 2advanced ListView Style


Sorry for not posting earlier anything yet, but i have been busy so i decided to start a series in which i will try to create all the controls you can see in the site www.2advanced.com and first i started with the ListView control and styled it like the one you can see in the site.

In the below image you can see more details.

Img 2advanced
So the only things that i styled here was the ListView and The ListViewItem.


The template of the listview is very simple it has a border and in that border the default contentpresenters of the listview:

<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="4">

     <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">

          <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>




This control is a little bit complicated but not too much. So first is COntrolTemplate that it’s just a grid with 3 columns:

  1. a Path that draw the little corner as you can see it in the screenshot above;
  2. then a rectangle which is the little white “bulb” ;
  3. an finally the ContentPresenter;
<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<Path Margin="6,0,0,0" SnapsToDevicePixels="true" Grid.Column="0" x:Name="Path" Width="6" Height="5" Stretch="Fill" StrokeThickness="1" StrokeMiterLimit="2.75" Stroke="{TemplateBinding BorderBrush}" Data="F1 M 0,0L 0,5L 6,5"/>
<Rectangle Margin="6,0" x:Name="whiteSquare" SnapsToDevicePixels="true" Grid.Column="1" Fill="#FFFFFF" Width="3" Height="7">
<OuterGlowBitmapEffect GlowColor="#ffffff" GlowSize="0" Opacity="1"/>
<ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

To make the animation on the trigger IsMouseOver i start and stop 2 storyboards.

<Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard Storyboard="{StaticResource FadeIn}"/></Trigger.EnterActions>

<BeginStoryboard Storyboard="{StaticResource FadeOut}"/>

To see the code for the storyboards download the whole project from here.

For the next post i will make the nice slick ScrollBar.

17 thoughts on “WPF 2advanced ListView Style

  1. Nelson

    I am intend to use the listview control to display more than one column and I would like the listview header to be displayed as well. May I know how should I change the template? Thanks.

  2. Pingback: Recent URLs tagged Xaml - Urlrecorder

  3. admin Post author

    Yes, I could have used ListBox, but I was tired when I’ve made this post initially I wanted to make it as a ListBox, but by mistake I made it as a Listview.

  4. Pingback: Websites tagged "2advanced" on Postsaver

Leave a Reply