WPF: Display items in a data grid format using ListView

[chris128]

How to create a DataGridView style ListView (like an editable ListView in Details mode in winforms terms)
OK so this little mini tutorial isnt going to give you something that works exactly the same as a DGV in windows forms but if you want that exact thing then you are just going to have to host the windows forms version within your WPF app arent you
Also I would like to point out that as I am fairly new to WPF still, there may be a better way of doing this... but this works for me so I figured it might help someone else out.


First things first, lets place a ListView onto our window, either by dragging and dropping it from the toolbox or by typing it in to the XAML code window.
Done that? Good! You should now have something like this in your XAML window:

<ListView Margin="14,68,13,26" Name="ListView1" />

Now because we are going to be placing things inside our ListView we need to open up the tag instead of having it close with a / at the end (by things I mean XAML code, not listview items). So change it to this:

<ListView Margin="14,68,13,26" Name="ListView1">

</ListView>

So now we have an area where we can type XAML tags in to and they will be 'inside' the listview so will affect just this one control.

OK, now that we have our ListView we need to make it look similar to how it looks in Winforms when you set the View style to Details. However, in WPF there is no such option so we should just give up and go home right? What do you mean your already at home!? . . . . Anyway! No we should not give up and go home, we should use the <ListView.View> tag to create a new view inside our ListView and then use the <GridView> tag to create a grid inside of that. Then inside of that tag, we can add <GridViewColumn> tags to create our columns!
Like so:

<ListView Margin="14,68,13,26" Name="ListView1">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Test Column 1" />
                    <GridViewColumn Header="Test Column 2" />
                </GridView>
            </ListView.View>
</ListView>

As you can see we can use the Header attribute of the GridViewColumn to specify the text that will appear in the header of this column. Annoyingly you wont see these columns appear in the designer so you will have to run/debug your application to actually make sure they appear as they should.

We've got our data grid now, so whats next? Well, we need to load some data in to it dont we!

If your like me then you will probably be used to doing something like this in WinForms every single time you want to add/remove some items from a ListView:

Dim MyItem As New ListViewItem
MyItem.Text = "Stuff"
ListView1.Items.Add(MyItem)

but with WPF, there is no need to do that as we can bind pretty much anything to anything. What does that mean for this control? Well it means that we can bind the contents of our listview to a collection that we maintain in our code behind file (ie, in VB.NET code). Once this is setup then what this means is that if we want to add/remove/edit the items in our listview then we dont have to actually touch the listview at all. We can just edit our collection and the listview will instantly update itself.

This is the end of part 1 of this little tutorial, part 2 to follow in the next post very soon!