WPF Grouping and Sorting ListView

• Download source - 70.2 KB

Introduction

This is for anyone looking for a WPF Sortable Listview with Drag and Drop Grouping. This is my first article, so be gentle. This is Part 1 of 3. Part 2 (Drag/Drop Adorners) can be found here and Part 3 (ComboBox Editing) can be found here. I wanted to give special thanks to these individuals/sites:

• A Sortable GridView (I mean ListView) Control in WPF from Joel Rumerman's Blog
• WPF Diagram Designer: Part 1 by sukram
• Understanding the Visual Tree and Logical Tree in WPF by Josh Smith
• Mole For Visual Studio - With Editing - Visualize All Project Types by Andrew Smith, Josh Smith, and Karl Shifflett

Points of Interest

Well, I think I am going to just generalize on a lot of the code because the references above do a great job of explaining how each piece works. I have many comments in the code as well.

I wanted to point out that these solutions are not exactly what I had in mind, but they work well for now. Of course, unless you wanted to customize the GridViewHeaderRowPresenter, which I have not figured out yet.

Right now, I am just customizing the ListView and GridViewColumn classes along with creating your own styling of the ListView. More on styling can be found here.

The main problems were trying to "share" the Left mouse button events with the GridViewHeaderRowPresenter. There are 2 ways I show how to share these events. One way is using the GroupSortModeListView class and the other is using the GroupSortListView class. Each has its pros and cons.

These two classes, GroupSortListView and GroupSortModeListView, are the driver classes that hook everything together between the ListView, DesignerCanvas, and the GridViewColumn.

GroupSortModeListView Class

With this class, you can turn on and off Grouping by right clicking for the "Allow Grouping" Context menu. This will allow the GridViewHeaderRowPresenter access to all the events which mean the resizing, column reordering and "IsPressed" styling will work. The only downfall is that you need to right click on the ListView to enable grouping through the Context Menu. There are a couple new properties to this class that I will show, but the methods are the key to these two classes.

Properties

• GroupSortListViewColumnHeaderSortedAscendingStyle - Gets/sets the style name of the column that is Sorted ascending direction.
• GroupSortListViewColumnHeaderSortedDescendingStyle - Gets/sets the style name of the column that is Sorted descending direction.
• GroupSortListViewColumnHeaderNotSortedStyle - Gets/sets the style name of the column that is not Sorted.
• GroupMenuItem - Gets/sets the Group MenuItem in the Context menu and allows access for anyone to hookup to this event if needed.
• InGroupingMode - Gets/sets the GroupMenuItem.IsChecked in the Context menu determining if we are in Group Mode or not.

Important Methods

• GridViewColumnHeaderClickHandler - This handles changing the styles of the column headers when sorting!!
• GridViewColumnHeaderPreviewMouseDownHandler - This handles hooking up to the DesignerCanvas's RemoveGroup event and starting the DragDrop and grouping when the InGroupingMode is true.
• HookupDesignerCanvasRemoveGroupEvent - This handles the DesignerCanvas's RemoveGroup event and removes the groups. More explanation has been provided below in the Using the Code section.

GroupSortListView Class

With this class the first thing you will notice is there is no Grouping mode. That is because Grouping is always on - as is the Sorting. The big downfall this way is that the columns you have sorting and grouping enabled, your column resizing and reordering doesn't work along with the "IsPressed" styling. Simply because it "Steals" and handles the events away from the GridViewHeaderRowPresenter.

DependencyProperties

• GroupSortListViewColumnHeaderSortedAscendingStyle - Gets/sets the style name of the column that is Sorted ascending direction.
• GroupSortListViewColumnHeaderSortedDescendingStyle - Gets/sets the style name of the column that is Sorted descending direction.
• GroupSortListViewColumnHeaderNotSortedStyle - Gets/sets the style name of the column that is not Sorted.

Important Methods

• GridViewColumnHeaderPreviewMouseDownHandler - This handles hooking up to the DesignerCanvas's RemoveGroup event and changing the styles of the column headers when sorting!!
• GridViewColumnHeaderPreviewMouseMoveHandler - This handles starting the DragDrop and grouping.
• HookupDesignerCanvasRemoveGroupEvent - This handles the DesignerCanvas's RemoveGroup event and removes the groups. More explanation has been provided below in the Using the Code section.

Using the Code

There are 4 main parts to this app. First are the Designer controls which deal with the custom visual designer items on the Canvas control to see/visualize what columns have been grouped. Second are the GridView/ListView controls that customize the GridViewColumnHeaders to accommodate for the sorting and grouping. Third are the Resources, mainly just for the GridView. Finally, the windows that display the custom ListViews.

Here is how I set up the custom GridviewColumn called GroupSortGridViewColumn and the custom ListView I called GroupSortModeListView:

<MyListView:GroupSortModeListView x:Name="sortableListView1" AllowDrop="False" 
	       HorizontalAlignment="Stretch" Grid.Row="1"
	       Margin="0,0,0,0" VerticalAlignment="Stretch" 
			IsSynchronizedWithCurrentItem="True"               
	       GroupSortModeListViewColumnHeaderSortedAscendingStyle=
						"UpArrowHeaderStyle"
	       GroupSortModeListViewColumnHeaderSortedDescendingStyle=
						"DownArrowHeaderStyle"
	       GroupSortModeListViewColumnHeaderNotSortedStyle="NoArrowHeaderStyle">
	 <ListView.GroupStyle>
	       <GroupStyle>
	               <GroupStyle.ContainerStyle>
	                       <Style TargetType="{x:Type GroupItem}">
	                       <Setter Property="Margin" Value="0,0,0,5"/>
	                       <Setter Property="Template">
	                       <Setter.Value>
	                               <ControlTemplate TargetType=
							"{x:Type GroupItem}">
	                               <Expander IsExpanded="True" 
						BorderThickness="0,0,0,1">
	                               <Expander.Header>
	                               <DockPanel>
	                               <TextBlock FontWeight="Bold" 
					Text="{Binding Path=Name}" Margin="5,0,0,0"
	                                       Width="100"/>
	                               <TextBlock FontWeight="Bold" 
					Text="{Binding Path=ItemCount}"/>
	                               <TextBlock FontWeight="Bold" Text=" Items"/>
	                               </DockPanel>
	                               </Expander.Header>
	                               <Expander.Content>
	                                       <ItemsPresenter />
	                               </Expander.Content>
	                               </Expander>
	                               </ControlTemplate>
	                       </Setter.Value>
	                       </Setter>
	                       </Style>
	               </GroupStyle.ContainerStyle>
	       </GroupStyle>
	</ListView.GroupStyle>
	<MyListView:GroupSortModeListView.View>
	       <GridView>
	       <MyListView:GroupSortGridViewColumn Width="93" Header="Print Report">
	               <MyListView:GroupSortGridViewColumn.CellTemplate>
	               <DataTemplate>
	                       <Button Content="Print" Height="40" Width="80" 
	                                       HorizontalAlignment="Center" />
	               </DataTemplate>
	               </MyListView:GroupSortGridViewColumn.CellTemplate>
	       </MyListView:GroupSortGridViewColumn>
	       <MyListView:GroupSortGridViewColumn Width="70" Header="First Name" 
	               DisplayMemberBinding="{Binding FirstName}" />
	       <MyListView:GroupSortGridViewColumn Width="70" Header="Last Name" 
	               SortPropertyName="Version" 
			DisplayMemberBinding="{Binding LastName}"/>
	       <MyListView:GroupSortGridViewColumn Width="95" Header="Project Number" 
	               SortPropertyName="ProjectNumber" 
			DisplayMemberBinding="{Binding ProjectNumber}"/>
	       <MyListView:GroupSortGridViewColumn Width="100" 
					Header="Project Quantity" 
	               SortPropertyName="NumberOfProjects" 
			DisplayMemberBinding="{Binding NumberOfProjects}"/>
	       <MyListView:GroupSortGridViewColumn Width="120" 
					Header="Project Sequence" 
	               SortPropertyName="ProjectsSequenceNumber" 
			GroupPropertyName="ProjectsSequenceNumber" 
	               DisplayMemberBinding="{Binding ProjectsSequenceNumber}"/>
	       <MyListView:GroupSortGridViewColumn Width="100" Header="Employee Dept" 
	               SortPropertyName="EmployeeDept" GroupPropertyName="EmployeeDept" 
	               DisplayMemberBinding="{Binding EmployeeDept}"/>
	       </GridView>
	</MyListView:GroupSortModeListView.View>
</MyListView:GroupSortModeListView>

There is also some styling involved of course.

Canvas/ListView Communication

Everything on the Grouping and Sorting side is packaged and handled by the GroupSortModeListView. The way the communication works is that the GroupSortModeListView hooks up to the DesignerCanvas's RemoveGroup event here:

private void HookupDesignerCanvasRemoveGroupEvent()
{
	if (!RemoveGroupEventHookedup)
	{
	       //find the DesignerCanvas used and attach to its "RemoveGroup" event!!
           DesignerCanvas dc = FindVisualDescendantByType<DesignerCanvas>
			(this as DependencyObject) 
	       as DesignerCanvas;
           dc.RemoveGroup += new RemoveGroupHandler(dc_RemoveGroup);
           RemoveGroupEventHookedup = true;
	}
}

And the DesignerCanvas sends the event here:

private UIElement SendRemoveGroupEvent(UIElement element)
{
	DesignerItem item;
       if (element is DesignerItem)
	{
	       item = element as DesignerItem;
               //need to find the descendant of type TextBlock here!!!
               TextBlock tb = FindVisualDescendantByType<TextBlock>(item);
               //tb.Name contains the groupName we need to remove the group 
	       			//with this event to the window!!!
               RemoveGroup(tb.Name);//Send Event
               return item;
	}
       return null;
}

This GroupSortModeListView also has a ContextMenu (you can see it by right clicking on the ListView in Window2) that "Allows Grouping". When you turn this on the columns that have Grouping setup will not sort, reorder, or resize because I have to "steal" the event away from the GridViewHeaderRowPresenter.

The GroupSortListView (this is implemented in Window3) is another "option" if you wish that allows both sorting and grouping at the same time without the ContextMenu. However, these columns will not reorder or resize either because I have to "steal" the event away from the GridViewHeaderRowPresenter.

Running the App

The StartupWindow has three buttons that open each of the other windows (Window1, Window2, and Window3).

Conclusion

This is a good working solution to has both sorting and drag and drop grouping on the ListView for what I need it for, but not the best way. Ideally, we would customize the GridViewHeaderRowPresenter to have all the functionality work exactly as you want it to. I am always open to anyone who has other ideas...

Revision History

• Article created - 8/15/2008
• Article added as part 1 of a 3 part series - 9/1/2008 (Part 2 here)
• Part 3 of the series is here

You must Sign In to use this message board.

FAQ  Noise Tolerance Very HighHighMediumLowVery Low  Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh) FirstPrevNext

Select row Lev Rakhman 4:57 15 Oct '08   Can you select a row just by clicking on the print button? Sign In·View Thread·PermaLink Re: Select row [modified] mtonsager 3:35 21 Oct '08   Sorry I did not answer earlier, but yes you can. Although, I have not added that feature in this article. I was thinking of writing a DatePicker editing Listview article that will have row selecting involved. You can step through the Visual Tree and find the ListViewItem the button belongs to and set its IsSelected property to true. Thanks for the question. Matt modified on Tuesday, October 21, 2008 8:42 AM Sign In·View Thread·PermaLink

Last Visit: Tuesday, December 2, 2008 5:58 AM     Last Update:Tuesday, December 2, 2008 5:59 AM