Vertical gridlines in a ListView

gridlines, listview, wpf

Solution

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.

Problem

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?

Original source

Related problems