GridView in WPF

Mahesh Chand
Oct 05, 2012
405k
0
5
Article

If you are looking for a GridView control in WPF, you will be disappointed. WPF does not have a GridView control. But the good news is you can achieve GridView like functionality with a ListView control available in WPF.

If you have not used a ListView control in WPF, I recommend you read my ListView in WPF article before this article.

The View property is used to provide a GridView layout and design in a ListView control. The View property of ListView is a type of ViewBase class that supports two view types - GridView and a custom view. A GridView is used for arranging data in columns and adding layout and design support to a ListView.

The following code snippet sets the View property of a ListView to GridView mode.

<ListView.View>

</ListView.View>

</ListView>

A GridView is used as a supplement control to a ListView to provide style and layout. The GridView does not have its own control related properties such as background and foreground colors, font properties, size, and location. The container ListView is used to provide all control related properties.

Creating a GridView

The GridView element in XAML represents a GridView at design-time. The Columns property of GridView returns a collection of GridViewColumn objects. GridViewColumn element in XAML represents a GridView column. AllowsColumnReorder property represents weather columns in a GridView can be reordered by a user by dragging and dropping from one position to another. ColumnHeaderToolTip property represents the content of a tooltip that appears when the mouse pointer pauses over one of the column headers.

The code listed in Listing 1 creates a GridView control and adds four columns to it. The Header property of GridViewColumn represents the header of a column. The Width property represents the width of a column and the DisplayMemberBinding property is used to bind a GridViewColumn to a property of data binding object.

<GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Authors"

</GridView>

Listing 1

The output of listing looks like Figure 1.

Figure 1

The GridCiew class in WPF represents a GridView control. The GridViewColumn class represents a GridView column. The code listed in Listing 2 creates a GridView control and adds four columns to it dynamically.

private void CreateDynamicGridView()

{

// Create a GridView

GridView grdView = new GridView();

grdView.AllowsColumnReorder = true;

grdView.ColumnHeaderToolTip = "Authors";

GridViewColumn nameColumn = new GridViewColumn();

nameColumn.DisplayMemberBinding = new Binding("Name");

nameColumn.Header = "Author Name";

nameColumn.Width = 120;

grdView.Columns.Add(nameColumn);

GridViewColumn ageColumn = new GridViewColumn();

ageColumn.DisplayMemberBinding = new Binding("Age");

ageColumn.Header = "Age";

ageColumn.Width = 30;

grdView.Columns.Add(ageColumn);

GridViewColumn bookColumn = new GridViewColumn();

bookColumn.DisplayMemberBinding = new Binding("Book");

bookColumn.Header = "Book";

bookColumn.Width = 250;

grdView.Columns.Add(bookColumn);

GridViewColumn mvpColumn = new GridViewColumn();

mvpColumn.DisplayMemberBinding = new Binding("Mvp");

mvpColumn.Header = "Mvp";

mvpColumn.Width = 50;

grdView.Columns.Add(mvpColumn);

ListView1.View = grdView;

}

Listing 2

Adding a ContextMenu to a GridView Header

The ColumnHeaderContextMenu property of GridView is used to gets or sets a ContextMenu when you click on the header of a GridView control. The code snippet listed in Listing 3 adds a ContextMenu to a GridView header.

<GridView.ColumnHeaderContextMenu>

</ContextMenu>

</GridView.ColumnHeaderContextMenu>

</GridView>

Listing 3

The output of listing looks like Figure2.

Figure 2

Adding a CheckBox to a GridView Header

The ColumnHeaderTemplate property represents the template for the column header. Using this property, you may format GridView column headers the way you want. You may add CheckBoxes or Images to the column headers.

The code snippet in Listing 4 creates a DataTemplate resource with a CheckBox and orange foreground color of text that we can set as ColumnHeaderTemplate of a GridView.

<Window.Resources>