Reader Level:
ARTICLE

GridView in WPF

Posted by Mahesh Chand Articles | WPF November 09, 2009
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 a GridView like functionality with a ListView control available in WPF. This article demonstrates how to generate a GridView like ListView control in WPF.
  • 2
  • 0
  • 192350
Download Files:
 

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>

    <ListView.View>

        <GridView />

     </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"

          >

<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Path=Name}" />

    <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Path=Age}" />

    <GridViewColumn Header="Book" Width="250" DisplayMemberBinding="{Binding Path=Book}" />

    <GridViewColumn Header="MVP" Width="50" DisplayMemberBinding="{Binding Path=Mvp}" />

   

</GridView>

Listing 1

The output of listing looks like Figure 1.

GridViewImg1.gif

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 AllowsColumnReorder="true" ColumnHeaderToolTip="Authors">

   

    <!-- Add a ContextMenu to GridView Header -->

    <GridView.ColumnHeaderContextMenu>

        <ContextMenu >

            <MenuItem Header="Ascending" Click="MenuItem_Click" />

            <MenuItem Header="Descending" />

        </ContextMenu>

    </GridView.ColumnHeaderContextMenu>                 

    <!-- Add GridVeiw Columns -->                   

    <GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Path=Name}" />

    <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Path=Age}" />

    <GridViewColumn Header="Book" Width="250" DisplayMemberBinding="{Binding Path=Book}" />

    <GridViewColumn Header="MVP" Width="50" DisplayMemberBinding="{Binding Path=Mvp}" />

   

</GridView>

Listing 3

The output of listing looks like Figure2.

GridViewImg2.gif

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>       

    <DataTemplate x:Key="OrangeHeaderTemplate">

        <DockPanel>

            <CheckBox/>

            <TextBlock FontSize="10" Foreground="Orange"

                       FontWeight="Bold" >

      <TextBlock.Text>

        <Binding/>

      </TextBlock.Text>

            </TextBlock>

        </DockPanel>

    </DataTemplate>       

   

</Window.Resources>

Listing 4

The code snippet in Listing 5 sets the ColumnHeaderTemplate of a GridView.

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

          ColumnHeaderTemplate="{StaticResource OrangeHeaderTemplate}" >

Listing 5

The output of listing looks like Figure 3.

GridViewImg3.gif

Figure 3

Summary

This article was an introduction of using a GridView in WPF. I will be discussing more GridView related functionality in my forthcoming articles.

Article Extensions
Contents added by italo lorita on Mar 24, 2013
COMMENT USING

Trending up