GridView In WPF

WPF GridView control

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 and 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.

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.

privatevoid CreateDynamicGridView() {
    // Create a GridView
    GridView grdView = newGridView();
    grdView.AllowsColumnReorder = true;
    grdView.ColumnHeaderToolTip = "Authors";
    GridViewColumn nameColumn = newGridViewColumn();
    nameColumn.DisplayMemberBinding = newBinding("Name");
    nameColumn.Header = "Author Name";
    nameColumn.Width = 120;
    grdView.Columns.Add(nameColumn);
    GridViewColumn ageColumn = newGridViewColumn();
    ageColumn.DisplayMemberBinding = newBinding("Age");
    ageColumn.Header = "Age";
    ageColumn.Width = 30;
    grdView.Columns.Add(ageColumn);
    GridViewColumn bookColumn = newGridViewColumn();
    bookColumn.DisplayMemberBinding = newBinding("Book");
    bookColumn.Header = "Book";
    bookColumn.Width = 250;
    grdView.Columns.Add(bookColumn);
    GridViewColumn mvpColumn = newGridViewColumn();
    mvpColumn.DisplayMemberBinding = newBinding("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 get or set 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.

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.

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.