Group Sort Adorner ListView
This is for anyone looking for a WPF sortable Listview with drag and drop grouping, drag and drop column reordering and column resizing.
Introduction
This is Part 2 of 3 articles I am doing for the ListView. Part 1 (Grouping and Sorting) is found here. And Part 3 of the series (ComboBox Editing) is here. This is for anyone looking for a WPF sortable Listview with drag and drop grouping, drag and drop column reordering and column resizing. There is also an Adorner that drags around with the cursor. 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
- Drag and Drop Items in a WPF ListView by Josh Smith
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 also have many comments in the code as well.
I also wanted to point out that the GroupSortAdornerListView is the solution that I had in mind, and works very well. However, there is a bit more work to do to only allow one DesignerItem per Column on the DesignerCanvas, which can be done later.
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 GroupSortAdornerListView class is new, but a similar class to the GroupSortListView and the GroupSortModeListView classes I spoke about in Part 1.
The main problem I had was trying to "share" the Left mouse button events with the Sorting, Grouping, Resizing, and Reordering of the columns in the GroupSortAdornerListView. To do this, you must override 3 methods in the ListView class.
The 3 methods are:
OnPreviewMouseLeftButtonDownOnPreviewMouseMoveOnPreviewMouseLeftButtonUp
Here are the properties and some of the important methods of the GroupSortAdornerListView class. This class is like the other 2 classes because it too is the driver class that hooks everything together between the ListView, DesignerCanvas, and the GridViewColumn.
GroupSortAdornerListView Class
With this class, you have full functionality with the columns. Your grouping drag/drop, column reordering drag/drop, sorting, and resizing all work nicely together. The biggest key to have them all work together is to keep track of 2 events. One is whether or not you can drag, and the second is to know when you are dragging. There are further explanations below with important properties and methods for this class.
Properties
GroupSortListViewColumnHeaderSortedAscendingStyle- Gets/sets the style name of the column that is Sorted in ascending direction.GroupSortListViewColumnHeaderSortedDescendingStyle- Gets/sets the style name of the column that is Sorted in descending direction.GroupSortListViewColumnHeaderNotSortedStyle- Gets/sets the style name of the column that is not SortedColumnUnderDragCursor- Gets/sets theGridViewColumnHeaderthat is under the Drag cursor so we can highlight it when we drag over it. It is also used to find the index number of the column when we drop for columnReorder.ColumnBeingDragged- Gets/sets theGridViewColumnHeaderthat is being dragged. Also, obtains information for the column reorder and grouping.CanStartDragOperation- Gets theboolthat tells us if we can start dragging or not.
Important Methods
OnPreviewMouseLeftButtonDown- This method tells us if dragging is allowed, and initializes needed objects to start the drag process.OnPreviewMouseMove- This handles theAdorner, and if you can drag/drop both grouping and reordering or just reordering.OnPreviewMouseLeftButtonUp- This handles changing the styles of the column headers when sorting.MouseDragged- Tells us if the mouse has been dragged more than one pixel.DropForGrouping- Handles the dropping on to theDesignerCanvasfor grouping the columns.DropForColumnReorderOnly- Handles the Reordering of the columns.GetColumnHeaderUnderDragCursor- This gets the column header under the drag cursor using a customIsMouseOver2method.GetThumbUnderDragCursor- Gets the thumb under the drag cursor using the customIsMouseOver2method.InitializeAdornerLayer- Sets up theAdornerused when dragging the column.UpdateDragAdornerLocation- Updates the location of theAdornerwhile dragging.
Using the Code
As stated in Part 1, 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 one of the styles are setup for the GridViewColumnHeader. There are three styles. A descending, an ascending and one for a column that is not sorted.
<Style x:Key="UpArrowHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Grid>
<Border Name="HeaderBorder"
BorderThickness="0,1,0,1"
BorderBrush="{StaticResource NormalBorderBrush}"
Background="{StaticResource LightBrush}"
Padding="2,0,2,0">
<StackPanel x:Name="spHeader"
Orientation="Horizontal">
<ContentPresenter Name="HeaderContent"
Margin="0,0,0,1"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding
SnapsToDevicePixels}"/>
<Path x:Name="arrow"
VerticalAlignment="Center"
HorizontalAlignment="Center"
StrokeThickness="1" Fill="Gray"
Data="M 5,10 L 15,10 L 10,5 L 5,10"/>
</StackPanel>
</Border>
<Thumb x:Name="PART_HeaderGripper"
HorizontalAlignment="Right"
Margin="0,0,-9,0"
Style="
{StaticResource GridViewColumnHeaderGripper}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="HeaderBorder"
Property="Background"
Value="{StaticResource NormalBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="HeaderBorder"
Property="Background"
Value="{StaticResource PressedBrush}"/>
<Setter TargetName="HeaderContent"
Property="Margin" Value="1,1,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource
{x:Static
SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="mlv:
ListViewColumnHeaderDragState.IsUnderDragCursor"
Value="True">
<Setter Property="Foreground" Value="red"/>
<Setter TargetName="HeaderBorder" Property="Background"
Value="{StaticResource DragOverBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Role" Value="Padding">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Border Name="HeaderBorder"
BorderThickness="0,1,0,1"
BorderBrush="{StaticResource NormalBorderBrush}"
Background="{StaticResource LightBrush}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
OnPreviewMouseMove Dragging
This section is the main difference between how everything was implemented in part 1 and how it is implemented here. Before I stated, you needed to keep track of whether or not you can drag, and to know when you are dragging. This overridden method does just that:
protected override void OnPreviewMouseMove(MouseEventArgs e)
{
base.OnPreviewMouseMove(e);
if( !this.CanStartDragOperation )
return;
if (!MouseDragged(e.GetPosition(this)))
return;
isDragging = true;
GroupSortGridViewColumn sortCol = ColumnBeingDragged.Column as
GroupSortGridViewColumn;
//if((ColumnReorderOnly) or (Both ColumnReorder and Groupable))
string groupName = "";
if (sortCol != null)
groupName = sortCol.GroupPropertyName;
if (groupName != "")//(Both ColumnReorder and Groupable)
DropForGrouping(sortCol);
else//if there is no groupName then it must be a columnReorder!!!
DropForColumnReorderOnly();
}
DropForGrouping Method
This sets up for both the column grouping and the column reordering. First, it sets up the serialized object for the column grouping. Second, it sets up the Adorner for dragging. Lastly, it drops and depending on what the DragDropEffects are, it may or may not group by that column.
private void DropForGrouping(GroupSortGridViewColumn sortCol)
{
//Serialize the object that is added to the DesignerCanvas
SerializeGroupObject
(sortCol.GroupPropertyName, sortCol.Header.ToString());
if (dataObject != null)
{
//Setup the Adorner Visual to drag
AdornerLayer layer2 = InitializeAdornerLayer(ColumnBeingDragged);
DragDropEffects allowedEffects =
DragDropEffects.Copy | DragDropEffects.Move;
DragDropEffects dde = DragDrop.DoDragDrop
(this, dataObject, allowedEffects);
if (dde == DragDropEffects.Copy)
Group(sortCol.GroupPropertyName);
if (layer2 != null)
layer2.Remove(this.dragAdorner);
//reset these to null when done
ColumnUnderDragCursor = null;
ColumnBeingDragged = null;
}
}
DropForColumnReorderOnly Method
This sets up for only the column reorder. It first sets up the Adorner and then drops for the column reorder.
private void DropForColumnReorderOnly()
{
AdornerLayer layer2 = InitializeAdornerLayer(ColumnBeingDragged);
DragDropEffects allowedEffects = DragDropEffects.Move;
DragDropEffects dde = DragDrop.DoDragDrop
(this, "Something", allowedEffects);
if (layer2 != null)
layer2.Remove(this.dragAdorner);
//
ColumnUnderDragCursor = null;
ColumnBeingDragged = null;
}
Overridden OnDrop Method
This is where the column reorder happens when the drop occurs on the GridViewColumnHeader. You can reorder the columns by using their index numbers and the Move method on the column like so:
protected override void OnDrop(DragEventArgs e)
{
if (ColumnBeingDragged != null && ColumnUnderDragCursor != null)
{
//This is how you reorder the columns
GridViewColumn colDrag = ColumnBeingDragged.Column;
GridViewColumn colDrop = ColumnUnderDragCursor.Column;
e.Effects = DragDropEffects.Move;
int colDragged =
gridViewHeaderRowPresenter.Columns.IndexOf(colDrag);
int colDroppedOn =
gridViewHeaderRowPresenter.Columns.IndexOf(colDrop);
gridViewHeaderRowPresenter.Columns.Move(colDragged, colDroppedOn);
}
}
Running the App
The StartupWindow has 4 buttons that open each of the other windows (Window1, Window2, Window3, and Window4). The newest button is the GroupSort Adorner Window which is the button with this new functionality.
Conclusion
This is the solution I was looking for. I am planning on doing a part 3 with ListView editing in a couple of weeks to conclude this series.
Revision History
- 9/1/2008 - Article created
- 9/20/2008 - Added Part 3 of the series here