In this article we'll talk about using the ListView but with one of it's most useful feature: the GridView. With this functionality we're able to present data to users in the form of tables and rows, just like a data grid would do in the old Windows Forms space.
Below you can find a pretty simple example of a list view with three columns:
<window x:class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="MainWindow" height="350" width="525">
<grid>
<listview margin="10" name="BusinessListView">
<listview.view>
<gridview>
<gridviewcolumn header="Company" width="120" displaymemberbinding="{Binding Company}"></gridviewcolumn>
<gridviewcolumn header="Url" width="200" displaymemberbinding="{Binding Url}"></gridviewcolumn>
<gridviewcolumn header="Phone" width="100" displaymemberbinding="{Binding Phone}"></gridviewcolumn>
</gridview>
</listview.view>
</listview>
</grid>
</window>
namespace WpfApplication2
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<business> businesses = new List<business>();
businesses.Add(new Business("Microsoft", "http://www.microsoft.com", "123-421-1231"));
businesses.Add(new Business("SkyXoft", "http://www.skyxoft.com","123-321-1231"));
businesses.Add(new Business("LicenseSpot", "http://www.licensespot.com", "123-312-3212"));
BusinessListView.ItemsSource = businesses;
}
}
public class Business
{
public string Company { get; set; }
public string Url { get; set; }
public string Phone { get; set; }
public Business(string company, string url, string phone)
{
this.Company = company;
this.Url = url;
this.Phone = phone;
}
}
}
</business></business>
In this sample, we have a ListView with three simple columns. We're just changing the default View for the list view to be GridView (this is the only one available but you can create your own). We then just define the columns using the XAML markup as shown above. In each column we're defining the Header that's shown at the top of the grid, the width and the DisplayMemberBinding that binds the value of the column to the actual object we're using in the C# code.
We can add our own controls to grid view columns using the CellTemplate property in WPF. This give us the option to render the content of the columns in any way that we need instead of just displaying strings as the DisplayMemberBinding property does.
In the sample below, we'll be changing the url column to display what an actual link looks like by using the TextBlock element:
<window x:class="WpfApplication2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="MainWindow" height="350" width="525">
<grid>
<grid.rowdefinitions>
<rowdefinition height="319*"></rowdefinition>
<rowdefinition height="4*"></rowdefinition>
</grid.rowdefinitions>
<listview margin="10,10,10,6" name="BusinessListView">
<listview.view>
<gridview>
<gridviewcolumn header="Company" width="120" displaymemberbinding="{Binding Company}"></gridviewcolumn>
<gridviewcolumn header="Url" width="200">
<gridviewcolumn.celltemplate>
<datatemplate>
<textblock text="{Binding Url}" textdecorations="Underline" foreground="Blue" cursor="Hand"></textblock>
</datatemplate>
</gridviewcolumn.celltemplate>
</gridviewcolumn>
<gridviewcolumn header="Phone" width="100" displaymemberbinding="{Binding Phone}"></gridviewcolumn>
</gridview>
</listview.view>
</listview>
</grid>
</window>
As you can see, this very simple. In the middle columns we just specified that we wanted a CellTemplate to be used, define what we wanted as a template (in this case a TextBlock) and just let the control know how to bind to the property. You can use this same approach to basically use any other element as a CheckBox for example as shown in the ListView checkbox sample.
