Using XAML GridView in WPF

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, a 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 supplemental 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 the 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. A GridViewColumn element in XAML represents a GridView column. The AllowsColumnReorder property represents whether columns in a GridView can be reordered by a user by dragging and dropping from one position to another. The 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 as in 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 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 as in Figure 2.


                                                                   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 a 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 5 looks as in Figure 3.


                                                   Figure 3

Summary

In this article, I explained how to create and use a GridView control in WPF.