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