Vertical gridlines in a ListView

Question

I've got a WPF ListView that I'm using as a GridView. Is there any way I can get vertical gridlines in there?

The ListView has a MinHeight specified, so I'd like the GridLine to go all the way to the bottom of the grid, so it'll fill the empty space.

This seems to be a rather tricky problem. Is is possible to solve?

did you check this question http://stackoverflow.com/questions/5645078/how-to-put-vertical-lines-for-listviewitem-in-wpf — Habib, Apr 06 '12 at 16:05
it's a start, but not what i'm looking for. The gridlines aren't lined up under the header, nor does it appear that it will draw them all the way down to the bottom of the listview — Jim B, Apr 06 '12 at 16:28

Stewbob · Accepted Answer · 2017-06-23T10:24:23.593

This is how I do it.

      <ListView Grid.IsSharedSizeScope="True"
                ItemsSource="{Binding Path=MyList,FallbackValue='12345'}" >
        <ListView.ItemTemplate>
          <DataTemplate>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*" SharedSizeGroup="col0"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="1*" SharedSizeGroup="col2"/>
              </Grid.ColumnDefinitions>
              <TextBlock Grid.Column="0" Margin="10,0"
                       Text="{Binding Path=Name, FallbackValue='Name goes here'}"/>
              <Border Grid.Column="1" Margin="0,-2"
                    BorderBrush="DarkGray" 
                    BorderThickness="0,0,1,0" />
              <TextBlock Grid.Column="2" Margin="10,0"
                       Text="{Binding Path=DateModified, FallbackValue='Date goes here'}"/>
            </Grid>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

The SharedSizeGroup and Grid.IsSharedSizeScope properties are key to this way of doing it. The Margin="0,-2" property on the Border makes sure the dividing line looks like a continuous vertical line. If you add vertical margin to the two textblocks, you will need to increase the negative vertical margin of the border.

This will take care of lining things up into two uniformly sized columns with a vertical line between them, but it won't extend into areas where there is no data. A ListView might not be the best option if you want that functionality.

Adding some data to the MyList property in the ViewModel gives this as a result:

Of course, the MyList property needs to be a list or collection of a class that has Name and DateModified as properties.

Vertical gridlines in a ListView

1 Answers1

Linked