WPF Fernando’s Blog

Well, there are a lot of paths that you can take if you want to create a grid in WPF. However, I’ll show the most simple (at least for me).

 

Definitely the ListView is one of the most powerful (maybe the number one) controls in WPF so we can create a simple grid easily using this control. Now we need a source of data and we’re going to use an ObservableCollection, the msdn description of this class is the following:

 

“Represents a dynamic data collection that provides notifications when items get added, removed, or when the whole list is refreshed.“

 

So as you can realize this blows away a lot of painful things to do because we can do what we want with our collection and the framework updates the layout automatically.

 

This is the XAML:

<Window x:Class=”BlogStuff.Window1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

Title=”My Simple Grid” Height=”300″ Width=”300″>

<ListView ItemsSource=”{Binding}”>

<ListView.View>

<GridView>

<GridViewColumn Header=”Name” DisplayMemberBinding=”{Binding Path=Name}”>

<GridViewColumn.CellTemplate>

<DataTemplate>

<Label/>

</DataTemplate>

</GridViewColumn.CellTemplate>

</GridViewColumn>

<GridViewColumn Header=”Age” DisplayMemberBinding=”{Binding Path=Age}”>

<GridViewColumn.CellTemplate>

<DataTemplate>

<Label/>

</DataTemplate>

</GridViewColumn.CellTemplate>

</GridViewColumn>

<GridViewColumn Header=”Random Number” DisplayMemberBinding=”{Binding Path=RandomNumber}”>

<GridViewColumn.CellTemplate>

<DataTemplate>

<Label/>

</DataTemplate>

</GridViewColumn.CellTemplate>

</GridViewColumn>

</GridView>

</ListView.View>

</ListView>

</Window>

When you create the ListView you should set the ItemsSource property to {Binding}, this way the items will be taken from the DataContext property of the ListView, in this case the DataContext is the ObservableCollection.

 

Inside the GridView you can create the columns, then you can set which property of the item will be displayed in the current column with the DisplayMemberBinding property. Remember that the items are the items from the collection. Also you can define a DataTemplate for the cells, so if you want to show your info in buttons instead of labels you can change them easily without changing the code behind.

 

This is the Code Behind (C#):

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

//ObservableCollection namespace:

using System.Collections.ObjectModel;

 

namespace BlogStuff

{

///

/// Interaction logic for Window1.xaml

///

public partial class Window1 : Window

{

ObservableCollection<Guest> guests = new ObservableCollection<Guest>();

Random gen = new Random(DateTime.Now.Millisecond);

 

public Window1()

{

InitializeComponent();

this.DataContext = guests;

 

guests.Add(new Guest()

{

Name = “Fernando Romero”,

Age = 23,

RandomNumber = gen.Next(100)

});

 

guests.Add(new Guest()

{

Name = “Luis Del Vasto”,

Age = 22,

RandomNumber = gen.Next(100)

});

 

guests.Add(new Guest()

{

Name = “Nestor Martinez”,

Age = 26,

RandomNumber = gen.Next(100)

});

}

}

 

public class Guest

{

public string Name { get; set; }

public int Age { get; set; }

public int RandomNumber { get; set; }

}

}

 

Just after the first line of code in the constructor we set the DataContext property (of the window) with the guests collection, maybe you are thinking: “but the collection should be the DataContext of the ListView”, well that’s exactly what it is, In WPF the DataContext property is passed to the children by default, so as long as the ListView is contained by the window, then it will inherit this property. However, if you set the DataContext property of the ListView to other object then it will be overwritten.

I hope this could be useful for all of you guys.

Best,
FeR